feat(internet-header): improve accessibility of the search (#3328)

Co-authored-by: Philipp Gfeller <[email protected]>
swisspost · Jul 25, 2024 · 4052cc0 · 4052cc0
1 parent c776bf8
commit 4052cc0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/.changeset/beige-onions-raise.md b/.changeset/beige-onions-raise.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/internet-header': patch
+---
+
+Improved accessibility of the header search by improving announcement of suggestions to screen reader users.
diff --git a/packages/internet-header/src/assets/i18n/translations.ts b/packages/internet-header/src/assets/i18n/translations.ts
@@ -64,4 +64,19 @@ export const translations = {
     fr: 'Supprimer le terme de recherche',
     it: 'Elimina termine di ricerca',
   },
+  'Enter search term. Press "Enter" to search.': {
+    de: 'Suchbegriff eingeben. Drücken Sie "Enter", um zu suchen.',
+    fr: 'Entrez le terme de recherche. Appuyez sur "Entrée" pour rechercher.',
+    it: 'Inserisci il termine di ricerca. Premi "Invio" per cercare.',
+  },
+  'most searched topics available, press the tab key to continue.': {
+    de: 'meistgesuchte Themen verfügbar, drücken Sie die Tabulatortaste, um fortzufahren.',
+    fr: 'sujets les plus recherchés disponibles, appuyez sur la touche de tabulation pour continuer.',
+    it: 'argomenti più cercati disponibili, premi il tasto tab per continuare.',
+  },
+  'search result(s)': {
+    de: 'Suchergebnis(se)',
+    fr: 'résultat(s) de recherche',
+    it: 'risultato/i di ricerca',
+  },
 };
diff --git a/packages/internet-header/src/components/post-search/post-search.tsx b/packages/internet-header/src/components/post-search/post-search.tsx
@@ -359,8 +359,17 @@ export class PostSearch implements HasDropdown, IsFocusable {
     }
     const { translations, search } = state.localizedConfig.header;
     const isParcelTrackingNr = this.parcelSuggestion && 'sending' in this.parcelSuggestion;
-    const showPortalRecommendations =
-      this.searchBox?.value === '' && search.searchRecommendations?.links.length > 0;
+    const isSearchEmpty = this.searchBox?.value === '';
+
+    const portalRecommendationCount = search.searchRecommendations?.links.length;
+    const showPortalRecommendations = isSearchEmpty && portalRecommendationCount > 0;
+
+    const suggestionCount = showPortalRecommendations
+      ? portalRecommendationCount
+      : this.coveoSuggestions.length + this.placeSuggestions.length;
+    const suggestionHint = ` ${suggestionCount} ${translate(
+      'most searched topics available, press the tab key to continue.',
+    )}`;
 
     return (
       <Host role="search">
@@ -398,6 +407,10 @@ export class PostSearch implements HasDropdown, IsFocusable {
                           ref={el => (this.searchBox = el)}
                           onInput={() => void this.handleSearchInput()}
                           onKeyDown={e => this.handleKeyDown(e)}
+                          title={
+                            translate('Enter search term. Press "Enter" to search.') +
+                            (isSearchEmpty && suggestionCount > 0 ? ` ${suggestionHint}` : '')
+                          }
                         />
                         <label htmlFor="searchBox">
                           {translations.flyoutSearchBoxFloatingLabel}
@@ -417,6 +430,9 @@ export class PostSearch implements HasDropdown, IsFocusable {
                           <SvgIcon name="pi-search" />
                         </button>
                       </div>
+                      <p class="visually-hidden" role="region" aria-live="polite">
+                        {isParcelTrackingNr ? 1 : suggestionCount} {translate('search result(s)')}
+                      </p>
                       {showPortalRecommendations && (
                         <h2 id="post-internet-header-search-recommendations-title" class="bold">
                           {search.searchRecommendations.title}