👂 Accessibility for screenreaders

I was testing this component with a screenreader and found a couple issues with the display of the autocomplete suggestions. When listening to the screenreader there is no way to know that a dropdown with suggestions has appeared as you type into the input.

Consider these two fairly simple options.

Option 1: provide a visually-hidden <span> that says to arrow down for autocomplete suggestions

<span class="visually-hidden" id="autocomplete-description">Arrow down for autocomplete suggestions</span>
<div aria-describedby="autocomplete-description" id="PlacesAutocomplete__autocomplete-container ... />

or Option 2: add the aria-live="polite" attribute so the screenreader will automatically start reading the suggestions as you type into the input.

<div aria-live="polite" id="PlacesAutocomplete__autocomplete-container ... >

I have tested both options with a screenreader and both work nicely to add a bit more accessibility to the autocomplete. If you like any of these suggestions I’d be happy to make a PR. 😁

Side note: I also noticed that the input has no <label> which is an accessibility requirement. This one isn’t so much of an issue, as the developer using the component can easily add a <label> and the inputId={...} prop, but could also be solved by including a aria-label attribute by default.

[bvellek]

@kenny-hibino Great! I am going to reach out to the a11y community to make sure I choose the best solution, then I will submit a PR.

[sambokai]

@bvellek would you be willing to update the PR? I would review and merge it.