Sidebar

WCAG 2.1 AA — release blocker

Sidebar must satisfy these on every render before it ships.

Semantics

• Sidebar renders as a <nav> landmark.
• The default accessible name is "Sidebar".
• Pass aria-label="Main navigation" when the page has more than one navigation landmark.
• Use aria-current="page" on the active menu button or link.

Keyboard navigation

Focus management

• SidebarTrigger exposes aria-expanded and toggles the desktop or mobile open state.
• Desktop collapse does not move focus.
• Mobile mode uses Sheet; Escape and backdrop click close the overlay.

Labelling

• The trigger's visually hidden text gives it the accessible name "Toggle Sidebar".
• Group labels provide visible section context.
• Active menu items should be indicated with aria-current="page".

Disabled state

• Disabled menu items have aria-disabled="true" and are visually de-emphasized.
• Native disabled buttons are skipped during keyboard navigation.

Mobile sheet semantics

• On small viewports, the sidebar renders as a Sheet overlay.
• The native dialog backdrop dismisses the sidebar on click.
• Sidebar content remains inside the named navigation landmark.

Audit checklist

• Sidebar renders within a <nav> landmark
• aria-label present on the nav element
• Ctrl/⌘+B toggles the sidebar
• SidebarTrigger has aria-expanded
• Active item indicated with aria-current
• 4.5:1 contrast on menu items