Combobox

A combobox is a text input joined to a pop-up list of options: you type to filter the list, or open it to browse, and pick a value with the mouse or the keyboard. You'll build the editable ARIA combobox pattern in React over a fixed list of eight programming languages — the interesting part is the keyboard: an "active" option that moves independently of what's typed.

Task

The starter App.tsx renders the input and its ▾ toggle in the resting state (empty, listbox closed). Make it interactive:

1. Filter as you type. Typing opens the listbox and narrows it to options whose text contains the query, case-insensitively.
2. Toggle the full list. Clicking the ▾ button opens or closes the listbox showing every option, regardless of the text.
3. Move an active option. ArrowDown and ArrowUp move a highlighted "active" option through the filtered list and wrap at the ends. This highlight is separate from the input text — nothing is filled until you commit.
4. Commit or dismiss. Enter fills the input with the active option and closes; clicking an option does the same; Escape closes without changing the input.
5. Wire ARIA. The input is role="combobox" with aria-expanded and aria-activedescendant; the list is role="listbox"; each option is role="option" with aria-selected.

Examples

• Type ru — the listbox opens showing Rust and Ruby. ArrowDown highlights Rust; ArrowDown again highlights Ruby; once more wraps back to Rust.
• With Rust highlighted, Enter fills the input with Rust and closes the list.
• Click the ▾ toggle on the empty box — all eight options appear. Escape closes them and leaves the input untouched.

Notes

• Active is not selected. The highlighted option (aria-activedescendant) tracks keyboard focus; nothing is selected until Enter or a click. Keep them as separate ideas.
• Wrapping is modular. Moving past the last option lands on the first, and up from the first lands on the last — the % operator does this in one line.
• The toggle shows everything. Typing narrows the list; the ▾ button re-opens the full list so a user can browse after they've already picked.
• Styling (dark input, listbox, active row) is in styles.css; focus on the state and the key handling.