Accessibility
Overview
Accessibility is not an afterthought in @shavin/ui — it is an enforced structural contract. Every interactive primitive guarantees 100% keyboard accessibility, screen reader role pairing, and viewport collision safety out of the box.
Automated Testing: Every release undergoes automated accessibility audits using
axe-core via npm run test:a11y to ensure zero WCAG 2.1 Level AA violations.Primitive ARIA & Keyboard Contracts
| Component | Underlying Primitive | Accessibility Guarantees |
|---|---|---|
| Dialog / ProfileModal | @radix-ui/react-dialog | Focus trap, Escape to dismiss, background scroll lock, initial focus management. |
| AlertDialog | @radix-ui/react-alert-dialog | Defaults focus to Cancel button, prevents accidental outside-click dismissal for destructive confirmations. |
| Select / Combobox | @radix-ui/react-select | Roving focus, type-ahead keyboard navigation, viewport collision positioning via Viewport. |
| Menu / ContextMenu | @radix-ui/react-dropdown-menu | Arrow key navigation, sub-menu expansion, auto-focus return on close. |
| Checkbox / Switch / Radio | @radix-ui primitives | Native form input syncing, aria-checked/aria-selected state attributes, Space/Enter key toggling. |
Focus Ring & High Contrast Tokens
All interactive elements in @shavin/ui render a visible, accessible focus ring via standard focus-visible styles in global.css. Focus states never rely solely on color changes, ensuring visibility for users with color vision deficiencies.