Frontend system designDay 3 of 14
AccessibilityKeyboardComposite WidgetReact
A server-side browser check verifies your submitted workspace before this day is completed.
Day 3 — Build an accessible composite command picker
The visual list works with a pointer but fails keyboard users. Implement the keyboard contract without converting it to an inaccessible fake control.
Requirements
- Use a listbox with options and expose the selected option through
aria-selected.
- Exactly one option participates in the tab order (roving
tabIndex).
- Arrow Up/Down wraps; Home moves to first; End moves to last.
- Moving with the keyboard updates selection and moves focus to the active option.
- Pointer selection and keyboard selection must share the same controlled state.
Interview review
- When is a native
<select> the better product decision?
- What changes if this picker also has text filtering?
- Why is roving tab index useful for a composite control?