Tabs¶

Accessible solution for tabs utilizing the following tab design pattern:

Installation¶

Terminal

pnpm add @mvps-genesis/accessibility

Example Usage¶

First, implement the tabs HTML structure following the example provided in https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html. Note the following attributes in the example and ensure they are included in the HTML structure:

role
aria-*
id
tabindex
hidden

Once the HTML structure is in place, import the Tabs class from the @mvps-genesis/accessibility package in your JavaScript file. Then create a new instance of the Tabs class.

import {Tabs} from '@mvps-genesis/accessibility';

new Tabs(document.querySelector('.tabs'));

Parameters¶

HTMLElement - containerElement¶

The root container element of the tabs structure.

object - options (optional)¶

The class supports an optional configuration object as a second argument to override any of the default configuration options.

Configuration Options¶

The following table defines the available configuration options:

Name	Type	Description	Default Value
autoActivate	Boolean	Flag to determine if tab auto activation is enabled or disabled.	`true`
autoActivateDelay	Number	Auto activation delay (ms). Applied when autoActivate option is enabled.	`300`

autoActivate Setting

It is recommended that tabs activate automatically when they receive focus as long as their associated tab panels are displayed without noticeable latency. This typically requires tab panel content to be preloaded. Otherwise, automatic activation slows focus movement, which significantly hampers users' ability to navigate efficiently across the tab list. See the following article for additional guidance on deciding the best choice for this setting https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_selection_follows_focus.

Keyboard Support¶

This section outlines the keyboard support for tab elements - role="tab".

Auto Activate Setting Enabled¶

Key	Function
`Tab`	When focus moves into the tab list, places focus on the active `tab` element. When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the `tabpanel` element.
`→`	Moves focus to the next tab. If focus is on the last tab, moves focus to the first tab. Activates the newly focused tab.
`←`	Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Activates the newly focused tab.
`Home`	Moves focus to the first tab and activates it.
`End`	Moves focus to the last tab and activates it.

Auto Activate Setting Disabled¶

Key	Function
`Tab`	When focus moves into the tab list, places focus on the active `tab` element. When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the `tabpanel` element.
`Enter` `Space`	When a tab has focus, activates the tab, causing its associated panel to be displayed.
`→`	When a `tab` has focus: Moves focus to the next tab. If focus is on the last tab, moves focus to the first tab.
`←`	When a `tab` has focus: Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab.
`Home`	When a tab has focus, moves focus to the first tab.
`End`	When a tab has focus, moves focus to the last tab.

Vertical Tabs¶

When the tablist element contains the aria-orientation="vertical" attribute (vertical tabs), the ← and → keyboard support functionality listed above is replaced by the ↑ and ↓ keys respectively.