A11ytab NPM | npm.io

A11yTab

A fully accessible and customizable front-end component for tabs. A11yTab has minimal markup requirements so it can be used however your project demands.

DEMO

Installation

A11yTab is available at the:

Source
NPM	`npm install a11ytab --save`
Yarn	`yarn add a11ytab`
unpkg	`https://unpkg.com/a11ytab`

Usage

A11yTab does require minimal amount of markup to function:

<!--
  A containing element is required. This is used when initializing A11yTab
-->
<div id="a11ytab-list">
  <!--
    - A11yTab requires anchors to be used for accessibility reasons
    - Each link must have a unique id
    - The `href` attribute must point to the id of it's corresponding panel
    - Each link must have the `data-a11ytab-tab` attribute
  -->
  <a id="tab1" href="#panel1" data-a11ytab-tab>...</a>
  <a id="tab2" href="#panel2" data-a11ytab-tab>...</a>
  <a id="tab3" href="#panel3" data-a11ytab-tab>...</a>
</div>
<!--
  Each tab panel must have an unique id
-->
<div id="panel1">...</div>
<div id="panel2">...</div>
<div id="panel3">...</div>

// Import A11yTab if utilizing JS modules
import A11yTab from 'a11ytab';

// Create a new instance of A11yTab
// See all the A11yTab options below
const tabs = new A11yTab({
  selector: document.querySelector('#a11ytab-list'),
});

// Initialize your new tabs
tabs.init();

A11yTab will handle all ARIA roles/attributes, focus management, and events, which transform the original HTML into the following:

<div id="a11ytab-list" role="tablist">
  <a href="#panel1" id="tab1" data-a11ytab-tab role="tab" aria-controls="panel1" aria-selected="true" tabindex="0">...</a>
  <a href="#panel2" id="tab2" data-a11ytab-tab role="tab" aria-controls="panel2" aria-selected="false" tabindex="-1">...</a>
  <a href="#panel3" id="tab3" data-a11ytab-tab role="tab" aria-controls="panel3" aria-selected="false" tabindex="-1">...</a>
</div>
<div id="panel1" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">...</div>
<div id="panel2" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">...</div>
<div id="panel3" role="tabpanel" aria-labelledby="tab3" aria-hidden="true">...</div>

A11yTab API

Options

Property	Type	Default	Description
selector	HTMLElement	`null`	Containing element for tabs
tabFocus	String	`null`	Class to add to tabs when focused
tabBlur	String	`null`	Class to add to tabs when not focused
tabPanelFocus	String	`null`	Class to add to panel when active
tabPanelBlur	String	`null`	Class to add to panel when not active
focusOnLoad	Boolean	`false`	Move users focus to tab component on page load
afterFocusFunction	Function	`null`	Function to run after focusing on tab
beforeFocusFunction	Function	`null`	Function to run before focusing on tab
addEvents	Boolean	`false`	Add custom A11yTab events
eventAfterFocus	String	`a11ytab:afterFocus`	Name of custom event to fire after focusing on tab
eventBeforeBlur	String	`a11ytab:beforeBlur`	Name of custom event to fire before leaving focus on tab
hashNavigation	Boolean	`false`	Append focused tab id to URL
tabToFocus	HTMLElement	`null`	Tab element to initially make active

Methods

Name	Description
init	Initializes instance of A11yTab
destroy	Kills instance of A11yTab
prev	Focus on previously focusable tab
next	Focus on following focusable tab
focus	Focus on given tab