fix: translates a11y status texts on downshift

src/components/search/search.tsx

@@ -1,11 +1,12 @@
-import Downshift from 'downshift';
+import Downshift, { type A11yStatusMessageOptions } from 'downshift';
 import { ReactNode, useState } from 'react';
 import { useAutocomplete } from '@atb/page-modules/departures/client';
 import style from './search.module.css';
 import VenueIcon from '@atb/components/venue-icon';
 import { andIf } from '@atb/utils/css';
 import { GeocoderFeature } from '@atb/page-modules/departures';
 import { logSpecificEvent } from '@atb/modules/firebase';
+import { ComponentText, useTranslation } from '@atb/translations';
 
 type SearchProps = {
   label: string;
@@ -28,6 +29,23 @@ export default function Search({
 }: SearchProps) {
   const [query, setQuery] = useState('');
   const { data } = useAutocomplete(query, autocompleteFocusPoint);
+  const { t } = useTranslation();
+
+  function getA11yStatusMessage({ isOpen, resultCount, previousResultCount }: A11yStatusMessageOptions<GeocoderFeature>) {
+    if (!isOpen) {
+      return ''
+    }
+
+    if (!resultCount) {
+      return t(ComponentText.SearchInput.noResults)
+    }
+
+    if (resultCount !== previousResultCount) {
+      return t(ComponentText.SearchInput.results(resultCount))
+    }
+
+    return ''
+  }
 
   return (
     <Downshift<GeocoderFeature>
@@ -38,6 +56,7 @@ export default function Search({
       onChange={onChange}
       itemToString={geocoderFeatureToString}
       selectedItem={selectedItem || initialFeature || null}
+      getA11yStatusMessage={getA11yStatusMessage}
     >
       {({
         getInputProps,

src/translations/components/index.ts

@@ -10,3 +10,4 @@ export { EmptySearch } from './empty-search';
 export { TabLink } from './tab-link';
 export { DepartureTime } from './departure-time';
 export { ClearButton } from './clear-button';
+export { SearchInput } from './search';

src/translations/components/search.ts

@@ -0,0 +1,17 @@
+import { translation as _ } from '@atb/translations/commons';
+
+export const SearchInput = {
+  noResults: _(
+    'Ingen resultater tilgjengelig',
+    'No results are available.',
+    'Ingen resultat tilgjengeleg',
+  ),
+  results: (resultCount: number) =>
+    _(
+      `${resultCount} treff, bruk pil opp og pil ned for navigering. Trykk Enter for å velge.`,
+      `${resultCount} result${
+        resultCount === 1 ? ' is' : 's are'
+      } available, use up and down arrow keys to navigate. Press Enter key to select.`,
+      `${resultCount} reff, bruk pil opp og pil ned for navigering. Trykk Enter for å velje.`,
+    ),
+};