<tab-container> element
A accessible tab container element with keyboard support. Follows the ARIA best practices guide on tabs.
Installation
$ npm install @github/tab-container-element
Usage
import '@github/tab-container-element'
<tab-container>
<div role="tablist">
<button type="button" role="tab" aria-selected="true">Tab one</button>
<button type="button" role="tab" tabindex="-1">Tab two</button>
<button type="button" role="tab" tabindex="-1">Tab three</button>
</div>
<div role="tabpanel">
Panel 1
</div>
<div role="tabpanel" hidden>
Panel 2
</div>
<div role="tabpanel" hidden>
Panel 3
</div>
</tab-container>
Events
tab-container-change(bubbles, cancelable): fired on<tab-container>before a new tab is selected and visibility is updated.event.detail.relatedTargetis the tab panel that will be selected if the event isn't cancelled.tab-container-changed(bubbles): fired on<tab-container>after a new tab is selected and visibility is updated.event.detail.relatedTargetis the newly visible tab panel.
Browser support
Browsers without native custom element support require a polyfill.
- Chrome
- Firefox
- Safari
- Microsoft Edge
Development
npm install
npm test
License
Distributed under the MIT license. See LICENSE for details.