Sidebar Accordion
Live preview
default
Accessibility
Target: WCAG 2.2 AA (per the recipe's own wcag.target).
Conformance notes
- Landmark: the whole tree is wrapped in
<nav aria-label="…">so screen-reader users can jump straight to section navigation. Do not nest a second<nav>inside it — the recipe's own guidance is explicit on this point. - Current location:
aria-current="page"marks the active link. Only one link in the entire tree should carry it at a time. - Keyboard: every link is a native
<a>, so Tab/Shift+Tab and Enter work with no additional scripting. - Color independence: the active state is communicated by background
fill and the left-border indicator and
aria-current, not by color alone.
If a future pass adds real accordion (collapse) behavior
The current recipe has no expand/collapse mechanism — it's a static list
(see Usage). If that's added later, follow the pattern this app itself
already established (P1.7 fix, app-privategit-design): a collapsed
section must be removed from the tab order (visibility:hidden), not just
visually hidden with max-height:0 — the earlier version of this app's own
sidebar had exactly this bug (collapsed links stayed focusable). The toggle
control needs aria-expanded reflecting current state and
aria-controls pointing at the id of the region it opens (the
ul.ps-sidebar__list for that section).
Keyboard for the disclosure trigger follows the standard WAI-ARIA
disclosure pattern: Tab/Shift+Tab moves focus to the trigger like any
other focusable control; Enter and Space both toggle it (expand if
collapsed, collapse if expanded). Panel content — the links inside
ul.ps-sidebar__list — joins the page's normal Tab order only while
aria-expanded="true"; while collapsed, those links must not be
reachable by Tab at all (this is the visibility:hidden requirement
above, not display:none, so the region can still be targeted by
aria-controls and measured for animation without exposing its
contents to keyboard or assistive-technology traversal).
Important Information
Design System disclosure
This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.