Methods
(static) destroyInstance(container, tablistSelector, tabpanelSelector, clickHandler, keyHandler, removeAttrsopt)
Destroy an instance. Removes event listeners and, optionally, accessibility attributes from the DOM.
Parameters
| Name | Type | Attributes | Description |
|---|---|---|---|
container |
HTMLElement | The container wrapping the tab interface |
|
tablistSelector |
String | The tablist's selector. |
|
tabpanelSelector |
String | The tabpanel's selector. |
|
clickHandler |
clickHandler | A callback to handle click events. |
|
keyHandler |
keyHandler | A callback to handle keydown events. |
|
removeAttrs |
Boolean |
<optional> |
Determine if attributes should be remove |
(static) gotoTab(targetIndex, container, tabs, tabpanels, activeTabIndex, focus) → {Integer}
Go to a tab
Parameters
| Name | Type | Description |
|---|---|---|
targetIndex |
Integer | The index of the tab to be activated |
container |
HTMLElement | The container wrapping the tab interface |
tabs |
Array.<HTMLElement> | An array containing the tab elements |
tabpanels |
Array.<HTMLElement> | An array containing tabpanel element |
activeTabIndex |
Integer | The index of the currently active tab |
focus |
Boolean | Determine if the newly activated tab should be focused. |
Fires:
- module:htz-a11y-tabs~event:a11y-tabs:before-select
- module:htz-a11y-tabs~event:a11y-tabs:after-select
Returns
The index of the newly active tab.
- Type
- Integer
(static) initialize(container, tablistSelector, tabpanelSelector, clickHandler, keyHandler, activeTab) → {Array}
Initialize an instance
Parameters
| Name | Type | Description |
|---|---|---|
container |
HTMLElement | The wrapper element around the tabs and tab panels |
tablistSelector |
String | The tablist's selector. |
tabpanelSelector |
String | The tabpanel's selector. |
clickHandler |
clickHandler | A callback to handle click events. |
keyHandler |
keyHandler | A callback to handle keydown events. |
activeTab |
Integer | The tab number to activate. Zero based. |
Fires:
Returns
- An array whose items are:
0: the
tablistHTMLElement 1: An Array of the clickable tab HTMLElements
- Type
- Array
(private, static) makeFocusable(elem) → {HTMLElement}
Make the first child of an element focusable. If the element has no children, make the element itself focusable.
Parameters
| Name | Type | Description |
|---|---|---|
elem |
HTMLElement | The Element to target |
Returns
- The focusable element.
- Type
- HTMLElement
(static) nextTab(container, tabs, tabpanels, activeTabIndex, focus) → {Integer}
Go to the next tab
Parameters
| Name | Type | Description |
|---|---|---|
container |
HTMLElement | The container wrapping the tab interface |
tabs |
Array.<HTMLElement> | An array containing the tab elements |
tabpanels |
Array.<HTMLElement> | An array containing tabpanel element |
activeTabIndex |
Integer | The index of the currently active tab |
focus |
Boolean | Determine if the newly activated tab should be focused. |
Returns
The index of the newly active tab.
- Type
- Integer
(static) prevTab(container, tabs, tabpanels, activeTabIndex, focus) → {Integer}
Go to the previous tab
Parameters
| Name | Type | Description |
|---|---|---|
container |
HTMLElement | The container wrapping the tab interface |
tabs |
Array.<HTMLElement> | An array containing the tab elements |
tabpanels |
Array.<HTMLElement> | An array containing tabpanel element |
activeTabIndex |
Integer | The index of the currently active tab |
focus |
Boolean | Determine if the newly activated tab should be focused. |
Returns
The index of the newly active tab.
- Type
- Integer
(private, inner) handleTabSwitch(currentTab, targetTab, currentTabpanel, targetTabpanel, moveFocus)
Handle DOM changes related to switching tabs
Parameters
| Name | Type | Description |
|---|---|---|
currentTab |
HTMLElement | The currently selected tab |
targetTab |
HTMLElement | The tab to be selected |
currentTabpanel |
HTMLElement | The currently selected tabpanel |
targetTabpanel |
HTMLElement | The tabpanel to be selected |
moveFocus |
Boolean | Determine if the newly activated tab should be focused. |