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.
Describe the bug
When you build a JavaScript component, you need to manage focus for both keyboard users and screen reader (AT) users.
Note: this issue is blocking.
How to fix
Add
aria-expandedto 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.focusandtabindex.More information: Element.focus vs aria-activedescendant | Zell Liew