Tabs web component. Based heavily on the Tabs with Automatic Activation example from WAI-ARIA Authoring Practices
npm install @zachleat/seven-minute-tabs
hidden
attribute to panels using JavaScript so that content still shows when JavaScript is not available.tabindex
using JavaScript so that content remains accessibile without JavaScript.aria-orientation
values.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.