App Header

Accessibility

Import AppHeader, AppHeaderRole from @prepared911/ui/blocks/app-header. AppHeader adds no semantics of its own; each part keeps the model its component documents.

The bar is a banner landmark named by label, or a navigation landmark when landmark is Navigation, so a page with its own banner never has two (Navbar NB-1).
The Axon mark is the first focusable element: a link named by homeLabel. The mark does not mirror in right-to-left.
The ControlIsland is a group named by islandLabel. Calltaker and Dispatcher read the badge's role name, then the queue or channel, then the raise hand toggle (aria-pressed); the Calltaker's availability pill opens a radio menu named by statusMenuLabel, and Ringing is announced once, politely. The Supervisor switcher is a group of toggle buttons, one per role, each named by its roleLabels entry. See the ControlIsland accessibility notes.
The route tabs are a navigation landmark named by navigationLabel, with one link per route and aria-current="page" on the current one. Routes that do not fit move into a menu behind a control labelled overflowLabel.
The end controls are icon-only Buttons, each named by its label prop, in DOM order. A vertical separator (aria-orientation="vertical") sets off the group named by toolsLabel.
Tab order follows the visual order in both directions: mark, island, tabs, end controls.
Forced colors, reduced motion and contrast are the composed parts' own; the block draws nothing.

App Header / API and Development

Drawer host / Usage

App Header

Accessibility

Import AppHeader, AppHeaderRole from @prepared911/ui/blocks/app-header. AppHeader adds no semantics of its own; each part keeps the model its component documents.

The bar is a banner landmark named by label, or a navigation landmark when landmark is Navigation, so a page with its own banner never has two (Navbar NB-1).
The Axon mark is the first focusable element: a link named by homeLabel. The mark does not mirror in right-to-left.
The ControlIsland is a group named by islandLabel. Calltaker and Dispatcher read the badge's role name, then the queue or channel, then the raise hand toggle (aria-pressed); the Calltaker's availability pill opens a radio menu named by statusMenuLabel, and Ringing is announced once, politely. The Supervisor switcher is a group of toggle buttons, one per role, each named by its roleLabels entry. See the ControlIsland accessibility notes.
The route tabs are a navigation landmark named by navigationLabel, with one link per route and aria-current="page" on the current one. Routes that do not fit move into a menu behind a control labelled overflowLabel.
The end controls are icon-only Buttons, each named by its label prop, in DOM order. A vertical separator (aria-orientation="vertical") sets off the group named by toolsLabel.
Tab order follows the visual order in both directions: mark, island, tabs, end controls.
Forced colors, reduced motion and contrast are the composed parts' own; the block draws nothing.

App Header / API and Development

Drawer host / Usage