Sidebar from @prepared911/ui-core is the primary application navigation landmark. The component handles landmark semantics and expand/collapse behavior; your job is to provide a descriptive landmark label, accessible names on items, and predictable keyboard flow between sidebar, main, and any sub-navigation.
What the component handles
- Landmark role. Renders a
navigation landmark; screen-reader rotor surfaces it as a named region.
- Expand / collapse. The collapse control is keyboard operable and reflects state via
aria-expanded.
- Selected item state.
SidebarItem exposes the active destination so screen readers announce "current page" appropriately.
ariaLabel on the sidebar. Match product language ("Main", "App", "Dispatch"). Without it, screen-reader rotor announces an unnamed navigation.- Accessible names on items. Visible text is best. When items collapse to icon-only, each must retain an accessible name via
aria-label or a visible tooltip that is readable by assistive tech.
- Group labels. If the sidebar is organized into sections, label each group so navigation feels structured, not flat.
- Focus restoration. When a sidebar item navigates to a route, ensure focus lands on the new page's main heading or a sensible target—don't leave focus inside the sidebar indefinitely.
- Tab moves into the sidebar and then through items in document order.
- Enter activates the item (navigates or toggles a group).
- Escape on the collapse control dismisses or collapses depending on the implementation; verify in context.
- Skip link. Provide a skip-to-main-content link on the page so keyboard users don't have to tab through every sidebar item.
- Sidebar root is a
<nav> landmark with aria-label.
- Grouping headers use native heading levels or
role="group" with aria-label—choose per information architecture.
- Active items use
aria-current="page" for the current route.
When collapsed to icon-only:
- Each icon has an
aria-label or a tooltip exposed via aria-describedby.
- The collapse toggle itself is named ("Collapse sidebar" / "Expand sidebar") and its state exposed via
aria-expanded.
- Keyboard users can still activate items without reaching the mouse.
- Active state on nested routes. If one sidebar item represents multiple URL patterns, ensure
aria-current reflects reality; a stale active state misleads assistive tech.
- Mobile behavior. If the sidebar morphs into a drawer on narrow viewports, that drawer requires its own focus management (see
Drawer).
- Overflow menus. Items hidden behind an overflow menu must remain keyboard reachable from the overflow trigger, not just discoverable via mouse hover.
