Tabs

Tab panel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab panel 2

Mauris rhoncus commodo sapien, eu porttitor libero gravida at. Maecenas a dapibus lorem. Suspendisse fermentum neque ligula, et dapibus libero volutpat scelerisque. Cras vitae enim interdum, fringilla sapien quis, posuere purus. Morbi dictum arcu sapien, eget malesuada lorem ultricies non. Etiam tellus neque, dapibus ac rutrum ut, mollis vel nibh.

Tab panel 3

Quisque facilisis fermentum ex, in iaculis felis porta et. Phasellus sapien neque, sagittis vitae erat vitae, consequat vulputate lacus. Donec sit amet mattis ipsum. Ut metus ipsum, consectetur tincidunt imperdiet sed, consequat sed urna. Morbi id feugiat magna. Nunc ut aliquet quam. Morbi auctor sapien quam. Cras lorem neque, imperdiet ut mollis non, cursus scelerisque augue.

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

Browser support

Frend components rely on common JavaScript APIs like classList, and ES5 methods like forEach. Each component tests for support of these before initialising. They will be fully functional in:

  • Chrome 8+
  • Firefox 3.6+
  • Safari 5.1+
  • Opera 15+
  • Edge 12+
  • IE 10+
  • iOS Safari 5.1+
  • Android Browser 3+

Browsers that haven’t cut the mustard here will render the initial HTML to be styled up as necessary.