Accessibility issue in "Forms → Autocomplete" (focus management)

[roelvangils]

Describe the bug

When you build a JavaScript component, you need to manage focus for both keyboard users and screen reader (AT) users.

• Visually, users get to see get a list of options, but the current selection is not communicated in code.
• Visually, a suggestion is given by making certain letters bold in the text. This does nothing in code as an AT user is still focused on the input and not on the list.

Note: this issue is blocking.

How to fix

Add aria-expanded to the <input>, instead of a using <div> that doesn't get focused. What doesn't get focused is usually not announced by AT.

We prefer using the technique that inolves using element.focus and tabindex.

More information: Element.focus vs aria-activedescendant | Zell Liew