Accessible Tabs Component – tab-container

Preview:

Description:

tab-container is an easy, accessible tabs compont written in Vanilla JavaScript.

How to use it:

Install & download.

# NPM
$ npm install @github/tab-container-element --save

Include the tab-container from a CDN.

<script src="https://unpkg.com/@github/tab-container-element@latest/dist/index.umd.js"></script>

The example markup.

<tab-container>
  <div role="tablist">
    <button type="button" role="tab" aria-selected="true">Tab 1</button>
    <button type="button" role="tab">Tab 2</button>
    <button type="button" role="tab">Tab 3</button>
  </div>
  <div role="tabpanel">
    Panel 1
  </div>
  <div role="tabpanel" hidden>
    Panel 2
  </div>
  <div role="tabpanel" hidden>
    Panel 3
  </div>
</tab-container>