/api /r tokens.json GitHub

Tab Bar (Disclosure)

Tabs implemented as <details> elements, progressively enhanced by JS to behave as a tabset (opening one closes others; deep-link via #fragment). Zero-JS baseline: all panels accessible via expand/collapse. Distinct from ps-tab (URL-reflected routing pattern) — use this when content is in-page and JS may be unavailable.

Live previewrendered from recipe via {tokens} resolution
{{tabLabel}}
{{content}}
ARIA notes

With JS: synthesise role=tablist / role=tab / role=tabpanel / aria-selected / aria-controls once JS is confirmed available. Without JS: the native <details>/<summary> interaction is accessible to all screen readers with no additional ARIA required. Do not add tablist roles before JS runs — mismatched roles on a non-interactive element break screen readers.

The usage tab for this component is not yet authored. Creative Design Contributors — pick this up.

Recipe is at /api/components/tab-bar-disclosure.json.