Accessibility

Accessibility

Full WAI-ARIA combobox pattern implementation with comprehensive screen reader, high contrast, and motion sensitivity support.

ARIA Roles

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	—

Screen Reader Announcements

An aria-live="polite" region announces result counts:

"3 results available" → "1 result available" → "No results found"

Keyboard Navigation

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

High Contrast Support

forced-colors: active (Windows High Contrast)

@media (forced-colors: active) {
  [data-command-item][data-active] {
    background-color: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}

prefers-contrast: more

@media (prefers-contrast: more) {
  [data-command-item][data-active] {
    outline: 3px solid currentColor;
  }
}

Reduced Motion

@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 Management

• Focus is trapped within the dialog when open (via Radix UI)
• aria-activedescendant tracks the visually active item
• Focus returns to the trigger element when the dialog closes
• scroll-margin-block: 8px ensures the active item is visible