TabsStatusrelease

Automatically activated tabs display their panel when they receive focus.

Guidance

Automatic activation should be used when the tabpanel content is immediately available and present in the DOM. Manual activation (requiring a click or enter/space keydown event) should be used if the content is not immediately present, for example if it requires a network request to retrieve it. Automatic activation can be enabled by setting activation: true when initialising the tabs.

Example

Open in a new tab

Dependencies and installation

Package	Installation
@stormid/tabs	`npm i -S @stormid/tabs`

Code

<div class="tabs js-tabs"><div class="tabs__tabslist" role="tablist"><a id="tab-1" class="tabs__tab js-tabs__link" href="#panel-1" role="tab">Tab 1</a><a id="tab-2" class="tabs__tab js-tabs__link" href="#panel-2" role="tab">Tab 2</a><a id="tab-3" class="tabs__tab js-tabs__link" href="#panel-3" role="tab">Tab 3</a></div><div id="panel-1" class="tabs__tabpanel" role="tabpanel">Panel 1</div><div id="panel-2" class="tabs__tabpanel" role="tabpanel" hidden><p>Panel 2</p><p><a href="/">Test link</a></p><p><a href="/">Test link</a></p></div><div id="panel-3" class="tabs__tabpanel" role="tabpanel" hidden><p>Panel 3</p><p><a href="/">Test link</a></p><p><a href="/">Test link</a></p></div></div>

import tabs from '@stormid/tabs';

tabs('.js-tabs');

Acceptance criteria

The following is a list of example acceptance criteria to test against when using this pattern. These critera should test that the specific markup requirements are met, and that the tabs behave visually and functionally as expected.

For validation in developer tools / web inspector

The HTML element containing the tabs should have an attribute of
```
role="tablist"
```
The tablist element should immediately contain one or more HTML
```
<a>
```
tags representing the clickable tabs
Each of the
```
<a>
```
tags should have an attribute of
```
role="tab"
```
Each of the
```
<a>
```
tags should have an
```
href="#mytabpanelid"
```
where #mytabpanelid matches the ID of the panel that should activate when the tab is clicked
The page should also contain one or more HTML elements representing the content filled panels to be activated. These elements should have an attribute of
```
role="tabpanel"
```
and an
```
id
```
attribute which matches one of the clickable tabs, as above

For visual validation

Each tab should have a clearly visible focus style which meets accessibility contrast requirements
The active tab should have a clearly visible 'active' style to show that it corresponds to the currently visible content
Tab panels that are not currently active should hidden visually, hidden from keyboard access, and not read by screen readers
The active tab panel should be visible, available for keyboard access, and read by screen readers

For functional validation

When a tab is clicked/activated the corresponding tab panel should become visible, keyboard accessible and be able to be read by screen readers
When a tab is clicked/activated, the address of the page should update to set a hash string ('#') that matches the ID of the active tab
If a user visits an address which contains a hash, if that hash string matches the ID of a tab panel then that panel will open immediately. This is to allow users to share links directly to tabs within the page
When keyboard focus is on a tab, pressing the 'right arrow' key moves to the next tab or loops back to the first tab if focus was on the last
When keyboard focus is on a tab, pressing the 'left arrow' key moves to the previous tab or loops to the last tab if focus was on the first
When keyboard focus changes to a new tab, the corresponding panel activates and the previous panel is hidden

UI Patterns