tabs-a11y

Tabs a11y

A package for building tabs that comply with WCAG accessibility guidelines. The tabs can be navigated using both a mouse and a keyboard. The package also includes various configuration options.

Basic usage

Without npm

• Navigate to the project repository and download it. Place it in the appropriate directory, such as a library folder
• Include the following scripts:
  • js: tabs-a11y/dist/js/script.min.css
  • css: tabs-a11y/dist/css/styles.min.css

With npm

Add css

Include the css file from dist/css/styles.min.css

Create HTML structure

<div class="tabs" id="tabs">
    <div class="tabs__nav"></div>
    <div class="tabs__panels">
        <div class="tab-panel">
            <h3 class="tab-panel__title">Aliquid architecto</h3>
            <div class="tab-panel__content">Assumenda dolores est fuga id iure minima non rem repellat, ullam voluptatem.</div>
        </div>
        <div class="tab-panel">
            <h3 class="tab-panel__title">Consectetur deserunt</h3>
            <div class="tab-panel__content">Accusantium adipisci animi consectetur delectus dolor dolores, magni molestiae nulla odit quo saepe suscipit unde.</div>
        </div>
        <div class="tab-panel">
            <h3 class="tab-panel__title">Ducimus</h3>
            <div class="tab-panel__content">In libero molestiae odio odit perferendis praesentium repellat sed vero voluptatum? Eius quidem recusandae sapiente?</div>
        </div>
    </div>
</div>

Add javascript

Include the js file from dist/js/script.min.css

or

//commonjs
var tabs = require('tabs-a11y');

new tabs();

Configuration

Configuration object

{
    contextID: 'tabs',
    classes: {
        tabsNavContainer: '.tabs__nav',
        tabsNavList: '.tabs__nav-list',
        tabsNavButton: '.tabs__nav-btn',
        tabPanel: '.tab-panel',
        tabPanelTitle: '.tab-panel__title',
    },
    selectors: {
        tabPanelIdPrefix: 'tabpanel',
        tabPanelOpen: 'tab-panel--open',
    },
    options: {
        useCustomNav: false,
        customNavTitles: [],
        initSelectedItem: 1,
        removeTabPanelTitle: false,
    }
}

Configuration description

Option	Type	Description
contextID	string	Main Container ID.
classes.tabsNavContainer	string	Navigation tabs container css class. Use this only when you want create custom navigation.
classes.tabsNavList	string	Navigation tabs list css class. Use this only when you want create custom navigation.
classes.tabsNavButton	string	Navigation tabs buttons css class. Use this only when you want create custom navigation.
classes.tabPanel	string	Single tab panel css class.
classes.tabPanelTitle	string	Single tab title panel css class. This text will be copy to navigation button.
selectors.tabPanelIdPrefix	string	Selector that will be used as ID prefix to add correct aria structure for accessibility.
selectors.tabPanelOpen	string	Selector that will be used as css class to indicate open tab panel.
options.useCustomNav	boolean	Indicate if should use custom tabs navigation. Important note is that you have to put your css classes to configuration object.
options.customNavTitles	array	Array with custom titles.
options.initSelectedItem	number	Indicate which tab should be open on initial state. Count start from 0.
options.removeTabPanelTitle	boolean	Indicate if we should remove title from tab panel that will be moved to navigation tab buttons.

Advance usage example

Example 1 - Create nav custom title

You can use the data-nav-title attribute on the tabPanelTitle CSS class to copy its content to the navigation tabs button."

<div class="tabs" id="tabs">
    <div class="tabs__nav"></div>
    <div class="tabs__panels">
        <div class="tab-panel">
            <h3 class="tab-panel__title" data-nav-title="This is a custom title 1">Aliquid architecto</h3>
            <div class="tab-panel__content">Assumenda dolores est fuga id iure minima non rem repellat, ullam voluptatem.</div>
        </div>
        <div class="tab-panel">
            <h3 class="tab-panel__title">Consectetur deserunt</h3>
            <div class="tab-panel__content">Accusantium adipisci animi consectetur delectus dolor dolores, magni molestiae nulla odit quo saepe suscipit unde.</div>
        </div>
        <div class="tab-panel">
            <h3 class="tab-panel__title" data-nav-title="This is a custom title 2">Ducimus</h3>
            <div class="tab-panel__content">In libero molestiae odio odit perferendis praesentium repellat sed vero voluptatum? Eius quidem recusandae sapiente?</div>
        </div>
    </div>
</div>

Example 2 - Create own navigation tabs

<div class="tabs" id="tabs">
    <div class="custom-tabs__nav">
        <div class="custom-tabs__nav-inner">
            <button class="custom-tabs__nav-button" role="tab">Tab 1</button>
            <button class="custom-tabs__nav-button" role="tab">Tab 2</button>
            <button class="custom-tabs__nav-button" role="tab">Tab 3</button>
        </div>
    </div>
    <div class="tabs__panels">
        <div class="tab-panel">
            <h3 class="tab-panel__title">Aliquid architecto</h3>
            <div class="tab-panel__content">Assumenda dolores est fuga id iure minima non rem repellat, ullam voluptatem.</div>
        </div>
        <div class="tab-panel">
            <h3 class="tab-panel__title">Consectetur deserunt</h3>
            <div class="tab-panel__content">Accusantium adipisci animi consectetur delectus dolor dolores, magni molestiae nulla odit quo saepe suscipit unde.</div>
        </div>
        <div class="tab-panel">
            <h3 class="tab-panel__title">Ducimus</h3>
            <div class="tab-panel__content">In libero molestiae odio odit perferendis praesentium repellat sed vero voluptatum? Eius quidem recusandae sapiente?</div>
        </div>
    </div>
</div>

//commonjs
var tabs = require('tabs-a11y');

new tabs({
    classes: {
        tabsNavContainer: '.custom-tabs__nav',
        tabsNavList: '.custom-tabs__nav-inner',
        tabsNavButton: '.custom-tabs__nav-button',
    },
    options: {
        useCustomNav: true,
    }
});

Example 3 - Add custom title via config object

<div class="tabs" id="tabs">
    <div class="tabs__nav"></div>
    <div class="tabs__panels">
        <div class="tab-panel">
            <h3 class="tab-panel__title" data-nav-title="This is a custom title 1">Aliquid architecto</h3>
            <div class="tab-panel__content">Assumenda dolores est fuga id iure minima non rem repellat, ullam voluptatem.</div>
        </div>
        <div class="tab-panel">
            <h3 class="tab-panel__title">Consectetur deserunt</h3>
            <div class="tab-panel__content">Accusantium adipisci animi consectetur delectus dolor dolores, magni molestiae nulla odit quo saepe suscipit unde.</div>
        </div>
        <div class="tab-panel">
            <h3 class="tab-panel__title" data-nav-title="This is a custom title 2">Ducimus</h3>
            <div class="tab-panel__content">In libero molestiae odio odit perferendis praesentium repellat sed vero voluptatum? Eius quidem recusandae sapiente?</div>
        </div>
    </div>
</div>

//commonjs
var tabs = require('tabs-a11y');

new tabs({
    options: {
        customNavTitles: [
            'Custom title 1',
            'Custom title 2',
            'Custom title 3',
        ],
    } 
});