Accessibility
WCAG 2.2 AA everywhere, with 7:1 contrast for primary text and numerals.
One focus style
Every interactive component uses the same 2 px outline at a 2 px offset, at 3:1 against every surface layer, drawn with outline so it survives forced-colours mode.
Tab through these: the same 2 px outline at 2 px offset appears on every control, and every target is at least 24 px tall.
Previews render each component's own focus style through the force-focus: variant inside a data-force-focus scope, never with an override, so a broken focus style shows up in the docs and the visual tests.
Skip link and landmarks
AppShell renders a skip link as the first Tab stop. Press Tab on this page to see it; Enter moves focus to main.
Landmarks come from the frame: the TopBar is the banner, the SideNav column is a named complementary region, the page is main. SideNav and TabNav are navigation landmarks named by their aria-label.
Keys per component
From each manifest's a11y.keyboard list; the keyboard e2e suite tabs through every gallery and page.
| Component | Focusable | Keys |
|---|---|---|
| AppShell | Yes |
|
| Badge | No | None |
| Button | Yes |
|
| Card | With interactive |
|
| Icon | No | None |
| Input | Yes |
|
| PageHeader | No | None |
| SideNav | Yes |
|
| TabNav | Yes |
|
| Text | No | None |
| TopBar | No | None |