المختبرات / 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.
ما الذي يثبته
السطر الذي يمكنك الدفاع عنه في مقابلة.
سطر السيرة الذاتية
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
الموجز
ما الذي تبنيه، خطوة بخطوة.
- 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).
الدليل
يُعتبر مكتملاً عندما تنجح هذه.
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
التقنيات
ReactTypeScriptaxe-corePlaywrighta screen reader (NVDA or VoiceOver)
طريقة Sage
frame → map → decide → prove
ما تحتفظ به
A dependency-free accessible combobox component + a passing axe-core/Playwright a11y suite + a manual screen-reader pass writeup