AcceDe Web - tablist
WAI-ARIA tab plugin without dependencies.
Basic HTML structure with roles
Tab 1Tab 2Tab 3Tab 4------------
aria-disabled attribute set to
true on a
tab will disable the
tab and the associated
tabpanel making them unfocusable and unselectable.
If you wish to open one specific tab when the script starts, just add the
data-open attribute with the value of
true on the desired
Tab 1Tab 2Tab 3Tab 4<!-- -->
At least a CSS selector for panels to be hidden when not selected:
The selector can be anything you want, like a class, as the script allows callback when opening or closing a panel; you can add your own class using the callbacks.
The script itself, either from npm:
$ npm install @accede-web/tablist
and later in your code:
var Tablist = ;// or
or downloaded from Github and added to the page (minified and non minified versions available in the
Using the later, the script will be available on
window under the namespace
Now to kick off the script:
// get the tablist elementvar list = document;// create the tablist instancevar tablist = list ;// optionnaly add callbacks to on show and hide a tabtablist;tablist;// start the plugintablist;
The script takes one parameter:
As the script takes only one
tablist element as parameter you have to loop over each
tablist to kick off the script on each of them.
var lists = document;ArrayprototypeforEach;
Tablist constructor returns 4 methods:
mount()- bind all events and apply required attributes
unmount()- unbind keyboard and mouse events
on( event, callback )- bind a callback to either the
hideevent triggered when changing tab. Both
tabPanelHTMLElement are passed on the callback
off( event, callback )- unbind a callback to either the
hideevent triggered when changing tab
To know which
tabPanel is open use
tablist.current. It will return an array containing
// ES6 destructuring arrayconst tab tabPanel = tablistcurrent;tab; // return the `tab`tabPanel; // return the `tabPanel`// ES5var elements = tablistcurrent;elementstab; // return the `tab`elementstabPanel; // return the `tabPanel`
Tab- only the active tab is in the tab order. The user reaches the tabbed panel component by pressing the tab key until the active tab title receives focus.
Left Arrow- with focus on a tab, pressing the left arrow will move focus to the previous tab in the tab list and activate that tab. Pressing the left arrow when the focus is on the first tab in the tab list will move focus and activate the last tab in the list.
Right Arrow- with focus on a tab, pressing the right arrow will move focus to the next tab in the tab list and activate that tab. Pressing the right arrow when the focus is on the last tab in the tab list will move focus to and activate the first tab in the list.
Up arrow- behaves the same as left arrow in order to support vertical tabs.
Down arrow- behaves the same as right arrow in order to support vertical tabs.
Home- with focus on a tab, pressing the Home key will move the focus to the first tab
End- with focus on a tab, pressing the End key will move the focus to the last tab
Control+Up Arrow- with focus anywhere within the tab panel, pressing Control+Up Arrow will move focus to the tab for that panel. This is not standard behavior.
Control+PageUp- When focus is inside of a tab panel, pressing Control+PageUp moves focus to the tab of the previous tab in the tab list and activates that tab. When focus is in the first tab panel in the tab list, pressing Control+PageUp will move focus to the last tab in the tab list and activate that tab.
Control+PageDownWhen focus is inside of a tab panel, pressing Control+PageDown moves focus to the tab of the next tab in the tab list and activates that tab. When focus is in the last tab panel in the tab list, pressing Control+PageUpwill move focus to the first tab in the tab list and activate that tab.
This plugin is tested against the following browsers:
- Internet Explorer 9 and higher
- Microsoft Edge
Install the project dependencies:
$ npm install
Run the automated test cases:
$ npm test