Skip to content
Accessible tabs enhancer, providing tablist, tab and tabpanel roles and spec-compliant tab switching behaviour.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows
src
test
.editorconfig
.eslintrc
.gitignore
.npmignore
.travis.yml
README.md
babel.config.js
index.mjs
package.json
yarn.lock

README.md

Accessible Tabs

Build Status

JavaScript utility library

Built with ❤️ by GRRR.

Installation

$ npm install @grrr/accessible-tabs

Note: depending on your setup additional configuration might be needed. This package is published with untranspiled JavaScript, as EcmaScript Modules (ESM).

Usage

Import the module and initialize it:

import Tabs from '@grrr/accessible-tabs';

// Construct and initialize the module with the list to enhance (see 'Markup' section below).
const tabs = Tabs(document.querySelector('.js-tablist'));
tabs.init();

Markup

The module enhances a basic list of anchors referencing sections:

<ul class="js-tablist">
    <li>
        <a href="#section1">Section 1</a>
    </li>
    <li>
        <a href="#section2">Section 2</a>
    </li>
</ul>
<section id="section1">
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section id="section2">
    <h2>Section 2</h2>
    <p>Nullam at diam nec arcu suscipit auctor non a erat.</p>
</section>

When fully enhanced, this will be the final markup:

<ul class="js-tablist" role="tablist">
    <li role="presentation">
        <a href="#section1" role="tab" id="section1-tab" aria-selected="true">Section 1</a>
    </li>
    <li role="presentation">
        <a href="#section2" role="tab" id="section2-tab" tabindex="-1">Section 2</a>
    </li>
</ul>
<section id="section1" role="tabpanel" tabindex="-1" aria-labelledby="section1-tab">
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section id="section2" role="tabpanel" tabindex="-1" aria-labelledby="section2-tab" hidden>
    <h2>Section 2</h2>
    <p>Nullam at diam nec arcu suscipit auctor non a erat.</p>
</section>

Pre-enhancing & layout shifts

It's possible to pre-enhance the markup. Mainly to make semantic styling easier (e.g. .tab-class [role="tab"]), and to prevent layout shifts during page load (because of tabpanels being hidden and new styling being applied). However, this should be used with caution since it interferes with the semantics of the non-enhanced version.

To prevent layout shifts, one could use a styling strategy like this:

.js section:not([role="tabpanel"]):not(:first-of-type) {
    display: none;
}

Note: the .js class could come from a library like Modernizr, and helps deciding which styling should be applied based on the availability of JavaScript.

You can’t perform that action at this time.