Author: | AcceDe-Web |
---|---|
Views Total: | 332 views |
Official Page: | Go to website |
Last Update: | March 5, 2020 |
License: | ISC |
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();