Skip to content

Commit

Permalink
refactor(location-field): aria-hide again list if no interactive opti…
Browse files Browse the repository at this point in the history 
…ons.
  • Loading branch information
@binh-dam-ibigroup
binh-dam-ibigroup committed Jul 7, 2023
1 parent 8475b09 commit d3590ae
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 0 deletions.
27 changes: 27 additions & 0 deletions __snapshots__/storybook.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
3 changes: 3 additions & 0 deletions packages/location-field/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand Down Expand Up @@ -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:
Expand Down

0 comments on commit d3590ae

Please sign in to comment.