fr-tabs

1.0.6 • Public • Published

permalink: /components/tabs/ filename: tabs title: Tabs alpha: false sources:


The concept of a tab interface for the web may seem strikingly straight-forward. However, implementations often draw the line at styling and showing/hiding content.

ARIA roles can be used to help give clearer meaning about the controls and containers in a tab component. tablist, tab and tabpanel are all ideal for the list, anchor and sectioning elements, respectively. These aid assistive technologies when announcing the component. It's also beneficial to create a bi-directional connection between each tab and its tabpanel. This is done by matching the aria-controls and aria-labelledby attributes to ids on tabs and panels, respectively.

Managing focus and tabindex ensures that only the visible content can be accessed when needed. We properly hide content by declaring its tabindex="-1" and aria-hidden="true" when inactive. When active, the tabpanel should have the ability to be focused. We can again use tabindex="0" to achieve this. An aria-selected="true" attribute is needed to correctly set the active tab's state.

Key bindings also give keyboard users more predictable and intuitive ways of navigating the component. All arrow keys can be used to cycle through the tabs. Hitting the tab key will shift focus directly from the focused tab to its active tabpanel content.

Install

Frtabs is available to install with npm. Run with the --save flag to add the component your project dependencies.

npm install fr-tabs --save

The component will then be available to import.

import Frtabs from 'fr-tabs';

Functional styles for the tabs (tabs.css) that are required to display the component states correctly should be referenced via a <link> in the <head> of your document, or can be integrated into your existing stylesheet.

You can read more about installing Frend components on our About page, including details on the functional CSS and JavaScript structure.

Usage

A simple list of jumplinks to content anchors can form the basis of a tabs component.

<div class="fr-tabs js-fr-tabs">
    <ul class="fr-tabs__tablist js-fr-tabs__tablist">
        <li class="fr-tabs__tablist-item">
            <a class="fr-tabs__tab" id="tab1" href="#panel1">...</a>
        </li>
        <li class="fr-tabs__tablist-item">
            <a class="fr-tabs__tab" id="tab2" href="#panel2">...</a>
        </li>
        <li class="fr-tabs__tablist-item">
            <a class="fr-tabs__tab" id="tab3" href="#panel3">...</a>
        </li>
    </ul>
    <section class="fr-tabs__panel js-fr-tabs__panel" id="panel1">
        ...
    </section>
    <section class="fr-tabs__panel js-fr-tabs__panel" id="panel2">
        ...
    </section>
    <section class="fr-tabs__panel js-fr-tabs__panel" id="panel3">
        ...
    </section>
</div>

Assign the function invocation to a variable to initialise the tabs.

var myTabs = Frtabs();

JavaScript for this component will take care of ARIA roles/attributes and focus management, transforming the original HTML into:

<div class="fr-tabs js-fr-tabs fr-tabs--is-ready">
    <ul class="fr-tabs__tablist js-fr-tabs__tablist" role="tablist">
        <li class="fr-tabs__tablist-item" role="presentation">
            <a class="fr-tabs__tab" id="tab1" href="#panel1" role="tab" aria-controls="panel1" tabindex="0" aria-selected="true">...</a>
        </li>
        <li class="fr-tabs__tablist-item" role="presentation">
            <a class="fr-tabs__tab" id="tab2" href="#panel2" role="tab" aria-controls="panel2" tabindex="-1">...</a>
        </li>
        <li class="fr-tabs__tablist-item" role="presentation">
            <a class="fr-tabs__tab" id="tab3" href="#panel3" role="tab" aria-controls="panel3" tabindex="-1">...</a>
        </li>
    </ul>
    <section class="fr-tabs__panel js-fr-tabs__panel" id="panel1" role="tabpanel" aria-labelledby="tab1" tabindex="0">
        ...
    </section>
    <section class="fr-tabs__panel js-fr-tabs__panel" id="panel2" role="tabpanel" aria-labelledby="tab2" tabindex="0" aria-hidden="true">
        ...
    </section>
    <section class="fr-tabs__panel js-fr-tabs__panel" id="panel3" role="tabpanel" aria-labelledby="tab3" tabindex="0" aria-hidden="true">
        ...
    </section>
</div>

Methods

// remove all bindings and attributes when no longer needed
myTabs.destroy();
 
// re-initialise as needed
myTabs.init();

Options

var myTabs = Frtabs({
    // String - Outer container selector, hook for JS init() method
    selector: '.js-fr-tabs',
 
    // String - List selector to transform into tablist
    tablistSelector: '.js-fr-tabs__tablist',
 
    // String - Containers which hold content, toggled via tabs
    tabpanelSelector: '.js-fr-tabs__panel',
 
    // String - Class name that will be added to the selector when the component has been initialised
    tabsReadyClass: 'fr-tabs--is-ready'
});

Readme

Keywords

Package Sidebar

Install

npm i fr-tabs

Weekly Downloads

61

Version

1.0.6

License

MIT

Last publish

Collaborators

  • ffffrend