Merge pull request #531 from ibi-group/location-field-error-a11y

Location field error a11y

Author: demory

__snapshots__/storybook.test.ts.snap

@@ -11,7 +11,7 @@ otpUi:
   LocationField:
     beingTypingPrompt: Begin typing to search for locations
     clearLocation: Clear location
-    currentLocationUnavailable: Current location not available ({error})
+    currentLocationUnavailable: Current location not available{error, select, undefined {} other { ({error})}}
     fetchingLocation: Fetching location...
     geocoderUnreachable: Could not reach geocoder{error, select, undefined {} other { ({error})}}
     homeLocation: Home
@@ -26,6 +26,9 @@ otpUi:
     # Note to translator: This is an implicit plural (as in "Other results").
     other: Other
     recentlySearched: Recently Searched
+    resultsFound: >
+      {count, plural, =0 {No results} =1 {# geocoder result} other {# geocoder results}}
+      found for {input, select, null {your query} other {"{input}"}}
     suggestedLocations: Suggested locations
     suggestedLocationsLong: Toggle displaying the list of suggested locations
     stations: Stations

packages/location-field/i18n/en-US.yml

@@ -2,7 +2,7 @@ otpUi:
   LocationField:
     useCurrentLocation: Usar ubicación actual
     workLocation: Ubicación de trabajo
-    currentLocationUnavailable: Ubicación actual no disponible ({error})
+    currentLocationUnavailable: Ubicación actual no disponible{error, select, undefined {} other { ({error})}}
     fetchingLocation: Buscando la ubicación...
     beingTypingPrompt: Comience a escribir para buscar ubicaciones
     clearLocation: Restablecer la ubicación
@@ -20,3 +20,6 @@ otpUi:
     noResultsFound:
       "No se han encontrado resultados para {input, select,\n null {su\
       \ consulta}\n other {{input}}\n }\n"
+    resultsFound: >
+      {count, plural, =0 {Ningún resultado} =1 {# resultado} other {# resultados} del
+      geocodificador para {input, select, null {su consulta} other {"{input}"}}

packages/location-field/i18n/es.yml

@@ -11,7 +11,7 @@ otpUi:
   LocationField:
     beingTypingPrompt: Tapez pour rechercher des lieux
     clearLocation: Effacer le lieu
-    currentLocationUnavailable: Position actuelle non disponible ({error})
+    currentLocationUnavailable: Position actuelle non disponible{error, select, undefined {} other { ({error})}}
     fetchingLocation: Chargement du lieu...
     geocoderUnreachable: Géocodeur introuvable{error, select, undefined {} other { ({error})}}
     homeLocation: Domicile
@@ -26,6 +26,9 @@ otpUi:
     # Note to translator: This is an implicit plural (as in "Other results").
     other: Autres
     recentlySearched: Recherches récentes
+    resultsFound: >
+      {count, plural, =0 {Aucun résultat} =1 {# résultat} other {# résultats}} du
+      géocodeur pour {input, select, null {votre requête} other {"{input}"}}
     stations: Stations
     stops: Arrêts
     useCurrentLocation: Utiliser ma position actuelle

packages/location-field/i18n/fr.yml

@@ -9,7 +9,7 @@ otpUi:
     workLocation: 근무지
     homeLocation: 집
     clearLocation: 위치 재설정
-    currentLocationUnavailable: 현재 위치를 사용할 수 없습니다 ({error})
+    currentLocationUnavailable: 현재 위치를 사용할 수 없습니다{error, select, undefined {} other { ({error})}}
     fetchingLocation: 페치 위치…
     geocoderUnreachable: 지오 코더에 도달 할 수 없습니다{error, select, undefined {} other { ({error})}}
     myPlaces: 내 장소

packages/location-field/i18n/ko.yml

@@ -4,8 +4,11 @@ otpUi:
     noResultsFound:
       "Không tìm thấy kết quả cho {input, select,\n null {vấn của bạn}\n\
       \ other {{input}}\n }\n"
+    resultsFound: >
+      {count, plural, =0 {Không có}, other {#}} kết quả
+      cho {input, select, null {vấn của bạn} other {"{input}"}}"
     clearLocation: Vị trí rõ ràng
-    currentLocationUnavailable: Vị trí hiện tại không có sẵn ({error})
+    currentLocationUnavailable: Vị trí hiện tại không có sẵn{error, select, undefined {} other { ({error})}}
     fetchingLocation: Tìm nạp vị trí…
     geocoderUnreachable:
       Không thể đến bộ định vị địa lý{error, select, undefined

packages/location-field/i18n/vi.yml

@@ -5,7 +5,7 @@ otpUi:
     homeLocation: 家
     noResultsFound: "找不到与 {input, select,\n null {您的搜索}\n other {{input}}\n } 相关的结果\n"
     stops: 车站
-    currentLocationUnavailable: 当前位置不详 ({error})
+    currentLocationUnavailable: 当前位置不详{error, select, undefined {} other { ({error})}}
     fetchingLocation: 获取的位置…
     geocoderUnreachable: 无法到达地理编码器{error, select, undefined {} other { ({error})}}
     myPlaces: 我的地方

packages/location-field/i18n/zh_Hans.yml

@@ -38,6 +38,62 @@ function DefaultLocationIcon({
   return <LocationIcon size={13} type={locationType} />;
 }
 
+/**
+ * Helper function that includes or excludes features based om layers.
+ */
+function filter(list: any[], layers: string[], include: boolean, limit: number): any[] {
+  return list
+    .filter(feature => layers.includes(feature.properties.layer) === include)
+    .slice(0, limit);
+}
+
+/**
+ * Puts the given geocoded features into several categories with upper bounds.
+ */
+function getFeaturesByCategoryWithLimit(
+  geocodedFeatures: any[],
+  suggestionCount: number,
+  sortByDistance: boolean,
+  preferredLayers: string[]
+) {
+  // Split features into those we want to always show above others
+  const { special, normal } = geocodedFeatures.reduce(
+    (prev, cur) => {
+      prev[
+        preferredLayers.includes(cur?.properties?.layer)
+          ? "special"
+          : "normal"
+      ].push(cur);
+      return prev;
+    },
+    { special: [], normal: [] }
+  );
+
+  const sortedGeocodedFeatures = [
+    ...special,
+    ...normal.sort((a, b) => {
+      if (!sortByDistance) return 0;
+      return (
+        (b.properties?.distance || Infinity) -
+        (a.properties?.distance || Infinity)
+      );
+    })
+  ];
+
+  // Split out different types of transit results
+  // To keep the list tidy, only include a subset of the responses for each category
+  const stopFeatures = filter(sortedGeocodedFeatures, ["stops"], true, suggestionCount);
+  const stationFeatures = filter(sortedGeocodedFeatures, ["stations"], true, suggestionCount);
+  const otherFeatures = filter(sortedGeocodedFeatures, ["stops", "stations"], false, suggestionCount);
+
+  return {
+    count: otherFeatures.length + stationFeatures.length + stopFeatures.length,
+    otherFeatures,
+    stationFeatures,
+    stopFeatures
+  }
+}
+
 const LocationField = ({
   addLocationSearch = () => {},
   autoFocus = false,
@@ -114,6 +170,7 @@ const LocationField = ({
   const geocodeAutocomplete = useMemo(() => debounce(300, (text: string) => {
     if (!text) {
       console.warn("No text entry provided for geocode autocomplete search.");
+      setMessage(null)
       return;
     }
     getGeocoder(geocoderConfig)
@@ -137,10 +194,14 @@ const LocationField = ({
               { error: errorMessage }
             );
             geocodedFeatures = [];
-          } else if (geocodedFeatures.length === 0) {
+          } else {
+            const { count } = getFeaturesByCategoryWithLimit(geocodedFeatures, suggestionCount, sortByDistance, preferredLayers);
             message = intl.formatMessage(
-              { id: "otpUi.LocationField.noResultsFound" },
-              { input: text }
+              { id: "otpUi.LocationField.resultsFound" },
+              {
+                count,
+                input: text
+              }
             );
           }
           setGeocodedFeatures(geocodedFeatures);
@@ -149,6 +210,11 @@ const LocationField = ({
       )
       .catch((err: unknown) => {
         console.error(err);
+        const message = intl.formatMessage(
+          { id: "otpUi.LocationField.geocoderUnreachable" },
+          { error: err.toString() }
+        );
+        setMessage(message);
       });
   }), []);
 
@@ -375,59 +441,22 @@ const LocationField = ({
   };
 
   const message = stateMessage;
-  let geocodedFeatures = stateGeocodedFeatures;
+  const geocodedFeatures = stateGeocodedFeatures;
 
   if (sessionSearches.length > 5) sessionSearches = sessionSearches.slice(0, 5);
 
   // Assemble menu contents, to be displayed either as dropdown or static panel.
   // Menu items are created in four phases: (1) the current location, (2) any
   // geocoder search results; (3) nearby transit stops; and (4) saved searches
 
+  const statusMessages = [];
   let menuItems = []; // array of menu items for display (may include non-selectable items e.g. dividers/headings)
   let itemIndex = 0; // the index of the current location-associated menu item (excluding non-selectable items)
   const locationSelectedLookup = {}; // maps itemIndex to a location selection handler (for use by the onKeyDown method)
 
   /* 1) Process geocode search result option(s) */
   if (geocodedFeatures.length > 0) {
-    // Split features into those we want to always show above others
-    const { special, normal } = geocodedFeatures.reduce(
-      (prev, cur) => {
-        prev[
-          preferredLayers.includes(cur?.properties?.layer)
-            ? "special"
-            : "normal"
-        ].push(cur);
-        return prev;
-      },
-      { special: [], normal: [] }
-    );
-
-    geocodedFeatures = [
-      ...special,
-      ...normal.sort((a, b) => {
-        if (!sortByDistance) return 0;
-        return (
-          (b.properties?.distance || Infinity) -
-          (a.properties?.distance || Infinity)
-        );
-      })
-    ];
-
-    // Add the menu sub-heading (not a selectable item)
-    // menuItems.push(<MenuItem header key='sr-header'>Search Results</MenuItem>)
-
-    // Split out different types of transit results
-    // To keep the list tidy, only include a subset of the responses for each category
-    const stopFeatures = geocodedFeatures
-      .filter(feature => feature.properties.layer === "stops")
-      .slice(0, suggestionCount);
-    const stationFeatures = geocodedFeatures
-      .filter(feature => feature.properties.layer === "stations")
-      .slice(0, suggestionCount);
-    const otherFeatures = geocodedFeatures
-      .filter(feature => feature.properties.layer !== "stops")
-      .filter(feature => feature.properties.layer !== "stations")
-      .slice(0, suggestionCount);
+    const { otherFeatures, stationFeatures, stopFeatures } = getFeaturesByCategoryWithLimit(geocodedFeatures, suggestionCount, sortByDistance, preferredLayers)
 
     // If no categories of features are returned, this variable is used to
     // avoid displaying headers
@@ -645,18 +674,26 @@ const LocationField = ({
   } else {
     // error detecting current position
     optionIcon = currentPositionUnavailableIcon;
-    optionTitle = intl.formatMessage({
-      id: "otpUi.LocationField.currentLocationUnavailable"
-    }, { error: typeof currentPosition.error === "string" ? currentPosition.error : currentPosition.error.message });
+    optionTitle = intl.formatMessage(
+      {
+        id: "otpUi.LocationField.currentLocationUnavailable"
+      },
+      {
+        error: !currentPosition
+          ? undefined
+          : typeof currentPosition.error === "string" ? currentPosition.error : currentPosition.error.message
+      }
+    );
     positionUnavailable = true;
+    statusMessages.push(optionTitle)
   }
 
   // Add to the selection handler lookup (for use in onKeyDown)
   locationSelectedLookup[itemIndex] = locationSelected;
 
   if (!suppressNearby) {
     // Create and add the option item to the menu items array
-    const currentLocationOption = (
+    menuItems.push(
       <Option
         disabled={positionUnavailable}
         icon={optionIcon}
@@ -666,19 +703,20 @@ const LocationField = ({
         title={optionTitle}
       />
     );
-    menuItems.push(currentLocationOption);
-    itemIndex++;
+    if (!positionUnavailable) itemIndex++;
   }
   if (message) {
-    const messageItem = (
-      <Option
-        disabled
-        icon={<ExclamationCircle size={20} />}
-        key={optionKey++}
-        title={message}
-      />
-    );
-    menuItems.unshift(messageItem);
+    if (geocodedFeatures.length === 0) {
+      menuItems.unshift(
+        <Option
+          disabled
+          icon={<ExclamationCircle size={20} />}
+          key={optionKey++}
+          title={message}
+        />
+      );
+    }
+    statusMessages.push(message)
   }
 
   // Store the number of location-associated items for reference in the onKeyDown method
@@ -740,11 +778,14 @@ const LocationField = ({
             {clearButton}
           </S.InputGroup>
         </S.FormGroup>
+        <S.HiddenContent role="status">{statusMessages?.join(", ")}</S.HiddenContent>
         <S.StaticMenuItemList
+          // Hide the listbox from assistive technology if no valid items are shown.
+          aria-hidden={menuItemCount === 0 || undefined}
           aria-label={intl.formatMessage({
-            id: "otpUi.LocationField.suggestedLocations",
             defaultMessage: "Suggested locations",
-            description: "Text to show as a label for the dropdown list of locations"
+            description: "Text to show as a label for the dropdown list of locations",
+            id: "otpUi.LocationField.suggestedLocations"
           })}
           id={listBoxId}
         >
@@ -773,6 +814,7 @@ const LocationField = ({
           listBoxIdentifier={listBoxId}
           onToggle={onDropdownToggle}
           open={menuVisible}
+          status={statusMessages.join(", ")}
           title={<LocationIconComponent locationType={locationType} />}
         >
           {menuItems}