AppShell
Templatebeta@macaw-ds/ui · since 0.1.0The application frame: skip link, sticky TopBar, full-height SideNav column and the main area. One per app, at the root layout.
Contract
From the manifest's a11y block: what assistive technology sees, and every key the component handles.
- Role
- Provides the landmarks: banner (TopBar), complementary (side column, named), main
- Focusable
- Yes. Uses the shared focus ring.
- Accessible name
- The side column is named by sideNavLabel; main and banner are unique per page.
- Notes
- The skip link satisfies WCAG 2.4.1 Bypass Blocks; it is visually hidden until focused.
- main has tabIndex=-1 so the skip link can move focus to it.
- Sticky chrome is offset with size.topbar so focused content is never obscured (WCAG 2.2 SC 2.4.11).
- Below 1024px nothing is sticky and the side column stacks above main, so the page reflows at 320px wide (WCAG 1.4.10). At desktop widths, scroll padding keeps focused elements clear of the sticky chrome (WCAG 2.4.11).
- Screen readers list an iframe's landmarks with the host page's; an embedded app should name its banner (TopBar aria-label) and main (mainLabel) so landmarks stay unique.
| Keys | Behaviour |
|---|---|
| Tab | the first stop is the skip link; Enter moves focus to main |
Motion
This component does not animate or transition, so there is nothing to reduce.
Contrast
Computed at build time from the token values, against the background each colour is paired with.
| Token | On | Light | Dark |
|---|---|---|---|
| focus.ring | surface.layer-1 | 6.00:1 AA | 6.72:1 AA |