https://github.com/zachleat/seven-minute-tabs
A minimal no-theme Tabs web component.
https://github.com/zachleat/seven-minute-tabs
Last synced: 12 months ago
JSON representation
A minimal no-theme Tabs web component.
- Host: GitHub
- URL: https://github.com/zachleat/seven-minute-tabs
- Owner: zachleat
- Created: 2020-04-27T14:28:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-12T21:46:06.000Z (over 2 years ago)
- Last Synced: 2025-08-09T00:42:17.690Z (12 months ago)
- Language: JavaScript
- Homepage: https://zachleat.github.io/seven-minute-tabs/demo.html
- Size: 40 KB
- Stars: 89
- Watchers: 3
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Seven Minute Tabs
Tabs web component. Based heavily on the [Tabs with Automatic Activation example](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html) from [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel)
* [Demo](https://zachleat.github.io/seven-minute-tabs/demo.html)
## 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.
* (Option to delete tabs was removed from the original example)
## Changelog
* `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
* [W3C](https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document)