Components / Accessibility
Accessibility
Keyboard, focus, names, and reduced motion for v1.0.
Keyboard
- Actions are buttons. Navigation that leaves the page is a link.
- Tabs and segmented controls use arrow keys.
- The number-key router and the side nav ignore inputs, textareas, and selects.
- The command menu opens with Ctrl K or Command K, then arrow keys, Enter, and Escape.
Focus
Visible focus is a 2 px accent outline. The native dialog traps focus while it is open. The timed gate keeps focus in the dialog until Escape or Close.
Names
- Dots and bars that repeat a written value are aria-hidden.
- Charts expose a name on the svg and a Values disclosure with the same numbers.
- The companion slot shows its pending label as text.
- Locked destinations say Locked.
Colour
Status uses a word plus a colour. Heat cells print the signed number on the tint. The delta under a KPI is a sentence.
Motion
Nothing animates at rest. prefers-reduced-motion disables animation and transition. The preview control Reduce motion does the same inside the frame. Hover details wait 220 ms for a pointer and appear at once for keyboard focus.
Timed gate
The pattern ships with data-enabled set to false. The page underneath stays usable. Arming the timer is an explicit button in that preview, and the wait is counted in text.
Targets
Buttons are at least 28 px tall. Body text is 15 px. Nothing in the scale is below 11 px.