PageHeader

Role and semantics

PageHeader renders a plain div, not a header, because the app frame’s top bar is already the banner landmark and a second one would confuse users. The title is an h1 by default (2 or 3 with headingLevel). The breadcrumbs bring their own nav landmark. While loading, the heading stays in place and is read with the hidden text “Loading page”; the container carries aria-busy. The arrow icon in the back link is decorative.

Keyboard

Key	Behaviour
Tab	Moves through breadcrumb links, the back link and actions in DOM order.
Enter	Opens the focused link or runs the focused button.
Space	Runs the focused button.

Focus

PageHeader takes no focus itself. Links and buttons show their own 2 px color-focus-ring rings. Moving focus to the title after a route change is the router’s job.

Screen reader output

Example	Read as
Title	“Page title, heading, level 1”
While loading	“Loading page, heading, level 1”
Breadcrumbs	“Breadcrumb, navigation” and the links
Back link	“Back to list, link”

Contrast

The title (color-fg-default) and description (color-fg-subtle) meet at least 4.5:1 against the background. Status badges and buttons follow their own contrast rules.

WCAG 2.2

Criterion	How PageHeader meets it	What the product team must do
1.3.1 Info and relationships	A real heading element and ordered DOM.	Choose headingLevel to fit the page structure.
2.4.2 Page titled	Provides a visible title.	Update the document <title> with the same name.
2.4.6 Headings and labels	A short, descriptive title.	Make the title the page name.
1.4.10 Reflow	Actions move below on narrow screens; long titles wrap.	Keep the number of actions small.
4.1.3 Status messages	The loading text is read in the heading.	Remove loading when loading ends.