a11y/combobox-on-input

Why

The wrapper shape comes from older ARIA versions. Current screen readers expect the focused input to be the combobox; with the role on a div they announce a plain edit field and never say that suggestions exist or which one is highlighted.

Fix

Put role="combobox", aria-expanded, aria-controls (the listbox id) and aria-autocomplete on the <input>, keep its <label>, and drop the wrapper's role and aria-owns. A select-only combobox (no typing) puts the role on a focusable div or button and has no input.

Examples

<!-- bad -->
<div role="combobox" aria-expanded="false"><input type="text"></div>
<!-- good -->
<input type="text" role="combobox" aria-expanded="false" aria-controls="list" aria-autocomplete="list">

Sources

• WAI-ARIA Authoring Practices, Combobox pattern
• W3C, WAI-ARIA 1.2, combobox role

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/combobox-on-input