This content originally appeared on Bram.us and was authored by Bramus!
Built by GitHub is <tab-container>, a Custom Element that defines an accessible tab container element with keyboard support and that also follows the ARIA best practices guide on tabs.
Upon importing the package it will register the Custom Element, so you can use it immediately:
<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>Installation possible per NPM:
npm install @github/tab-container-element… or import it directly off of Skypack
import "https://cdn.skypack.dev/@github/tab-container-element";<tab-container> Source →<tab-container> Demo →
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2021-03-14T22:54:13+00:00) <tab-container> Custom Element — An Accessible Tab Container Element with Keyboard Support. Retrieved from https://www.scien.cx/2021/03/14/tab-container-custom-element-an-accessible-tab-container-element-with-keyboard-support/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.