fr-tabs

v1.0.6

Published

3 years ago

Frend's accessible, modern tabs component.

Downloads

163

0High
0Medium
0Low

ffffrend

tabs accessible es2015

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

title: HTML url: https://github.com/frend/frend.co/blob/gh-pages/_components/tabs/tabs.html
title: CSS url: https://github.com/frend/frend.co/blob/gh-pages/_components/tabs/tabs.css
title: JS url: https://github.com/frend/frend.co/blob/gh-pages/_components/tabs/tabs.js links:
title: WAI ARIA Authoring Practices - Tab Panel url: https://www.w3.org/TR/wai-aria-practices/#tabpanel
title: Hack Poets - From HTML to ARIA Tabs, A Travelog url: https://hackpoets.wordpress.com/2016/05/10/from-html-to-aria-tabs-a-travelog/
title: Léonie Watson - Danger! Testing Accessibility with real people url: https://medium.com/@LeonieWatson/danger-testing-accessibility-with-real-people-4515f72db648
title: Heydon Pickering - Practical ARIA Examples url: http://heydonworks.com/practical_aria_examples/#tab-interface
title: Athena Technologies - Tab panel url: http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
title: 24 Ways - How Tabs Should Work url: https://24ways.org/2015/how-tabs-should-work/
title: Accessible Culture - Accessible ARIA Tabs url: http://accessibleculture.org/articles/2010/08/aria-tabs/

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'
});

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Install

Usage

Methods

Options