App Shell

Accessibility

Import AppShell from @prepared911/ui/blocks/app-shell.

Landmarks. The Navbar's header, placed directly in the shell's root and outside main and any sectioning element, is the page's one banner landmark. There is exactly one main. Navigation landmarks are the Navbar's route nav (named by NavbarTabs label) and the Sidebar's nav (named by aria-label); the shell adds none and no region landmark of its own. The banner slot holds a Banner, which is a notice (role="status" or "alert") and not a landmark. A PageHeader inside main is a header in sectioning content, so it is not a second banner.
Skip link. The first control in the tab order, named by skipLinkLabel. It is clipped to nothing until a control in its frame has focus, then shown over the bar with an elevation (an outline under forced colors). Activating it focuses main and does not change the address, so a client router is not involved.
Focus target. main has tabindex="-1" so script can focus it. When it scrolls and nothing inside it can take focus it gets tabindex="0", so a keyboard can reach it and scroll it with the arrow, Page and Space keys (WCAG 2.1.1). Focused, it draws the focus ring inset, so the scroll container does not clip it.
Route changes. Focus stays where it is by default. routeFocus="main" moves it to main after a change of routeKey. routeAnnouncement is read politely from a live region when it changes.
Reading order. Skip link, Navbar, banner, Sidebar, main, then the Dock's space. It matches the visual order in both directions.
Reflow and zoom. The shell is built for a viewport at least 1080px wide. Below that the root clips and the sidebar and main do not reflow. The header still adapts: a Toolbar with overflowLabel in NavbarEnd keeps every action in the bar or its overflow menu at 360px and at 400% zoom (320 CSS px), with the same keyboard model as Toolbar accessibility.
Motion. The shell moves nothing. Reduced motion changes nothing in it; the Sidebar's width ease follows the preference in Sidebar.
Forced colors. The skip link draws an outline in the system text color. The Navbar, Sidebar and Banner keep their own edges.

App Shell / API and Development

Page Header / Usage

App Shell

Accessibility

Import AppShell from @prepared911/ui/blocks/app-shell.

Landmarks. The Navbar's header, placed directly in the shell's root and outside main and any sectioning element, is the page's one banner landmark. There is exactly one main. Navigation landmarks are the Navbar's route nav (named by NavbarTabs label) and the Sidebar's nav (named by aria-label); the shell adds none and no region landmark of its own. The banner slot holds a Banner, which is a notice (role="status" or "alert") and not a landmark. A PageHeader inside main is a header in sectioning content, so it is not a second banner.
Skip link. The first control in the tab order, named by skipLinkLabel. It is clipped to nothing until a control in its frame has focus, then shown over the bar with an elevation (an outline under forced colors). Activating it focuses main and does not change the address, so a client router is not involved.
Focus target. main has tabindex="-1" so script can focus it. When it scrolls and nothing inside it can take focus it gets tabindex="0", so a keyboard can reach it and scroll it with the arrow, Page and Space keys (WCAG 2.1.1). Focused, it draws the focus ring inset, so the scroll container does not clip it.
Route changes. Focus stays where it is by default. routeFocus="main" moves it to main after a change of routeKey. routeAnnouncement is read politely from a live region when it changes.
Reading order. Skip link, Navbar, banner, Sidebar, main, then the Dock's space. It matches the visual order in both directions.
Reflow and zoom. The shell is built for a viewport at least 1080px wide. Below that the root clips and the sidebar and main do not reflow. The header still adapts: a Toolbar with overflowLabel in NavbarEnd keeps every action in the bar or its overflow menu at 360px and at 400% zoom (320 CSS px), with the same keyboard model as Toolbar accessibility.
Motion. The shell moves nothing. Reduced motion changes nothing in it; the Sidebar's width ease follows the preference in Sidebar.
Forced colors. The skip link draws an outline in the system text color. The Navbar, Sidebar and Banner keep their own edges.

App Shell / API and Development

Page Header / Usage