Accessibility
Every component targets WAI-ARIA Authoring Practices. Keyboard support, focus management, and correct ARIA semantics come built in — not as an opt-in.
Commitments
- All interactive components are operable via keyboard alone.
- All form controls expose
aria-invalidandaria-describedbywhen errored. - All overlays manage focus: trap on open, restore on close.
- All animations respect
prefers-reduced-motion. - Automated axe scans run against every component in CI; violations fail the build.
Keyboard support
| Component | Keys |
|---|---|
Dialog | Esc closes, Tab cycles within the dialog |
Tabs | ←/→ or ↑/↓ moves focus, Home/End jumps |
RadioGroup | Arrow keys move focus + selection; only one tab stop per group |
DropdownMenu | Arrow keys navigate items, type-ahead, Enter activates, Esc closes |
Select | Arrow keys + type-ahead; Enter commits, Esc cancels |
Slider | ←/→ steps, Shift+arrow jumps, Home/End bounds |
Focus management
- Dialog traps focus within the modal, locks body scroll, and restores focus to the trigger on close.
- Popover and DropdownMenu return focus to the trigger when dismissed.
- Tooltip is not focusable — it uses
aria-describedbyso screen readers announce it without breaking tab order.
Screen readers
Toastdifferentiatesrole="alert"(errors) fromrole="status"(everything else) and setsaria-livepoliteness levels appropriately.Alertannounces as a region with a semantic title.FormControlwiresid/htmlForand exposesaria-invalid/aria-describedbyfor error and helper text.- Icons inside buttons are hidden from screen readers (
aria-hidden); the button label is what gets announced.
Reduced motion
Every animation honors prefers-reduced-motion. Spinners, skeletons, carousels, and dialog transitions drop to no-op or instant states when the user opts out.
Testing
Sisyphos UI runs an a11y test on every component via Vitest + @testing-library/react + jest-axe. Contributions that introduce accessibility regressions are blocked by CI.