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
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.
- (Option to delete tabs was removed from the original example)