From ce99886db663e6266a65b7977a30fd8125442672 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 6 Oct 2023 09:59:21 +0200
Subject: [PATCH] Improve search bar accessibility

Also remove the "X" icon from Chrome we don't want
---
 .../header/search-typeahead.component.html    |  8 +++---
 .../header/search-typeahead.component.scss    | 25 +++++++++++--------
 client/src/sass/application.scss              |  6 +++++
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index c5ca4b9b9..e5fadd4ac 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/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"
-    iconName="search" class="icon icon-search" (click)="doSearch()" (keydown.enter)="doSearch()"
-  ></my-global-icon>
+
+  <button class="border-0 search-button" title="Search" i18n-title (click)="doSearch()">
+    <my-global-icon iconName="search"></my-global-icon>
+  </button>
 
   <div class="position-absolute jump-to-suggestions">
 
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index b96853400..ff43abd4e 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -12,16 +12,21 @@
   }
 }
 
-.icon-search {
-  @include icon(25px);
-  @include margin-left(-35px);
-
-  height: 18px;
-
-  // yolo
+.search-button {
+  display: inline-flex;
+  align-self: center;
   position: absolute;
-  margin-top: 3.5px;
-  right: 10px;
+  right: 5px;
+
+  &: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;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 9cf2a053d..e22a9f255 100644
--- a/client/src/sass/application.scss
+++ b/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