[a11y] MDN search autocomplete broken for screen reader users

[patrickhlauke]

What information was incorrect, unhelpful, or incomplete?

This is a late follow-up to mdn/yari#4407

The current implementation for autocomplete search on MDN is borked when using a screen reader.

• no announcement is made when suggestions appear
• when using cursor keys to move between search suggestions, the search term in the combobox (rather than the value of the suggestion) is announced

Demonstration video: using Chrome + NVDA. after entering "test", results appear but NVDA remains silent. going through the results, NVDA just announces "test" for each option rather than the visible text of the result/option.

mdn-search-autocomplete-broken.mp4

What did you expect to see?

When search suggestions/results are shown, an announcement should be made that suggestions/results are available/shown.

When navigating with the cursor key up/down to go through the options, announce the actual text or that option, not the current value of the combobox input.

As an example of a good implementation, see how the github autocomplete here does it. Check the underlying markup, adopt the same approach.

Demonstration video: Chrome + NVDA. github's combobox annoucnes that results are available/shown. using cursor keys to go through the options, the actual option text is announced

github-search-working.mp4

Do you have any supporting links, references, or citations?

For a basic implementation, see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/

Note that the APG pattern doesn't do the "announce the number of results", so the github version is superior here...but it gives you a first bit of direction.

Do you have anything more you want to share?

No response