WAI-ARIA Tabs & Accordion Plugin In JavaScript – tablist

Preview:

Description:

A universal standalone JavaScript tablist plugin to create customizable and fully accessible tabs and accordion components using ARIA.

Based on the AcceDe Web accessibility guidelines.

How to use it:

1. Create a tablist containing tabs and the associated tab panels on the page.

<ul role="tablist">
  <li id="tab1" role="tab" aria-controls="tabpanel1">Tab 1</li>
  <li id="tab2" role="tab" aria-controls="tabpanel2">Tab 2</li>
  <li id="tab3" role="tab" aria-controls="tabpanel3" disabled="disabled">Disable Tab</li>
</ul>
<div id="tabpanel1" role="tabpanel" aria-hidden="false">
  Tab Panel 1
</div>
<div id="tabpanel2" role="tabpanel" aria-hidden="false">
  Tab Panel 2
</div>
<div id="tabpanel3" role="tabpanel" aria-hidden="false">
  Tab Panel 3
</div>

2. Determine which panel to open on page load using the data-open="true" attribute as follows:

<ul role="tablist">
  <li id="tab1" role="tab" aria-controls="tabpanel1">Tab 1</li>
  <li id="tab2" role="tab" aria-controls="tabpanel2" data-open="true">Tab 2</li>
  <li id="tab3" role="tab" aria-controls="tabpanel3" disabled="disabled">Disable Tab</li>
</ul>
<div id="tabpanel1" role="tabpanel" aria-hidden="false">
  Tab Panel 1
</div>
<div id="tabpanel2" role="tabpanel" aria-hidden="false">
  Tab Panel 2
</div>
<div id="tabpanel3" role="tabpanel" aria-hidden="false">
  Tab Panel 3
</div>

3. Download and include the JavaScript file tablist.js at the end of the document.

<script src="./dist/tablist.js"></script>

4. Or install & import the library as an ES module.

# NPM
$ npm install @accede-web/tablist --save

import Tablist from @accede-web/tablist

5. Hide the unused tab panels.

[role=tabpanel][aria-hidden=true] {
  display: none;
}

6. Initialize the tablist and done.

var list = document.querySelector( '[role=tablist]' );
window.tablist = new window.Tablist( list );
tablist.mount();

7. Apply your own CSS styles to the tablist. Accordion or Tabs? It is up to you.

8. Do something when a tab is shown & hidden.

tablist.on( 'show', open );
tablist.on( 'hide', close );

function close( tab, tabPanel ) {
  tab.dataset.closeCB = true;
}

function open( tab, tabPanel ) {
  tab.dataset.openCB = true;
}

9. Unbind keyboard and mouse events.

tablist.unmount();