TabNav
Moleculebeta@macaw-ds/ui · since 0.1.0Page-level tabs where each tab is its own URL. Not for switching panels in place; that is Tabs (not in the system yet).
Contract
From the manifest's a11y block: what assistive technology sees, and every key the component handles.
- Role
- navigation, containing a list of links
- Focusable
- Yes. Uses the shared focus ring.
- Accessible name
- The navigation landmark takes its name from aria-label; each tab from its text.
- Notes
- Navigation tabs are links, not role="tab". Arrow keys are not used; that pattern belongs to in-page Tabs.
- The selected tab is marked with aria-current="page", and the underline is not the only signal: the text colour changes too.
- The list never scrolls horizontally, so the 2px focus ring is never clipped; keep to six short labels.
| Keys | Behaviour |
|---|---|
| Tab | move between tabs (each is a link) |
| Enter | follow the link |
Motion
- What moves
- Underline and text colour ease on hover.
- Tokens
- duration.fastease.standard
- Reduced motion
- Every token above collapses to 0 ms (and the spin animation to none) under the OS preference or inside any data-motion="reduced" scope. The component has no motion code of its own.
Contrast
Computed at build time from the token values, against the background each colour is paired with.
| Token | On | Light | Dark |
|---|---|---|---|
| fg.primary | surface.layer-1 | 19.67:1 AAA | 18.84:1 AAA |
| fg.secondary | surface.layer-1 | 10.00:1 AAA | 13.28:1 AAA |
| line.strong | surface.layer-1 | 5.27:1 AA | 3.73:1 AA-large |
| focus.ring | surface.layer-1 | 6.00:1 AA | 6.72:1 AA |