Foundations
Accessibility
Accessibility is part of correctness. This page states the contract and separates what has been tested from what has not.
The contract
- Semantic HTML first. A button for an action, an anchor for navigation.
- Every interactive control is reachable and operable by keyboard.
- Focus is visible with at least 3:1 contrast, using focus-visible.
- Icon-only controls have an accessible name; decorative icons are hidden.
- State is never communicated by color alone.
- Readable text meets WCAG AA contrast and is never faded with opacity.
- Motion respects prefers-reduced-motion and never delays an essential action.
- Status messages use role status or alert; errors are tied to their control.
What is verified
The component package runs behavior tests for buttons, dialogs, tabs, accordions, checkboxes, switches, dropdown menus, tooltips, and form fields. Axe runs on representative renders for structural checks. The docs site is checked for landmarks, a skip link, one H1 per page, and keyboard-operable navigation.
The automated suite cannot evaluate color contrast in jsdom. Contrast was checked against the measured token pairs in the design system: ink on canvas 19.8:1, mute on canvas 4.7:1, link 700 on white 7.0:1, and primary-400 on dark surfaces 8.0:1 or better.
What is not verified
- Manual screen-reader sessions across NVDA, JAWS, and VoiceOver.
- Every browser and assistive-technology combination.
- Automated visual regression.
Do not describe Aback UI as WCAG conformant until those reviews are complete. Report a gap with the component, the environment, and the steps to reproduce.
Keyboard behavior by component
The table lists the documented keys. Native controls keep native behavior, and complex widgets follow the WAI-ARIA Authoring Practices through Radix primitives.
| Component | Key | Action |
|---|---|---|
| Accordion | Enter / Space | Toggle the focused panel. |
| Accordion | ArrowDown / ArrowUp | Move focus to the next or previous header. |
| Accordion | Home / End | Move focus to the first or last header. |
| Alert Dialog | Escape | Close without running the action. |
| Alert Dialog | Tab / Shift+Tab | Move between Cancel and the action. |
| Alert Dialog | Enter / Space | Activate the focused action. |
| Calendar | Arrow keys | Move focus by one day or one week. |
| Calendar | Home / End | Move to the first or last day of the focused week. |
| Calendar | Page Up / Page Down | Move to the previous or next month. |
| Calendar | Shift + Page Up / Page Down | Move to the previous or next year. |
| Calendar | Enter / Space | Select the focused day. |
| Checkbox | Space | Toggle the checkbox. |
| Checkbox | Tab | Move focus into or out of the control. |
| Code Block | Tab | Focus the code region, then the copy button. |
| Code Block | Arrow keys | Scroll the focused code region. |
| Combobox | Enter / Space | Open the list from the trigger. |
| Combobox | Arrow Down / Arrow Up | Move through the filtered options. |
| Combobox | Home / End | Jump to the first or last option. |
| Combobox | Enter | Select the active option and close the list. |
| Combobox | Escape | Close the list and return focus to the trigger. |
| Command | ArrowUp / ArrowDown | Move the active option. |
| Command | Enter | Run the active option. |
| Command | Escape | Close the dialog and return focus to the trigger. |
| Copy Button | Enter / Space | Copy the value. |
| Date Picker | Enter / Space | Open the calendar from the field. |
| Date Picker | Arrow keys / Home / End | Move through days in the open calendar. |
| Date Picker | Page Up / Page Down | Change month; add Shift to change year. |
| Date Picker | Enter / Space | Choose the focused day. |
| Date Picker | Escape | Close without changing the value and return focus to the field. |
| Dialog | Escape | Close the dialog and return focus to the trigger. |
| Dialog | Tab / Shift+Tab | Cycle focus inside the dialog. |
| Dialog | Enter | Activate the focused control. |
| Dropdown Menu | Enter / Space / ArrowDown | Open the menu and focus the first item. |
| Dropdown Menu | ArrowUp / ArrowDown | Move focus between items. |
| Dropdown Menu | Home / End | Jump to the first or last item. |
| Dropdown Menu | Escape | Close the menu and return focus to the trigger. |
| Dropzone | Tab | Focus the file input. |
| Dropzone | Enter / Space | Open the system file picker. |
| Popover | Enter / Space | Open the popover from the trigger. |
| Popover | Tab / Shift+Tab | Move through the controls inside the panel. |
| Popover | Escape | Close and return focus to the trigger. |
| Radio Group | Tab | Enter or leave the group. |
| Radio Group | ArrowUp / ArrowDown | Move and select in a vertical group. |
| Radio Group | ArrowLeft / ArrowRight | Move and select in a horizontal group. |
| Radio Group | Space | Select the focused option without moving. |
| Rating | Tab | Enter or leave the rating. |
| Rating | ArrowRight / ArrowUp | Select one more star. |
| Rating | ArrowLeft / ArrowDown | Select one fewer star. |
| Rating | Space | Select the focused star, or clear it when clearable. |
| Select | Space / Enter | Open the native picker. |
| Select | ArrowUp / ArrowDown | Change the selected option. |
| Select | Escape | Close the picker without changing the value. |
| Sheet | Escape | Close and return focus to the trigger. |
| Sheet | Tab / Shift+Tab | Cycle focus inside the panel. |
| Sheet | Enter / Space | Activate the focused control. |
| Skip Link | Tab | Reveal the link from the top of the page. |
| Skip Link | Enter | Move focus to the main content. |
| Slider | ArrowLeft / ArrowRight | Change the value by one step. |
| Slider | Home / End | Jump to the minimum or maximum. |
| Slider | PageUp / PageDown | Move in a larger increment. |
| Switch | Enter / Space | Toggle the switch. |
| Switch | Tab | Move focus into or out of the control. |
| Tabs | ArrowLeft / ArrowRight | Move between horizontal tabs. |
| Tabs | ArrowUp / ArrowDown | Move between vertical tabs. |
| Tabs | Home / End | Move to the first or last tab. |
| Theme Toggle | Enter / Space | Switch between light and dark. |
| Toast | Tab | Move focus to the action and close buttons while the toast is visible. |
| Toast | Enter / Space | Run the focused action or dismiss the toast. |
| Toast | Alt + T | Move focus into the toast region (sonner's default hotkey). |
| Toast | Escape | Dismiss the focused toast. |
| Toggle Group | Tab | Enter or leave the group. |
| Toggle Group | ArrowLeft / ArrowRight | Move focus between items. |
| Toggle Group | Space / Enter | Toggle the focused item. |
| Tooltip | Tab | Focus the trigger and reveal the tooltip. |
| Tooltip | Escape | Dismiss the tooltip while focus stays on the trigger. |
Automated behavior testsAxe structural checksManual screen reader pendingThe full policy lives in the repository at docs/accessibility.md.