Os Labs / Frontend
FrontendWorking~5h
Build an accessible autocomplete from scratch
A single-select combobox (type-ahead autocomplete) built with plain HTML, CSS, and JS/React — no Radix, no downshift, no react-aria. You wire the ARIA 1.2 combobox pattern by hand: roles, states, `aria-activedescendant`, and live-region announcements, then drive the whole thing with a keyboard and a screen reader instead of a mouse. You finish with a widget that a blind user can actually operate, not one that merely looks accessible in a screenshot.
O que isso prova
A frase que você pode defender em uma entrevista.
Linha do currículo
Built a WCAG 2.2 AA accessible combobox from scratch (ARIA 1.2 pattern, roving `aria-activedescendant`, full keyboard nav, live-region announcements), verified with an automated axe-core suite plus a manual NVDA/VoiceOver pass.
- Understands ARIA beyond copy-pasted attributes — knows why aria-activedescendant beats moving DOM focus for this pattern
- Can build for keyboard-only and screen-reader-only users, not just sighted mouse users
- Ships automated a11y checks instead of eyeballing it once and calling it done
O briefing
O que você constrói, passo a passo.
- 01Render a text input plus a listbox popup of filtered options; no third-party combobox/autocomplete library.
- 02Wire the ARIA 1.2 combobox pattern: `role="combobox"` on the input, `aria-expanded`, `aria-controls`, `aria-autocomplete="list"`, `role="listbox"` on the popup, `role="option"` on each item.
- 03Move the active option with `aria-activedescendant` instead of moving real DOM focus off the input.
- 04Support full keyboard operation: ArrowDown/ArrowUp cycle options, Enter selects, Escape closes and restores the prior value, Home/End jump to first/last option.
- 05Add a visually-hidden `aria-live="polite"` region that announces result count on every filter (e.g. "4 results available") and the selected value on commit.
- 06Ensure focus never leaves the input while the popup is open, and closing the popup returns the DOM to its prior state (no orphaned focus, no trapped focus).
A prova
Está pronto quando estes passarem.
An automated axe-core scan of the open combobox reports zero violations
automated test
A keyboard-only Playwright test can open the popup, filter, arrow through options, and commit a selection with Enter — using no mouse events
automated test
Escape while the popup is open closes it and restores the input's pre-search value without submitting a selection
automated test
Manual screen-reader pass (NVDA or VoiceOver) confirms the option count and selected value are announced without extra unlabeled noise
reviewed
Stack
ReactTypeScriptaxe-corePlaywrighta screen reader (NVDA or VoiceOver)
Método Sage
frame → map → decide → prove
Você mantém
A dependency-free accessible combobox component + a passing axe-core/Playwright a11y suite + a manual screen-reader pass writeup