From d3590ae0534c8df38b7828f259ad99265cf902dd Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 7 Jul 2023 10:27:38 -0400
Subject: [PATCH] refactor(location-field): aria-hide again list if no
 interactive options.

---
 __snapshots__/storybook.test.ts.snap  | 27 +++++++++++++++++++++++++++
 packages/location-field/src/index.tsx |  3 +++
 2 files changed, 30 insertions(+)

diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap
index 5a66041e9..82768ec26 100644
--- a/__snapshots__/storybook.test.ts.snap
+++ b/__snapshots__/storybook.test.ts.snap
@@ -182436,6 +182436,7 @@ exports[`Storyshots LocationField/Desktop Context Auto Focus With Multiple Contr
       role="status"
     />
     <ul
+      aria-hidden={false}
       aria-label="Suggested locations"
       className="c8 c9"
       id="from-listbox"
@@ -182612,6 +182613,7 @@ exports[`Storyshots LocationField/Desktop Context Blank 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9"
     id="from-listbox"
@@ -182782,6 +182784,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder No Results 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9"
     id="from-listbox"
@@ -182957,6 +182960,7 @@ exports[`Storyshots LocationField/Desktop Context Geocoder Unreachable 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9"
     id="from-listbox"
@@ -183127,6 +183131,7 @@ exports[`Storyshots LocationField/Desktop Context Here Geocoder 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9"
     id="from-listbox"
@@ -183296,6 +183301,7 @@ exports[`Storyshots LocationField/Desktop Context Location Unavailable 2`] = `
     otpUi.LocationField.currentLocationUnavailable
   </span>
   <ul
+    aria-hidden={true}
     aria-label="Suggested locations"
     className="c8 c9"
     id="from-listbox"
@@ -183492,6 +183498,7 @@ exports[`Storyshots LocationField/Desktop Context No Auto Focus With Multiple Co
       role="status"
     />
     <ul
+      aria-hidden={false}
       aria-label="Suggested locations"
       className="c8 c9"
       id="from-listbox"
@@ -183670,6 +183677,7 @@ exports[`Storyshots LocationField/Desktop Context Required And Invalid State 2`]
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9"
     id="from-listbox"
@@ -183878,6 +183886,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c9 c10"
     id="to-listbox"
@@ -184091,6 +184100,7 @@ exports[`Storyshots LocationField/Desktop Context Selected Location Custom Clear
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c9 c10"
     id="to-listbox"
@@ -184266,6 +184276,7 @@ exports[`Storyshots LocationField/Desktop Context Slow Geocoder 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9"
     id="from-listbox"
@@ -184442,6 +184453,7 @@ exports[`Storyshots LocationField/Desktop Context With Bad Api Key Handles Bad A
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9"
     id="from-listbox"
@@ -184630,6 +184642,7 @@ exports[`Storyshots LocationField/Desktop Context With Custom Result Colors And
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9"
     id="from-listbox"
@@ -185372,6 +185385,7 @@ exports[`Storyshots LocationField/Desktop Context With Prefilled Search 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9"
     id="from-listbox"
@@ -185579,6 +185593,7 @@ exports[`Storyshots LocationField/Desktop Context With User Settings 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9"
     id="from-listbox"
@@ -185800,6 +185815,7 @@ exports[`Storyshots LocationField/Mobile Context Blank 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9 c10"
     id="from-listbox"
@@ -186063,6 +186079,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder No Results 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9 c10"
     id="from-listbox"
@@ -186331,6 +186348,7 @@ exports[`Storyshots LocationField/Mobile Context Geocoder Unreachable 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9 c10"
     id="from-listbox"
@@ -186593,6 +186611,7 @@ exports[`Storyshots LocationField/Mobile Context Location Unavailable 2`] = `
     otpUi.LocationField.currentLocationUnavailable
   </span>
   <ul
+    aria-hidden={true}
     aria-label="Suggested locations"
     className="c8 c9 c10"
     id="from-listbox"
@@ -186902,6 +186921,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c9 c10 c11"
     id="to-listbox"
@@ -187209,6 +187229,7 @@ exports[`Storyshots LocationField/Mobile Context Selected Location Custom Clear
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c9 c10 c11"
     id="to-listbox"
@@ -187477,6 +187498,7 @@ exports[`Storyshots LocationField/Mobile Context Slow Geocoder 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9 c10"
     id="from-listbox"
@@ -187757,6 +187779,7 @@ exports[`Storyshots LocationField/Mobile Context Styled 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c9 c10 c11"
     id="from-listbox"
@@ -188166,6 +188189,7 @@ exports[`Storyshots LocationField/Mobile Context With Custom Icons 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c7 c8 c9"
     id="to-listbox"
@@ -188883,6 +188907,7 @@ exports[`Storyshots LocationField/Mobile Context With Nearby Stops 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9 c10"
     id="to-listbox"
@@ -189306,6 +189331,7 @@ exports[`Storyshots LocationField/Mobile Context With Session Searches 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9 c10"
     id="to-listbox"
@@ -189677,6 +189703,7 @@ exports[`Storyshots LocationField/Mobile Context With User Settings 2`] = `
     role="status"
   />
   <ul
+    aria-hidden={false}
     aria-label="Suggested locations"
     className="c8 c9 c10"
     id="to-listbox"
diff --git a/packages/location-field/src/index.tsx b/packages/location-field/src/index.tsx
index 98bdc3598..b4630353d 100644
--- a/packages/location-field/src/index.tsx
+++ b/packages/location-field/src/index.tsx
@@ -868,6 +868,7 @@ const LocationField = ({
     currentPosition && currentPosition.fetching
       ? intl.formatMessage({ id: "otpUi.LocationField.fetchingLocation" })
       : defaultPlaceholder;
+  const hasNoEnabledOptions = menuItemCount === 0;
   const isExpanded = isStatic || menuVisible;
 
   const textControl = (
@@ -941,6 +942,8 @@ const LocationField = ({
       {/* The results list is always in the DOM (but hidden in desktop if no results are shown),
           so that assistive technology can associate the list with the button and input controls. */}
       <ItemList
+        // Hide the list from screen readers if no enabled options are shown.
+        aria-hidden={hasNoEnabledOptions}
         aria-label={intl.formatMessage({
           defaultMessage: "Suggested locations",
           description: