PageShell

WCAG 2.1 AA — release blocker

Web (React DOM)

• The shell renders nested <div> elements — landmark roles come from the children you pass in:
  • <TopBar> renders <header> (Banner landmark).
  • <MainSidebar> renders <aside aria-label="Main Sidebar"> on desktop and <nav aria-label="Main Sidebar"> for the mobile bottom menu.
  • Your content region should ideally be wrapped in <main> — the shell doesn't do this for you so apps can choose where <main> sits.

<PageShell topBar={…} sidebar={…} titleBar={…}>
  <main id="main">
    {/* page content */}
  </main>
</PageShell>

• Provide a "Skip to main content" link at the top of every page so keyboard users can jump past the TopBar + Main Sidebar:

<a href="#main" className="sr-only focus:not-sr-only">Skip to main content</a>
<PageShell>…</PageShell>

Scroll containment

• The shell uses overflow-hidden on the outer wrapper and overflow-y-auto on the content region. No global scroll — the page scrolls inside the content region.
• Modal / drawer overlays must use fixed positioning to escape the shell's scroll container. Main Sidebar's mobile menu is intentionally anchored inside the shell body.

Reduced motion

The shell has no transitions; nothing to honour beyond the system default.

Audit checklist

• "Skip to main content" link present and reaches focus on Tab.
• Page content wrapped in <main id="main">.
• All four slot children carry their own a11y contracts.
• No double-scroll (only the content region scrolls).