htz-a11y-tabs

Module: htz-a11y-tabs

HTZ A11Y TABS

JavaScript scaffolding for accessible tab interfaces

index.js:1
index.js:1
License:
  • MIT
index.js:34

(require("htz-a11y-tabs"))(container, rtl, tablistSelectoropt, tabpanelSelectoropt, activeTabopt) → {module:htz-a11y-tabs#API}

Initialize a tab interface. Depends on semantic markup, in which the tablist is a ul element, and each tab contains an clickable tag pointing to its respective tabpanel.

Parameters
Name Type Attributes Default Description
container HTMLElement

The wrapper element around the tabs and tab panels
rtl Boolean

Determine if the tab interface should be right-to-left
tablistSelector String <optional>
 'ul'

The tablist's selector.
tabpanelSelector String <optional>
 'section'

The tabpanels' selector.
activeTab Integer <optional>
 0

The tab number to have initially activated. Zero based.
Fires:
  • module:htz-a11y-tabs~a11y-tabs:init - Fired from `container` after a tab interface has been initializedevent:
  • module:htz-a11y-tabs~a11y-tabs:destroy - Fired from `container` after a tab interface has been destroyedevent:
  • module:htz-a11y-tabs~a11y-tabs:before-select - Fired from `container` before a tab selection is applied. If the event handler executes `event.preventDefault()`, the selection will not be applied.event:
  • module:htz-a11y-tabs~a11y-tabs:after-select - Fired from `container` after a tab selection is applied.event:
Returns
Type
module:htz-a11y-tabs#API

Type Definitions

index.js:176

API

Instance API

index.js:176
Properties:
Name Type Description
isInitialized Method

Returns true if the instance is initialized
visibleTab Method

Returns the number of the active tab. Zero based.
init module:htz-a11y-tabs#init

Initialize an instance.
destroy module:htz-a11y-tabs#destroy

Destroy an instance.
goto module:htz-a11y-tabs#goto

Go to a specific tab
next module:htz-a11y-tabs#next

Go to the next tab
previous module:htz-a11y-tabs#prev

Go to the next tab
index.js:111

destroy(removeAttrsopt)

Destroy an instance. Removes event listeners and, optionally, accessibility attributes from the DOM.

index.js:111
Parameters
Name Type Attributes Description
removeAttrs Boolean <optional>

Determine if attributes should be remove
index.js:132

goto(index, focusopt)

Go to a tab

index.js:132
Parameters
Name Type Attributes Description
index Integer

The index of the tab to be activated
focus Boolean <optional>

Determine if the newly activated tab should be focused.
index.js:90

init(activateopt)

Initialize an instance

index.js:90
Parameters
Name Type Attributes Description
activate Integer <optional>

The tab number to activate. Zero based.
index.js:147

next(focusopt)

Go to the next tab

index.js:147
Parameters
Name Type Attributes Description
focus Boolean <optional>

Determine if the newly activated tab should be focused.
index.js:161

prev(focusopt)

Go to the previous tab

index.js:161
Parameters
Name Type Attributes Description
focus Boolean <optional>

Determine if the newly activated tab should be focused.

Events

utils.js:235

a11y-tabs:after-select

Fired from container after a tab selection is applied.

Type:
  • Object
utils.js:235
Properties:
Name Type Description
detail Object
Properties
Name Type Description
prevTab HTMLElement

The previously active tab
targetTab HTMLElement

The tab that has been activated by the selection.
prevTabpanel HTMLElement

The previously active tabpanel
targetTabpanel HTMLElement

The tabpanel that will be activated after the selection is applied.
utils.js:211

a11y-tabs:before-select

Fired from container before a tab selection is applied. If the event handler executes event.preventDefault(), the selection will not be applied.

Type:
  • Object
utils.js:211
Properties:
Name Type Description
detail Object
Properties
Name Type Description
currentTab HTMLElement

The currently active tab
targetTab HTMLElement

The tab that will be activated after the selection is applied.
currentTabpanel HTMLElement

The currently active tabpanel
targetTabpanel HTMLElement

The tabpanel that will be activated after the selection is applied.
utils.js:142

a11y-tabs:destroy

Fired from container after a tab interface has been destroyed.

Type:
  • Object
utils.js:142
utils.js:74

a11y-tabs:init

Fired from container when a tab interface is initialized

Type:
  • Object
utils.js:74
Properties:
Name Type Description
detail Object
Properties
Name Type Description
activeTab HTMLElement

The active tab element.
activeTabpanel HTMLElement

The active tabpanel element.