Seven Minute Tabs

Tabs web component. Based heavily on the Tabs with Automatic Activation example from WAI-ARIA Authoring Practices

Installation

npm install @zachleat/seven-minute-tabs

Features

  • Code converted to be a web component.
  • All styles have been removed and this component operates correctly without CSS. For longevity of the code all styling is left to independent project-specific themes.
  • Progressively enhances from <a> with anchor links pointing to content panels.
  • Adds hidden attribute to panels using JavaScript so that content still shows when JavaScript is not available.
  • Adds tabindex using JavaScript so that content remains accessibile without JavaScript.
  • Arrow key support. Adjusts for vertical aria-orientation values.
  • Home/end key support.
  • Supports nested tab components.
  • Selects the tab matching (or containing) the URL hash on load and on hashchange.
  • (Option to delete tabs was removed from the original example)

Changelog

  • v3.1.0 Select the tab matching the URL hash on load and on hashchange. Add hash attribute to write the active tab to the URL hash (via history.replaceState). Use hash="scrollto" to also scroll to the target on hashchange.
  • v3.0.3 Add autoheight attribute to set a --smt-height CSS Custom Property (maximum height across all tabs) to maintain a consistent component height when switching tabs (e.g. seven-minute-tabs [role="tabpanel"]) { min-height: var(--smt-height); })
  • v3.0.1 Add sync attribute to activate all other matching tabs (in other tab groups) with the same data-tab-persist="group:value".
  • v3.0.0 New tab selection persistence (via persist attribute) logic with data-tab-persist="group:value". Defaults to localStorage. Use persist="session" for sessionStorage.
  • v2.0.2 Add prune attribute option to remove buttons that don’t have a matching panel.
  • v2.0.1 Add persist attribute option to persist selected tab to sessionStorage.
  • v2.0.0 Previous versions of this component required the aria-selected, aria-labelledby, aria-controls, and button/tab id attributes to exist in server rendered markup. If they don’t exist, they are now added automatically.

License