PageShell

Frames · src/components/PageShell/PageShell.tsx

The frame of a public page: a skip link, the banner, the main region, the footer.

The skip link is first in the DOM and it is not optional. Without it a keyboard user tabs through the whole header on every page before reaching the content.

main carries tabIndex={-1} so the skip link can actually move focus there. A link to a container that cannot receive focus scrolls the page and leaves focus behind, which looks like it worked and is not.

lang is written to the document element rather than this div, because the font stack, keep-all line breaking and a screen reader's pronunciation all read it from there.

Import

import { PageShell } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
`lang`	`string`	The page's language. Written to `<html lang>`, which is what the font stack and line breaking read.
`header`	`React.ReactNode`
`footer`	`React.ReactNode`
`mainId`	`string`	Id of the main region. The skip link points at it.
`skipLabel`	`React.ReactNode`
`className`	`string`
`children`	`React.ReactNode`