Improve search bar accessibility

Also remove the "X" icon from Chrome we don't want

client/src/app/header/search-typeahead.component.html

@@ -4,10 +4,10 @@
     [(ngModel)]="search" (ngModelChange)="onSearchChange()" (keydown)="handleKey($event)"
     aria-label="Search" autocomplete="off"
   >
-  <my-global-icon
+
-    title="Search" i18n-title role="button"
+  <button class="border-0 search-button" title="Search" i18n-title (click)="doSearch()">
-    iconName="search" class="icon icon-search" (click)="doSearch()" (keydown.enter)="doSearch()"
+    <my-global-icon iconName="search"></my-global-icon>
-  ></my-global-icon>
+  </button>
 
   <div class="position-absolute jump-to-suggestions">
 

client/src/app/header/search-typeahead.component.scss

@@ -12,16 +12,21 @@
   }
 }
 
-.icon-search {
+.search-button {
-  @include icon(25px);
+  display: inline-flex;
-  @include margin-left(-35px);
+  align-self: center;
-
-  height: 18px;
-
-  // yolo
   position: absolute;
-  margin-top: 3.5px;
+  right: 5px;
-  right: 10px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  my-global-icon {
+    @include icon(18px);
+
+    display: inline-flex;
+  }
 }
 
 .jump-to-suggestions {
@@ -52,7 +57,7 @@ li.suggestion {
 
 #typeahead-help,
 #typeahead-instructions {
-  margin-top: 10px;
+  margin-top: 9px;
   width: 100%;
   padding: .5rem 1rem;
   white-space: normal;

client/src/sass/application.scss

@@ -18,6 +18,12 @@
 
 @use './class-helpers/index.scss';
 
+/* clears the ‘X’ from Chrome */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration { display: none; }
+
 body {
   /*** theme ***/
   // now beware sass requires interpolation