Tabs web component. Based heavily on the Tabs with Automatic Activation example from WAI-ARIA Authoring Practices
npm install @zachleat/seven-minute-tabs
- 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
hiddenattribute to panels using JavaScript so that content still shows when JavaScript is not available. - Adds
tabindexusing JavaScript so that content remains accessibile without JavaScript. - Arrow key support. Adjusts for vertical
aria-orientationvalues. - Home/end key support.
- (Option to delete tabs was removed from the original example)