The patterns each component follows, the keyboard support, and how we test it.
Every component follows a pattern from the WAI-ARIA Authoring Practices Guide, so it behaves the way keyboard and screen reader users expect.
Patterns we follow
| Component | Pattern |
|---|---|
| Accordion | Accordion |
| Copy Button | A button, plus a polite live region that announces the copy |
| Dialog | Dialog (Modal) |
| Listbox | Listbox |
| Menu | Menu Button |
| Radio Group | Radio Group |
| Switch | Switch |
| Tabs | Tabs |
| Tooltip | Tooltip |
Keyboard support
| Keys | What they do |
|---|---|
| Tab | Moves into and out of each component. Tabs, radio groups and listboxes take one tab stop and use the arrow keys inside. |
| Arrow keys | Move between tabs, radios, menu items, listbox options and accordion headers. |
| Home and End | Jump to the first or last item in tabs, menus, listboxes and accordions. |
| Letters | Typeahead in menus and listboxes: type the start of an item's name to jump to it. |
| Enter and Space | Activate the focused button, tab, menu item or switch. Space checks a radio. |
| Escape | Closes dialogs, menus and tooltips. Focus goes back to the element that opened them. |
Each component page has the full keyboard table for that component.
Focus
- Dialogs use the native
<dialog>element withshowModal(), so the rest of the page is inert while one is open. - Menus and tooltips open in the browser's top layer, so no
overfloworz-indexcan hide them. - The theme draws a visible focus ring on every interactive part, in both modes.
Contrast and motion
The optional theme keeps text at 4.5:1 contrast or more and control outlines at 3:1 or more, in light and dark. Its transitions stop when the system asks for reduced motion.
How we test
Every component has automated keyboard tests written with Testing Library and an automated check with axe. We also check each one by hand in a real browser, because some behaviour, such as the top layer and focus return, only shows up there.