Combobox (autocomplete suggestions)

BEFOREFake suggestions (focus jumps to list items)

Problems: no roles, no active option semantics, and the Arrow keys can move focus away from the input (confusing for screen readers).

City

Try: type san, then press ↓. Focus jumps into the list, so you’re no longer editing the field.

AFTERAccessible combobox (focus stays in input)

Pattern: keep focus in the input; use role="combobox" + popup role="listbox", and track the highlighted option with aria-activedescendant.

City

Keyboard: type to filter · ↓/↑ moves · Enter selects · Esc closes.

Quick checklist

Keep focus in the text input. Use aria-activedescendant for the highlighted option.
Use roles: combobox + listbox + option.
Use aria-controls + aria-expanded to express popup state.
Announce meaningful changes (e.g., “5 suggestions”, “Selected: X”), not every keypress.
Click should work too; prevent mousedown from stealing focus.