SideNav
Organismbeta@macaw-ds/ui · since 0.1.0The product's primary navigation in the left column of AppShell. Not for sections within a page; that is TabNav.
Contract
From the manifest's a11y block: what assistive technology sees, and every key the component handles.
- Role
- navigation, containing lists of links
- Focusable
- Yes. Uses the shared focus ring.
- Accessible name
- The landmark takes its name from aria-label; each group list from its visible title (aria-labelledby); each item from its text. Group titles are not headings, so they do not interrupt the page outline.
- Notes
- The active item has aria-current="page" and a tinted background plus accent text, so selection is not shown by colour of one property alone.
- Icons are decorative; the label always names the item.
| Keys | Behaviour |
|---|---|
| Tab | move between items (each is a link) |
| Enter | follow the link |
Motion
- What moves
- Item background 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 |
|---|---|---|---|
| status.accent-fg | status.accent-bg | 9.47:1 AAA | 11.54:1 AAA |
| fg.secondary | surface.layer-1 | 10.00:1 AAA | 13.28:1 AAA |
| fg.primary | surface.layer-1 | 19.67:1 AAA | 18.84:1 AAA |
| fg.muted | surface.layer-1 | 6.53:1 AA | 6.33:1 AA |
| focus.ring | surface.layer-1 | 6.00:1 AA | 6.72:1 AA |