-
Notifications
You must be signed in to change notification settings - Fork 0
Accessibility
ABCrimson edited this page Mar 7, 2026
·
1 revision
Full WAI-ARIA combobox pattern implementation with comprehensive screen reader, high contrast, and motion sensitivity support.
| Component | Role | Key Attributes |
|---|---|---|
Command |
application |
aria-label |
Command.Input |
combobox |
aria-autocomplete="list", aria-expanded, aria-controls, aria-activedescendant
|
Command.List |
listbox |
id (matches aria-controls) |
Command.Item |
option |
aria-selected, data-active, data-disabled
|
Command.Group |
group |
aria-labelledby → heading ID |
Command.Empty |
status |
Announced when no results match |
Command.Loading |
status |
aria-busy="true" during loading |
Command.Separator |
separator |
— |
An aria-live="polite" region announces result counts:
"3 results available" → "1 result available" → "No results found"
| Key | Action |
|---|---|
↑ / ↓
|
Navigate items |
Enter |
Select active item |
Escape |
Close dialog / clear search |
Home / End
|
Jump to first/last item |
Backspace (empty input) |
Go back to previous page |
@media (forced-colors: active) { [data-command-item][data-active] { background-color: Highlight; color: HighlightText; forced-color-adjust: none; } }
@media (prefers-contrast: more) { [data-command-item][data-active] { outline: 3px solid currentColor; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
All dialog and overlay animations are completely disabled when the user prefers reduced motion.
- Focus is trapped within the dialog when open (via Radix UI)
-
aria-activedescendanttracks the visually active item - Focus returns to the trigger element when the dialog closes
-
scroll-margin-block: 8pxensures the active item is visible