An accessible combobox: keyboard, aria-activedescendant and a live region
Focus never leaves the input. ArrowDown twice highlights the second match, aria-activedescendant names it, a screen reader hears "3 suggestions", and Enter chooses. Try it yourself with the keyboard after the demo.
An autocomplete suggests results while the user types; the design is about sending few requests (debounce), answering repeats from an LRU cache, never showing stale answers (race conditions), a correct ARIA combobox for keyboard and screen readers, and choosing server ranking or client filtering.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make the combobox close and clear on a second Escape: the first Escape closes the list, the second clears the text.
Add an AbortController to the first example's effect so stale requests are cancelled, not just ignored.
Explain it without notes
Walk me through the design of a search autocomplete.
How do you prevent an old response from overwriting a newer one?
How would you implement an LRU cache for suggestions, and why LRU?
Which ARIA attributes does a combobox need, and how does keyboard navigation work?
When would you filter on the client instead of asking the server?
Preview
Console
Nothing logged yet.Expected console output
options: Banana, Mango, Orange
highlighted: Mango, aria-selected=true
announced: 3 suggestions
selected: Mango
input: Mango, aria-expanded=false