diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..3c078e9 --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": [ + "es2015" + ] +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..940def1 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,29 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +# This is the top-most EditorConfig file +root = true + +#### All files +[*] +## Indents +# Indent using spaces even when inserting `tab` (soft tabs) +indent_style = space +# The number of spaces for each tab when using soft tabs +indent_size = 2 + +## Newlines +end_of_line = lf # Unix-style newlines +insert_final_newline = true # Newline ending every file + +## Misc +charset = utf-8 +# remove whitespace before newline characters +trim_trailing_whitespace = true + + +#### Overrides for Markdown files +[*.md] +# Don't remove trailing whitespace in markdown files +trim_trailing_whitespace = false diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..2746e52 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +jspm_packages +jspm.browser.js +jspm.config.js +docs diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..984813f --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,53 @@ +module.exports = { + /* Extend airbnb's style-guide enforcement */ + "extends": "eslint-config-airbnb/base", + + "parserOptions": { + "ecmaVersion": 6, + "sourceType": "module", + }, + + "env": { + "es6": true, + "node": true, + "browser": true + }, + + "rules": { + "import/no-unresolved": 0, + "import/no-extraneous-dependencies": 0, + + "brace-style": [2, "stroustrup", { "allowSingleLine": true }], + /* Warn about long line */ + "max-len": [1, 100, 2], + /* Warn about use of console */ + "no-console": [1], + /* Warn about use of debugger */ + "no-debugger": [1], + /* Allow nested ternaries */ + "no-nested-ternary": 0, + /* Warn when declaring a variable with a name that already exists in the containing scope */ + "no-shadow": [1], + /* Forbid referencing a variable before it is defined, but allow using declared functions */ + "no-use-before-define": [2, "nofunc"], + /* Warn when referencing an undefined variable */ + "no-undef": [1], + /* Forbid expressions that are never used */ + "no-unused-expressions": [2, { allowShortCircuit: true, allowTernary: true }], + /* Warn when declaring a variable without using it */ + "no-unused-vars": [1, {"vars": "local", "args": "none"}], + "no-warning-comments": [1, {"terms": ["fixme", "todo"], "location": "start"}], + "valid-jsdoc": [2, { + "requireReturn": false, + "requireParamDescription": false, + "requireReturnDescription": false + }], + /* disallow certain syntax forms */ + 'no-restricted-syntax': [ + 2, + 'DebuggerStatement', + 'LabeledStatement', + 'WithStatement', + ], + }, +} diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..2125666 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..42593b2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,14 @@ +# Ignore patternlab files, except sources +/pl/* +!/pl/source +!/pl/config + +# Ignore external packages +node_modules +jspm_packages + +# Ignore generated files +/css +/sgSrc/assets +/styleguide +/js/dist diff --git a/README.md b/README.md new file mode 100644 index 0000000..78795b5 --- /dev/null +++ b/README.md @@ -0,0 +1,121 @@ +# htz a11y tabs + +JavaScript scaffolding for accessible tab interfaces + +### Installation +```bash +jspm install github:haaretz/htz-a11y-tabs +``` + +### Usage +This module is built to enhance semantic markup into an accessible tab interface, +using ARIA and a little javascript. + +```js +// Import +import a11yTabs from 'htz-a11y-tabs'; + +// Instanciate +a11yTabs(tabInterface [,rtl , tablistSelector, tabpanelSelector, activeTab]); +``` + +See [here](https://haaretz.github.io/htz-a11y-tabs/) for the full JavaScript documentation. + +The tablist should be a `ul` element, with each `li` containing an anchor element +pointing to the relevant tabpanel (which should, in most likelihood be a `section` +or an `article` element): + +```html +
+ + + + +
+

section 1

+
+
+

section 2

+
+
+

section 3

+
+
+

section 4

+
+
+``` + +The above markup will start us off with a basic list of links to articles within our page, which +can still be accessible in the event of any failure in executing the script. Our tab interface can +now be progressively enhanced using JavaScript and CSS. + +Once our tab interface it initialized, its markup will be transformed into: + +```html +
+ + + + +
+

section 1

+
+ + + +
+``` +Make sure that your css hides tabpanels that have the `aria-hidden` attribute +set to `true`, and that a tab with the `aria-selected` attribute set to `true` +are marked as the active tab. + +The script enables cycling between the selected tab and its content without having cycle +through all the other tabs. As per [spec](https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel), +moving through the tabs is done with `left` and `right` arrow keys, while moving between the +selected tab and the visible tab panel is done using the `tab` key. + +Pressing the `tab` key will focus the first element _inside_ the tab panel +(which, for semantics sake, should probably be a heading), or the tab panel +itself when it does not contain any HTML elements. + +### Parameters + * **container** (HTMLElement): The wrapper element around the tabs and tab panels. + * **rtl** (Boolean): Determine if the tab interface should be right-to-left. _Default: false_. + * **tablistSelector** (String): The tablist's selector. _Default: 'ul'_. + * **tabpanelSelector** (String): The tabpanels' selector. _Default: 'section'_. + * **activeTab** (Integer): The tab number to have initially activated. Zero based. _Default: 0_. + +### Events + * **'a11y-tabs:init'** - Fired from `container` after a tab interface has been initialized + * **'a11y-tabs:destroy'** - Fired from `container` after a tab interface has been destroyed + * **'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. + * **'a11y-tabs:after-select'** - Fired from `container` after a tab selection is applied. + +See [the documentation](https://haaretz.github.io/htz-a11y-tabs/) for details on +properties available in each event object. diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Bold-webfont.eot b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Bold-webfont.eot new file mode 100644 index 0000000..5d20d91 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Bold-webfont.eot differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Bold-webfont.svg b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Bold-webfont.svg new file mode 100644 index 0000000..3ed7be4 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Bold-webfont.svg @@ -0,0 +1,1830 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Bold-webfont.woff b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Bold-webfont.woff new file mode 100644 index 0000000..1205787 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Bold-webfont.woff differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-BoldItalic-webfont.eot b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-BoldItalic-webfont.eot new file mode 100644 index 0000000..1f639a1 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-BoldItalic-webfont.eot differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-BoldItalic-webfont.svg b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-BoldItalic-webfont.svg new file mode 100644 index 0000000..6a2607b --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-BoldItalic-webfont.svg @@ -0,0 +1,1830 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-BoldItalic-webfont.woff b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-BoldItalic-webfont.woff new file mode 100644 index 0000000..ed760c0 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-BoldItalic-webfont.woff differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Italic-webfont.eot b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Italic-webfont.eot new file mode 100644 index 0000000..0c8a0ae Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Italic-webfont.eot differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Italic-webfont.svg b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Italic-webfont.svg new file mode 100644 index 0000000..e1075dc --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Italic-webfont.svg @@ -0,0 +1,1830 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Italic-webfont.woff b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Italic-webfont.woff new file mode 100644 index 0000000..ff652e6 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Italic-webfont.woff differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Light-webfont.eot b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Light-webfont.eot new file mode 100644 index 0000000..1486840 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Light-webfont.eot differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Light-webfont.svg b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Light-webfont.svg new file mode 100644 index 0000000..11a472c --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Light-webfont.svg @@ -0,0 +1,1831 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Light-webfont.woff b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Light-webfont.woff new file mode 100644 index 0000000..e786074 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Light-webfont.woff differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-LightItalic-webfont.eot b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-LightItalic-webfont.eot new file mode 100644 index 0000000..8f44592 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-LightItalic-webfont.eot differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-LightItalic-webfont.svg b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-LightItalic-webfont.svg new file mode 100644 index 0000000..431d7e3 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-LightItalic-webfont.svg @@ -0,0 +1,1835 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-LightItalic-webfont.woff b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-LightItalic-webfont.woff new file mode 100644 index 0000000..43e8b9e Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-LightItalic-webfont.woff differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Regular-webfont.eot b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Regular-webfont.eot new file mode 100644 index 0000000..6bbc3cf Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Regular-webfont.eot differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Regular-webfont.svg b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Regular-webfont.svg new file mode 100644 index 0000000..25a3952 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Regular-webfont.svg @@ -0,0 +1,1831 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Regular-webfont.woff b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Regular-webfont.woff new file mode 100644 index 0000000..e231183 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Regular-webfont.woff differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Semibold-webfont.eot b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Semibold-webfont.eot new file mode 100644 index 0000000..d8375dd Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Semibold-webfont.eot differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Semibold-webfont.svg b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Semibold-webfont.svg new file mode 100644 index 0000000..eec4db8 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Semibold-webfont.svg @@ -0,0 +1,1830 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Semibold-webfont.ttf b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Semibold-webfont.ttf new file mode 100644 index 0000000..b329084 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Semibold-webfont.ttf differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Semibold-webfont.woff b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Semibold-webfont.woff new file mode 100644 index 0000000..28d6ade Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-Semibold-webfont.woff differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-SemiboldItalic-webfont.eot b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-SemiboldItalic-webfont.eot new file mode 100644 index 0000000..0ab1db2 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-SemiboldItalic-webfont.eot differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-SemiboldItalic-webfont.svg b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-SemiboldItalic-webfont.svg new file mode 100644 index 0000000..7166ec1 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-SemiboldItalic-webfont.svg @@ -0,0 +1,1830 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-SemiboldItalic-webfont.ttf b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-SemiboldItalic-webfont.ttf new file mode 100644 index 0000000..d2d6318 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-SemiboldItalic-webfont.ttf differ diff --git a/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-SemiboldItalic-webfont.woff b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-SemiboldItalic-webfont.woff new file mode 100644 index 0000000..d4dfca4 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/fonts/OpenSans-SemiboldItalic-webfont.woff differ diff --git a/docs/htz-a11y-tabs/1.0.0/global.html b/docs/htz-a11y-tabs/1.0.0/global.html new file mode 100644 index 0000000..b5df6fb --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/global.html @@ -0,0 +1,2523 @@ + + + + + Global - Documentation + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Global

+ + + + + + + + +
+ + + +
+ +

+ +

+ + + + +
+
Members
+
+
+
Methods
+
+ +
+
+ + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + + + + + + + + + + + + +

Methods

+ + + +
+ + + + + + +
+ + + utils.js:101 + +
+ + + + + + + + +

+ destroyInstance(container, clickHandler, keyHandler) + +

+ + + + + + + + + + + + + + + +
+

Remove event listeners

+
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
container + + +HTMLElement + + + +

The container wrapping the tab interface

clickHandler + + +clickHandler + + + +

A callback to handle click events.

keyHandler + + +keyHandler + + + +

A callback to handle keydown events.

+ +
+ + + + + + + + + + + + + + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + utils.js:166 + +
+ + + + + + + + +

+ gotoTab(targetIndex, container, tabs, tabpanels, activeTabIndex, focus) → {Integer} + +

+ + + + + + + + + + + + + + + +
+

Go to a tab

+
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
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:
+ + + + + + + + + + +
+
Returns
+ + +
+

The index of the newly active tab.

+
+ + + +
+
+ Type +
+
+ +Integer + + +
+
+ + +
+ + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + utils.js:259 + +
+ + + + + + + + +

+ (private) handleTabSwitch(currentTab, targetTab, currentTabpanel, targetTabpanel, moveFocus) + +

+ + + + + + + + + + + + + + + +
+

Handle DOM changes related to switching tabs

+
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
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.

+ +
+ + + + + + + + + + + + + + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + utils.js:25 + +
+ + + + + + + + +

+ initialize(container, tablistSelector, tabpanelSelector, clickHandler, keyHandler, activeTab) → {Array} + +

+ + + + + + + + + + + + + + + +
+

Initialize an instance

+
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
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 tablist HTMLElement + 1: An Array of the clickable tab HTMLElements
    • +
+
+ + + +
+
+ Type +
+
+ +Array + + +
+
+ + +
+ + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + utils.js:240 + +
+ + + + + + + + +

+ (private) makeFocusable(elem) → {HTMLElement} + +

+ + + + + + + + + + + + + + + +
+

Make the first child of an element focusable. If the element has +no children, make the element itself focusable.

+
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
elem + + +HTMLElement + + + +

The Element to target

+ +
+ + + + + + + + + + + + + +
+
Returns
+ + +
+
    +
  • The focusable element.
    • +
+
+ + + +
+
+ Type +
+
+ +HTMLElement + + +
+
+ + +
+ + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + index.js:34 + +
+ + + + + + + + +

+ module: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
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDefaultDescription
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 + + +
+
+ + +
+ + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + utils.js:127 + +
+ + + + + + + + +

+ nextTab(container, tabs, tabpanels, activeTabIndex, focus) → {Integer} + +

+ + + + + + + + + + + + + + + +
+

Go to the next tab

+
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
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 + + +
+
+ + +
+ + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + utils.js:144 + +
+ + + + + + + + +

+ prevTab(container, tabs, tabpanels, activeTabIndex, focus) → {Integer} + +

+ + + + + + + + + + + + + + + +
+

Go to the previous tab

+
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
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 + + +
+
+ + +
+ + + + + + + +
+ + +
+ + + + + + + +
+ +
+ + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/docs/htz-a11y-tabs/1.0.0/index.html b/docs/htz-a11y-tabs/1.0.0/index.html new file mode 100644 index 0000000..f3e7573 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/index.html @@ -0,0 +1,168 @@ + + + + + Home - Documentation + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
+

htz a11y tabs

JavaScript scaffolding for accessible tab interfaces

+

Installation

jspm install github:haaretz/htz-a11y-tabs

Usage

This module is built to enhance semantic markup into an accessible tab interface, +using ARIA and a little javascript.

+
// Import
+import a11yTabs from 'htz-a11y-tabs';
+
+// Instanciate
+a11yTabs(tabInterface [,rtl , tablistSelector, tabpanelSelector, activeTab]);

See here for the full JavaScript documentation.

+

The tablist should be a ul element, with each li containing an anchor element +pointing to the relevant tabpanel (which should, in most likelihood be a section +or an article element):

+
<section id="tabInterface">
+  <!-- tablist -->
+  <ul>
+    <li><a href="#section1">Section 1</a></li>
+    <li><a href="#section2">Section 2</a></li>
+    <li><a href="#section3">Section 3</a></li>
+    <li><a href="#section4">Section 4</a></li>
+  </ul>
+
+  <!-- tabpanels -->
+  <article>
+    <h2>section 1</h2>
+  </article>
+  <article>
+    <h2>section 2</h2>
+  </article>
+  <article>
+    <h2>section 3</h2>
+  </article>
+  <article>
+    <h2>section 4</h2>
+  </article>
+</section>

The above markup will start us off with a basic list of links to articles within our page, which +can still be accessible in the event of any failure in executing the script. Our tab interface can +now be progressively enhanced using JavaScript and CSS.

+

Once our tab interface it initialized, its markup will be transformed into:

+
<section id="tabInterface">
+  <!-- tablist -->
+  <ul role="tablist">
+    <li role="presentation">
+      <a href="#section1" tabindex="0" role="tab" aria-controls="section1" aria-selected="true">Section 1</a>
+    </li>
+    <li role="presentation">
+      <a href="#section2" tabindex="-1" role="tab" aria-controls="section2">Section 2</a>
+    </li>
+    <li role="presentation">
+      <a href="#section3" tabindex="-1" role="tab" aria-controls="section3">Section 3</a>
+    </li>
+    <li role="presentation">
+      <a href="#section4" tabindex="-1" role="tab" aria-controls="section4">Section 4</a>
+    </li>
+  </ul>
+
+  <!-- tabpanels -->
+  <article id="section1" role="tabpanel">
+    <h2 tabindex="0">section 1</h2>
+  </article>
+  <article id="section2" role="tabpanel" aria-hidden="true">
+    <h2>section 2</h2>
+  </article>
+  <article id="section3" role="tabpanel" aria-hidden="true">
+    <h2>section 3</h2>
+  </article>
+  <article id="section4" role="tabpanel" aria-hidden="true">
+    <h2>section 4</h2>
+  </article>
+</section>

Make sure that your css hides tabpanels that have the aria-hidden attribute +set to true, and that a tab with the aria-selected attribute set to true +are marked as the active tab.

+

The script enables cycling between the selected tab and its content without having cycle +through all the other tabs. As per spec, +moving through the tabs is done with left and right arrow keys, while moving between the +selected tab and the visible tab panel is done using the tab key.

+

Pressing the tab key will focus the first element inside the tab panel +(which, for semantics sake, should probably be a heading), or the tab panel +itself when it does not contain any HTML elements.

+

Parameters

    +
  • container (HTMLElement): The wrapper element around the tabs and tab panels.
    • +
  • rtl (Boolean): Determine if the tab interface should be right-to-left. Default: false.
    • +
  • tablistSelector (String): The tablist's selector. Default: 'ul'.
    • +
  • tabpanelSelector (String): The tabpanels' selector. Default: 'section'.
    • +
  • activeTab (Integer): The tab number to have initially activated. Zero based. Default: 0.
    • +
+

Events

    +
  • 'a11y-tabs:init' - Fired from container after a tab interface has been initialized
    • +
  • 'a11y-tabs:destroy' - Fired from container after a tab interface has been destroyed
    • +
  • '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.
    • +
  • 'a11y-tabs:after-select' - Fired from container after a tab selection is applied.
    • +
+

See the documentation for details on +properties available in each event object.

+
+ + + + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/docs/htz-a11y-tabs/1.0.0/index.js.html b/docs/htz-a11y-tabs/1.0.0/index.js.html new file mode 100644 index 0000000..1964105 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/index.js.html @@ -0,0 +1,263 @@ + + + + + index.js - Documentation + + + + + + + + + + + + + + + + + + + + + + + +
+ +

index.js

+ + + + + + + + + +
+
+ 
/**
+ * HTZ A11Y TABS
+ *
+ * JavaScript scaffolding for accessible tab interfaces
+ *
+ * @module htz-a11y-tabs
+ * @license MIT
+ */
+
+import { initialize, destroyInstance, gotoTab, nextTab, prevTab } from './lib/utils';
+
+/**
+ * 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.
+ * @param {HTMLElement} container - The wrapper element around the tabs and tab panels
+ * @param {Boolean} rtl - Determine if the tab interface should be right-to-left
+ * @param {String} [tablistSelector='ul'] - The tablist's selector.
+ * @param {String} [tabpanelSelector='section'] - The tabpanels' selector.
+ * @param {Integer} [activeTab=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 initialized
+ * @fires module:htz-a11y-tabs~a11y-tabs:destroy - Fired from `container` after
+ *    a tab interface has been destroyed
+ * @fires 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.
+ * @fires module:htz-a11y-tabs~a11y-tabs:after-select - Fired from `container`
+ *    after a tab selection is applied.
+ *
+ * @return {module:htz-a11y-tabs#API}
+ */
+export default function htzA11yTabs(
+  container,
+  rtl,
+  tablistSelector = 'ul',
+  tabpanelSelector = 'section',
+  activeTab = 0
+) {
+  // State
+  const state = {
+    isInitialized: false,
+    activeTab,
+  };
+
+  let [tabs, tabpanels] = initialize(
+    container,
+    tablistSelector,
+    tabpanelSelector,
+    clickHandler,
+    keyHandler,
+    activeTab
+  );
+
+  init(activeTab);
+
+
+  /* ---- EVENT HANDLERS ----- */
+  /**
+   * Change focus between tabs with arrow keys
+   *
+   * @param {Object} evt - A keyboard event object.
+   */
+  function keyHandler(evt) {
+    const key = evt.keyCode;
+    const active = state.activeTab;
+    const back = key === (rtl ? 39 : 37) || key === 38;
+    const forward = key === (rtl ? 37 : 39) || key === 40;
+
+    if (back) state.activeTab = prevTab(container, tabs, tabpanels, active, false);
+    else if (forward) state.activeTab = nextTab(container, tabs, tabpanels, active, false);
+
+    if ([undefined, null, false].indexOf(state.activeTab) >= 0) state.activeTab = active;
+  }
+
+  function clickHandler(evt) {
+    evt.preventDefault();
+
+    const targetIndex = tabs.indexOf(evt.target);
+    const active = state.activeTab;
+
+    state.activeTab = gotoTab(targetIndex, container, tabs, tabpanels, active, true);
+
+    if ([undefined, null, false].indexOf(state.activeTab) >= 0) state.activeTab = active;
+  }
+
+
+  /* ---- Instance methods ----- */
+  /**
+   * Initialize an instance
+   * @callback module:htz-a11y-tabs#init
+   *
+   * @param {Integer} activate - The tab number to activate. Zero based.
+   */
+  function init(activate = activeTab) {
+    if (state.isInitialized) destroy();
+    ([tabs, tabpanels] = initialize(
+      container,
+      tablistSelector,
+      tabpanelSelector,
+      clickHandler,
+      keyHandler,
+      activate
+    ));
+
+    state.isInitialized = true;
+    state.activeTab = activate;
+  }
+
+  /**
+   * Remove event listeners from an instance
+   *
+   * @callback module:htz-a11y-tabs#destroy
+   */
+  function destroy() {
+    if (state.isInitialized) {
+      destroyInstance(container, clickHandler, keyHandler);
+
+      state.isInitialized = false;
+    }
+  }
+
+  /**
+   * Go to a tab
+   *
+   * @callback module:htz-a11y-tabs#goto
+   *
+   * @param {Integer} index - The index of the tab to be activated
+   * @param {Boolean} [focus] - Determine if the newly activated tab should be focused.
+   */
+  function goto(index, focus) {
+    const active = state.activeTab;
+
+    state.activeTab = gotoTab(index, container, tabs, tabpanels, active, focus);
+    if ([undefined, null, false].indexOf(state.activeTab) >= 0) state.activeTab = active;
+  }
+
+  /**
+   * Go to the next tab
+   *
+   * @callback module:htz-a11y-tabs#next
+   *
+   * @param {Boolean} [focus] - Determine if the newly activated tab should be focused.
+   */
+  function next(focus) {
+    const active = state.activeTab;
+
+    state.activeTab = nextTab(container, tabs, tabpanels, active, focus);
+    if ([undefined, null, false].indexOf(state.activeTab) >= 0) state.activeTab = active;
+  }
+
+  /**
+   * Go to the previous tab
+   *
+   * @callback module:htz-a11y-tabs#prev
+   *
+   * @param {Boolean} [focus] - Determine if the newly activated tab should be focused.
+   */
+  function prev(focus) {
+    const active = state.activeTab;
+
+    state.activeTab = prevTab(container, tabs, tabpanels, active, focus);
+
+    if ([undefined, null, false].indexOf(state.activeTab) >= 0) state.activeTab = active;
+  }
+
+  /**
+   * Instance API
+   *
+   * @typedef {Object} module:htz-a11y-tabs#API
+   *
+   * @prop {Boolean} isInitialized - Indicated if the instance is initialized
+   * @prop {Integer} isInitialized - The number of the active tab. Zero based.
+   * @prop {module:htz-a11y-tabs#init} init - Initialize an instance.
+   * @prop {module:htz-a11y-tabs#destroy} destroy - Destroy an instance.
+   * @prop {module:htz-a11y-tabs#goto} goto - Go to a specific tab
+   * @prop {module:htz-a11y-tabs#next} next - Go to the next tab
+   * @prop {module:htz-a11y-tabs#prev} previous - Go to the next tab
+   */
+  return {
+    // Status
+    isInitialized: state.isInitialized,
+    visibleTab: state.activeTab,
+
+    // Instance handling
+    init,
+    destroy,
+
+    // Instance control
+    goto,
+    next,
+    prev,
+  };
+}
+
+
+
+ + + + + +
+ +
+ + + + + + + diff --git a/docs/htz-a11y-tabs/1.0.0/lib_utils.js.html b/docs/htz-a11y-tabs/1.0.0/lib_utils.js.html new file mode 100644 index 0000000..8635461 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/lib_utils.js.html @@ -0,0 +1,342 @@ + + + + + lib/utils.js - Documentation + + + + + + + + + + + + + + + + + + + + + + + +
+ +

lib/utils.js

+ + + + + + + + + +
+
+ 
/**
+ * HTZ A11Y TABS UTILS
+ *
+ * Utility function for the htz-a11y-tabs module
+ * @module htz-a11y-tabs/utils
+ */
+
+import dispatchEvent from 'htz-dispatch-event';
+
+/**
+ * Initialize an instance
+ *
+ * @param {HTMLElement} container - The wrapper element around the tabs and tab panels
+ * @param {String} tablistSelector - The tablist's selector.
+ * @param {String} tabpanelSelector - The tabpanel's selector.
+ * @param {clickHandler} clickHandler - A callback to handle click events.
+ * @param {keyHandler} keyHandler - A callback to handle keydown events.
+ * @param {Integer} activeTab - The tab number to activate. Zero based.
+ *
+ * @fires module:htz-a11y-tabs~a11y-tabs:init
+ *
+ * @return {Array} - An array whose items are:
+ *    0: the `tablist` HTMLElement
+ *    1: An Array of the clickable tab HTMLElements
+ */
+export function initialize(
+  container,
+  tablistSelector,
+  tabpanelSelector,
+  clickHandler,
+  keyHandler,
+  activeTab
+) {
+  const tablist = container.querySelector(tablistSelector);
+  const tabpanels = Array.from(container.querySelectorAll(tabpanelSelector));
+  const tabs = Array.from(tablist.children);
+  const clickables = Array.from(tablist.querySelectorAll('a, button'));
+
+  tablist.setAttribute('role', 'tablist');
+
+  tabs.forEach((tab, index) => {
+    const clickable = tab.querySelector('a, button');
+    const tabpanel = tabpanels[index];
+    const isActive = index === activeTab;
+    const href = clickable.href;
+    const controls = href ? href.match(/#([^?&]*)/)[1] :
+      tabpanel ?
+        tabpanel.id || `tab${Math.random()}` :
+        `tab${Math.random()}`;
+
+    tab.setAttribute('role', 'presentation');
+    clickable.setAttribute('role', 'tab');
+    clickable.setAttribute('tabindex', isActive ? '0' : '-1');
+    clickable.setAttribute('aria-controls', controls);
+
+    isActive ?
+      clickable.setAttribute('aria-selected', 'true') :
+      clickable.removeAttribute('aria-selected');
+
+
+    tabpanel.setAttribute('role', 'tabpanel');
+    if (!isActive) tabpanel.setAttribute('aria-hidden', 'true');
+    if (!tabpanel.id) tabpanel.id = controls;
+
+    if (isActive) makeFocusable(tabpanel);
+
+    // Attach event listeners
+    clickable.addEventListener('keydown', keyHandler);
+    clickable.addEventListener('click', clickHandler);
+  });
+
+  /**
+   * Fired from `container` when a tab interface is initialized
+   * @event module:htz-a11y-tabs~a11y-tabs:init
+   *
+   * @type {Object}
+   *
+   * @prop {Object} detail
+   * @prop {HTMLElement} detail.activeTab - The active tab element.
+   * @prop {HTMLElement} detail.activeTabpanel - The active tabpanel element.
+   */
+  dispatchEvent(
+    container,
+    'a11y-tabs:init',
+    {
+      activeTab: clickables[activeTab],
+      activeTabpanel: tabpanels[activeTab],
+    }
+  );
+
+  return [clickables, tabpanels];
+}
+
+
+/**
+ * Remove event listeners
+ *
+ * @param {HTMLElement} container - The container wrapping the tab interface
+ * @param {clickHandler} clickHandler - A callback to handle click events.
+ * @param {keyHandler} keyHandler - A callback to handle keydown events.
+ */
+export function destroyInstance(container, clickHandler, keyHandler) {
+  container.removeEventListener('click', clickHandler);
+  container.removeEventListener('keydown', keyHandler);
+
+  /**
+   * Fired from `container` after a tab interface has been destroyed.
+   *
+   * @event module:htz-a11y-tabs~a11y-tabs:destroy
+   *
+   * @type {Object}
+   */
+  dispatchEvent(container, 'a11y-tabs:destroy');
+}
+
+
+/**
+ * Go to the next tab
+ *
+ * @param {HTMLElement} container - The container wrapping the tab interface
+ * @param {HTMLElement[]} tabs - An array containing the tab elements
+ * @param {HTMLElement[]} tabpanels - An array containing tabpanel element
+ * @param {Integer} activeTabIndex - The index of the currently active tab
+ * @param {Boolean} focus - Determine if the newly activated tab should be focused.
+ *
+ * @return {Integer} The index of the newly active tab.
+ */
+export function nextTab(container, tabs, tabpanels, activeTabIndex, focus) {
+  const targetIndex = activeTabIndex + 1;
+
+  return gotoTab(targetIndex, container, tabs, tabpanels, activeTabIndex, focus);
+}
+
+/**
+ * Go to the previous tab
+ *
+ * @param {HTMLElement} container - The container wrapping the tab interface
+ * @param {HTMLElement[]} tabs - An array containing the tab elements
+ * @param {HTMLElement[]} tabpanels - An array containing tabpanel element
+ * @param {Integer} activeTabIndex - The index of the currently active tab
+ * @param {Boolean} focus - Determine if the newly activated tab should be focused.
+ *
+ * @return {Integer} The index of the newly active tab.
+ */
+export function prevTab(container, tabs, tabpanels, activeTabIndex, focus) {
+  const targetIndex = activeTabIndex - 1;
+
+  return gotoTab(targetIndex, container, tabs, tabpanels, activeTabIndex, focus);
+}
+
+
+/**
+ * Go to a tab
+ *
+ * @param {Integer} targetIndex - The index of the tab to be activated
+ * @param {HTMLElement} container - The container wrapping the tab interface
+ * @param {HTMLElement[]} tabs - An array containing the tab elements
+ * @param {HTMLElement[]} tabpanels - An array containing tabpanel element
+ * @param {Integer} activeTabIndex - The index of the currently active tab
+ * @param {Boolean} focus - Determine if the newly activated tab should be focused.
+ *
+ * @fires module:htz-a11y-tabs~a11y-tabs:before-select
+ * @fires module:htz-a11y-tabs~a11y-tabs:after-select
+ *
+ * @return {Integer} The index of the newly active tab.
+ */
+export function gotoTab(targetIndex, container, tabs, tabpanels, activeTabIndex, focus) {
+  const currentTab = tabs[activeTabIndex];
+  const targetTab = tabs[targetIndex];
+  const currentTabpanel = tabpanels[activeTabIndex];
+  const targetTabpanel = tabpanels[targetIndex];
+
+
+  if (targetTab && targetTabpanel) {
+    /**
+     * 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:before-select
+     *
+     * @type {Object}
+     * @prop {Object} detail
+     * @prop {HTMLElement} detail.currentTab - The currently active tab
+     * @prop {HTMLElement} detail.targetTab - The tab that will be activated
+     *    after the selection is applied.
+     * @prop {HTMLElement} detail.currentTabpanel - The currently active tabpanel
+     * @prop {HTMLElement} detail.targetTabpanel - The tabpanel that will be
+     *    activated after the selection is applied.
+     */
+    const allowed = dispatchEvent(
+      container,
+      'a11y-tabs:before-select',
+      { currentTab, targetTab, currentTabpanel, targetTabpanel }
+    );
+
+    if (allowed) {
+      handleTabSwitch(currentTab, targetTab, currentTabpanel, targetTabpanel, focus);
+
+      /**
+       * Fired from `container` after a tab selection is applied.
+       *
+       * @event module:htz-a11y-tabs~a11y-tabs:after-select
+       *
+       * @type {Object}
+       * @prop {Object} detail
+       * @prop {HTMLElement} detail.prevTab - The previously active tab
+       * @prop {HTMLElement} detail.targetTab - The tab that has been activated
+       *    by the selection.
+       * @prop {HTMLElement} detail.prevTabpanel - The previously active tabpanel
+       * @prop {HTMLElement} detail.targetTabpanel - The tabpanel that will be activated
+       *    after the selection is applied.
+       */
+      dispatchEvent(
+        container,
+        'a11y-tabs:after-select',
+        {
+          prevTab: currentTab,
+          targetTab,
+          prevTabpanel: currentTabpanel,
+          targetTabpanel,
+        }
+      );
+
+      return targetIndex;
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * Make the first child of an element focusable. If the element has
+ * no children, make the element itself focusable.
+ *
+ * @param {HTMLElement} elem - The Element to target
+ *
+ * @return {HTMLElement} - The focusable element.
+ *
+ * @private
+ */
+export function makeFocusable(elem) {
+  const firstChild = elem.firstElementChild;
+
+  (firstChild || elem).setAttribute('tabindex', '0');
+
+  return firstChild || elem;
+}
+
+/**
+ * Handle DOM changes related to switching tabs
+ *
+ * @param {HTMLElement} currentTab - The currently selected tab
+ * @param {HTMLElement} targetTab - The tab to be selected
+ * @param {HTMLElement} currentTabpanel - The currently selected tabpanel
+ * @param {HTMLElement} targetTabpanel - The tabpanel to be selected
+ * @param {Boolean} moveFocus - Determine if the newly activated tab should be focused.
+ *
+ * @private
+ */
+function handleTabSwitch(currentTab, targetTab, currentTabpanel, targetTabpanel, moveFocus) {
+  targetTab.setAttribute('tabindex', '0');
+  targetTab.setAttribute('aria-selected', 'true');
+  targetTab.focus();
+
+  currentTab.setAttribute('tabindex', '-1');
+  currentTab.removeAttribute('aria-selected');
+
+  currentTabpanel.setAttribute('aria-hidden', 'true');
+  targetTabpanel.removeAttribute('aria-hidden');
+
+  const focusable = makeFocusable(targetTabpanel);
+
+  if (moveFocus) focusable.focus();
+}
+
+
+
+ + + + + +
+ +
+ + + + + + + diff --git a/docs/htz-a11y-tabs/1.0.0/module-htz-a11y-tabs.html b/docs/htz-a11y-tabs/1.0.0/module-htz-a11y-tabs.html new file mode 100644 index 0000000..a208e8b --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/module-htz-a11y-tabs.html @@ -0,0 +1,2959 @@ + + + + + htz-a11y-tabs - Documentation + + + + + + + + + + + + + + + + + + + + + + + +
+ +

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
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDefaultDescription
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:168 + +
+ + + +

+ API +

+ + + + +
+

Instance API

+
+ + +
+ + + + + + + + +
+ + + index.js:168 + +
+ + + + + +
Properties:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
isInitialized + + +Boolean + + + +

Indicated if the instance is initialized

isInitialized + + +Integer + + + +

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() + +

+ + + + + + + + + + + + + + + +
+

Remove event listeners from an instance

+
+ + + + + + + + +
+ + + + + + + + + + + + +
+ + + index.js:111 + +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + index.js:124 + +
+ + + + + + + + +

+ goto(index, focusopt) + +

+ + + + + + + + + + + + + + + +
+

Go to a tab

+
+ + + + + + + + +
+ + + + + + + + + + + + +
+ + + index.js:124 + +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDescription
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(activate) + +

+ + + + + + + + + + + + + + + +
+

Initialize an instance

+
+ + + + + + + + +
+ + + + + + + + + + + + +
+ + + index.js:90 + +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
activate + + +Integer + + + +

The tab number to activate. Zero based.

+ +
+ + + + + + + + + + + + + + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + index.js:139 + +
+ + + + + + + + +

+ next(focusopt) + +

+ + + + + + + + + + + + + + + +
+

Go to the next tab

+
+ + + + + + + + +
+ + + + + + + + + + + + +
+ + + index.js:139 + +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDescription
focus + + +Boolean + + + + + + <optional>
+ + + + + +

Determine if the newly activated tab should be focused.

+ +
+ + + + + + + + + + + + + + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + index.js:153 + +
+ + + + + + + + +

+ prev(focusopt) + +

+ + + + + + + + + + + + + + + +
+

Go to the previous tab

+
+ + + + + + + + +
+ + + + + + + + + + + + +
+ + + index.js:153 + +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeAttributesDescription
focus + + +Boolean + + + + + + <optional>
+ + + + + +

Determine if the newly activated tab should be focused.

+ +
+ + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + +

Events

+ + + +
+ + + + + + +
+ + + utils.js:199 + +
+ + + + + + + + +

+ a11y-tabs:after-select + +

+ + + + + + + + + + + + + + + +
+

Fired from container after a tab selection is applied.

+
+ + + + + + + + +
+ + +
Type:
+
    +
  • + +Object + + +
    • +
+ + + + + + + + + + + +
+ + + utils.js:199 + +
+ + + + + +
Properties:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
detail + + +Object + + + + +
Properties
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
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:175 + +
+ + + + + + + + +

+ 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:175 + +
+ + + + + +
Properties:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
detail + + +Object + + + + +
Properties
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
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:106 + +
+ + + + + + + + +

+ a11y-tabs:destroy + +

+ + + + + + + + + + + + + + + +
+

Fired from container after a tab interface has been destroyed.

+
+ + + + + + + + +
+ + +
Type:
+
    +
  • + +Object + + +
    • +
+ + + + + + + + + + + +
+ + + utils.js:106 + +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + utils.js:72 + +
+ + + + + + + + +

+ a11y-tabs:init + +

+ + + + + + + + + + + + + + + +
+

Fired from container when a tab interface is initialized

+
+ + + + + + + + +
+ + +
Type:
+
    +
  • + +Object + + +
    • +
+ + + + + + + + + + + +
+ + + utils.js:72 + +
+ + + + + +
Properties:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
detail + + +Object + + + + +
Properties
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
activeTab + + +HTMLElement + + + +

The active tab element.

activeTabpanel + + +HTMLElement + + + +

The active tabpanel element.

+ +
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + +
+ +
+ + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/docs/htz-a11y-tabs/1.0.0/module-htz-a11y-tabs_utils.html b/docs/htz-a11y-tabs/1.0.0/module-htz-a11y-tabs_utils.html new file mode 100644 index 0000000..f046c71 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/module-htz-a11y-tabs_utils.html @@ -0,0 +1,2219 @@ + + + + + htz-a11y-tabs/utils - Documentation + + + + + + + + + + + + + + + + + + + + + + + +
+ +

htz-a11y-tabs/utils

+ + + + + + + + +
+ + + +
+ +

Module: htz-a11y-tabs/utils

+ + + + + + +
+
Members
+
+
+
Methods
+
+ +
+
+ + +

HTZ A11Y TABS UTILS

+

Utility function for the htz-a11y-tabs module

+ + + + +
+ + + + + + +
+ + + utils.js:1 + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + +
+ + + utils.js:1 + +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + +
+ + + + + + + + + + + + + + +

Methods

+ + + +
+ + + + + + +
+ + + utils.js:102 + +
+ + + + + + + + +

+ (static) destroyInstance(container, clickHandler, keyHandler) + +

+ + + + + + + + + + + + + + + +
+

Remove event listeners

+
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
container + + +HTMLElement + + + +

The container wrapping the tab interface

clickHandler + + +clickHandler + + + +

A callback to handle click events.

keyHandler + + +keyHandler + + + +

A callback to handle keydown events.

+ +
+ + + + + + + + + + + + + + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + utils.js:167 + +
+ + + + + + + + +

+ (static) gotoTab(targetIndex, container, tabs, tabpanels, activeTabIndex, focus) → {Integer} + +

+ + + + + + + + + + + + + + + +
+

Go to a tab

+
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
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:
+ + + + + + + + + + +
+
Returns
+ + +
+

The index of the newly active tab.

+
+ + + +
+
+ Type +
+
+ +Integer + + +
+
+ + +
+ + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + utils.js:26 + +
+ + + + + + + + +

+ (static) initialize(container, tablistSelector, tabpanelSelector, clickHandler, keyHandler, activeTab) → {Array} + +

+ + + + + + + + + + + + + + + +
+

Initialize an instance

+
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
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 tablist HTMLElement + 1: An Array of the clickable tab HTMLElements
    • +
+
+ + + +
+
+ Type +
+
+ +Array + + +
+
+ + +
+ + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + utils.js:241 + +
+ + + + + + + + +

+ (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
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
elem + + +HTMLElement + + + +

The Element to target

+ +
+ + + + + + + + + + + + + +
+
Returns
+ + +
+
    +
  • The focusable element.
    • +
+
+ + + +
+
+ Type +
+
+ +HTMLElement + + +
+
+ + +
+ + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + utils.js:128 + +
+ + + + + + + + +

+ (static) nextTab(container, tabs, tabpanels, activeTabIndex, focus) → {Integer} + +

+ + + + + + + + + + + + + + + +
+

Go to the next tab

+
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
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 + + +
+
+ + +
+ + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + utils.js:145 + +
+ + + + + + + + +

+ (static) prevTab(container, tabs, tabpanels, activeTabIndex, focus) → {Integer} + +

+ + + + + + + + + + + + + + + +
+

Go to the previous tab

+
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
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 + + +
+
+ + +
+ + + + + + + +
+ + +
+ + + +
+ + + + + + +
+ + + utils.js:260 + +
+ + + + + + + + +

+ (private, inner) handleTabSwitch(currentTab, targetTab, currentTabpanel, targetTabpanel, moveFocus) + +

+ + + + + + + + + + + + + + + +
+

Handle DOM changes related to switching tabs

+
+ + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+
Parameters
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
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.

+ +
+ + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + +
+ +
+ + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/docs/htz-a11y-tabs/1.0.0/screenshot.png b/docs/htz-a11y-tabs/1.0.0/screenshot.png new file mode 100644 index 0000000..eb3e4f3 Binary files /dev/null and b/docs/htz-a11y-tabs/1.0.0/screenshot.png differ diff --git a/docs/htz-a11y-tabs/1.0.0/scripts/linenumber.js b/docs/htz-a11y-tabs/1.0.0/scripts/linenumber.js new file mode 100644 index 0000000..8d52f7e --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/scripts/linenumber.js @@ -0,0 +1,25 @@ +/*global document */ +(function() { + var source = document.getElementsByClassName('prettyprint source linenums'); + var i = 0; + var lineNumber = 0; + var lineId; + var lines; + var totalLines; + var anchorHash; + + if (source && source[0]) { + anchorHash = document.location.hash.substring(1); + lines = source[0].getElementsByTagName('li'); + totalLines = lines.length; + + for (; i < totalLines; i++) { + lineNumber++; + lineId = 'line' + lineNumber; + lines[i].id = lineId; + if (lineId === anchorHash) { + lines[i].className += ' selected'; + } + } + } +})(); diff --git a/docs/htz-a11y-tabs/1.0.0/scripts/prettify/Apache-License-2.0.txt b/docs/htz-a11y-tabs/1.0.0/scripts/prettify/Apache-License-2.0.txt new file mode 100644 index 0000000..d645695 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/scripts/prettify/Apache-License-2.0.txt @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/docs/htz-a11y-tabs/1.0.0/scripts/prettify/lang-css.js b/docs/htz-a11y-tabs/1.0.0/scripts/prettify/lang-css.js new file mode 100644 index 0000000..041e1f5 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/scripts/prettify/lang-css.js @@ -0,0 +1,2 @@ +PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n "]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com", +/^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]); diff --git a/docs/htz-a11y-tabs/1.0.0/scripts/prettify/prettify.js b/docs/htz-a11y-tabs/1.0.0/scripts/prettify/prettify.js new file mode 100644 index 0000000..eef5ad7 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/scripts/prettify/prettify.js @@ -0,0 +1,28 @@ +var q=null;window.PR_SHOULD_USE_CONTINUATION=!0; +(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a= +[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;ci[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m), +l=[],p={},d=0,g=e.length;d=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/, +q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/, +q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g, +"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a), +a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e} +for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], +"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"], +H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"], +J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+ +I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]), +["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css", +/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}), +["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes", +hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p=0){var k=k.match(g),f,b;if(b= +!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p ul { + padding: 0 10px; +} + +nav > ul > li > a { + color: #000; +} + +nav ul ul { + margin-bottom: 10px +} + +nav ul ul a { + color: hsl(207, 1%, 60%); + border-left: 1px solid hsl(207, 10%, 86%); +} + +nav ul ul a, +nav ul ul a:active { + padding-left: 20px +} + +nav h2 { + font-size: 18px; + text-transform: uppercase; + margin: 0; + padding: 0; +} + +nav > h2 > a { + display: block; + margin: 10px 0 -10px; + color: hsl(202, 71%, 50%) !important; +} + +footer { + color: hsl(0, 0%, 28%); + margin-left: 250px; + display: block; + padding: 15px; + font-style: italic; + font-size: 90%; +} + +.ancestors { + color: #999 +} + +.ancestors a { + color: #999 !important; + text-decoration: none; +} + +.clear { + clear: both +} + +.important { + font-weight: bold; + color: #950B02; +} + +.yes-def { + text-indent: -1000px +} + +.type-signature { + color: #aaa +} + +.name, .signature { + font-family: Consolas, Monaco, 'Andale Mono', monospace +} + +.details { + margin-top: 14px; + border-left: 2px solid #DDD; + line-height: 30px; +} + +.details dt { + width: 120px; + float: left; + padding-left: 10px; +} + +.details dd { + margin-left: 70px +} + +.details ul { + margin: 0 +} + +.details ul { + list-style-type: none +} + +.details li { + margin-left: 30px +} + +.details pre.prettyprint { + margin: 0 +} + +.details .object-value { + padding-top: 0 +} + +.description { + margin-bottom: 1em; + margin-top: 1em; +} + +.code-caption { + font-style: italic; + font-size: 107%; + margin: 0; +} + +.prettyprint { + font-size: 13px; + border: 1px solid #ddd; + border-radius: 3px; + box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.05); + overflow: auto; +} + +.prettyprint.source { + width: inherit +} + +.prettyprint code { + font-size: 100%; + line-height: 18px; + display: block; + /*margin: 0 30px;*/ + /*background-color: #fff;*/ + /*color: #4D4E53;*/ +} + +.prettyprint > code { + padding: 15px +} + +.prettyprint .linenums code { + padding: 0 15px +} + +.prettyprint .linenums li:first-of-type code { + padding-top: 15px +} + +.prettyprint code span.line { + display: inline-block +} + +.prettyprint.linenums { + padding-left: 70px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.prettyprint.linenums ol { + padding-left: 0 +} + +.prettyprint.linenums li { + border-left: 3px #ddd solid +} + +.prettyprint.linenums li.selected, .prettyprint.linenums li.selected * { + background-color: lightyellow +} + +.prettyprint.linenums li * { + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} + +.params, .props { + border-spacing: 0; + border: 1px solid #ddd; + border-collapse: collapse; + border-radius: 3px; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + width: 100%; + font-size: 14px; +} + +.params .name, .props .name, .name code { + color: #4D4E53; + font-family: Consolas, Monaco, 'Andale Mono', monospace; + font-size: 100%; +} + +.params td, .params th, .props td, .props th { + margin: 0px; + text-align: left; + vertical-align: top; + padding: 10px; + display: table-cell; +} + +dl.param-type { + /* border-bottom: 1px solid hsl(0, 0%, 87%); + margin-bottom: 30px; + padding-bottom: 30px; */ +} + +.param-type dt, .param-type dd { + display: inline-block; + padding-right: 20px; +} + +.param-type dd { + font-family: Consolas, Monaco, 'Andale Mono', monospace; +} + +.error-list dt { + font-family: Consolas, Monaco, 'Andale Mono', monospace; + font-weight: normal; + color: #999; +} + +.disabled { + color: #454545 +} + +/* navicon button */ +.navicon-button { + display: none; + position: relative; + padding: 2.0625rem 1.5rem; + transition: 0.25s; + cursor: pointer; + user-select: none; + opacity: .8; +} +.navicon-button .navicon:before, .navicon-button .navicon:after { + transition: 0.25s; +} +.navicon-button:hover { + transition: 0.5s; + opacity: 1; +} +.navicon-button:hover .navicon:before, .navicon-button:hover .navicon:after { + transition: 0.25s; +} +.navicon-button:hover .navicon:before { + top: .825rem; +} +.navicon-button:hover .navicon:after { + top: -.825rem; +} + +/* navicon */ +.navicon { + position: relative; + width: 2.5em; + height: .3125rem; + background: #000; + transition: 0.3s; + border-radius: 2.5rem; +} +.navicon:before, .navicon:after { + display: block; + content: ""; + height: .3125rem; + width: 2.5rem; + background: #000; + position: absolute; + z-index: -1; + transition: 0.3s 0.25s; + border-radius: 1rem; +} +.navicon:before { + top: .625rem; +} +.navicon:after { + top: -.625rem; +} + +/* open */ +.nav-trigger:checked + label:not(.steps) .navicon:before, +.nav-trigger:checked + label:not(.steps) .navicon:after { + top: 0 !important; +} + +.nav-trigger:checked + label .navicon:before, +.nav-trigger:checked + label .navicon:after { + transition: 0.5s; +} + +/* Minus */ +.nav-trigger:checked + label { + transform: scale(0.75); +} + +/* × and + */ +.nav-trigger:checked + label.plus .navicon, +.nav-trigger:checked + label.x .navicon { + background: transparent; +} + +.nav-trigger:checked + label.plus .navicon:before, +.nav-trigger:checked + label.x .navicon:before { + transform: rotate(-45deg); + background: #FFF; +} + +.nav-trigger:checked + label.plus .navicon:after, +.nav-trigger:checked + label.x .navicon:after { + transform: rotate(45deg); + background: #FFF; +} + +.nav-trigger:checked + label.plus { + transform: scale(0.75) rotate(45deg); +} + +.nav-trigger:checked ~ nav { + left: 0 !important; +} + +.nav-trigger:checked ~ .overlay { + display: block; +} + +.nav-trigger { + position: fixed; + top: 0; + clip: rect(0, 0, 0, 0); +} + +.overlay { + display: none; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + background: hsla(0, 0%, 0%, 0.5); + z-index: 1; +} + +@media only screen and (min-width: 320px) and (max-width: 680px) { + body { + overflow-x: hidden; + } + + nav { + background: #FFF; + width: 250px; + height: 100%; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: -250px; + z-index: 3; + padding: 0 10px; + transition: left 0.2s; + } + + .navicon-button { + display: inline-block; + position: fixed; + top: 1.5em; + right: 0; + z-index: 2; + } + + #main { + width: 100%; + min-width: 360px; + } + + #main h1.page-title { + margin: 1em 0; + } + + #main section { + padding: 0; + } + + footer { + margin-left: 0; + } +} + + + + + +/** custom override **/ + +section article hr { + margin-left: -30px; + margin-right: -30px; + color: #eee; +} + +h1.page-title { + font-size: 3em; + float: right; + text-align: right; + color: #f5f5f5; + margin: 15px; + font-style: italic; + font-family: Consolas, Monaco, 'Andale Mono', monospace; +} + +h2 { + color: #666; + text-transform: uppercase; + margin-bottom: 1em; + clear: both; +} + +h2 span.ancestors { + font-size: 0.5em; + display: block; +} + +h2 span.ancestors a { + color: #ccc !important; +} + +div#main { + font-size: 0.8em; +} + +div#main section { + clear: both; +} + +h3.constructor, h3.subsection-title { + border-top: 1px solid #ddd; + margin-left: -30px; + margin-right: -30px; + padding: 2em 30px 1em 30px; + color: #666; + font-size: 1.4em; + text-transform: uppercase; +} + +h4.name { + margin-left: -30px; + margin-right: -30px; + padding: 2em 30px 0em 30px; + border-top: 1px solid #eee; + font-size: 1.6em; +} + +div#main { + padding-top: 10px; + padding-bottom: 30px; +} + +.pull-right code.source-link { + margin-top: 20px; +} + +div.source-link-container { + padding-top: 2em; +} + +code.source-link i { + padding-left: 7px; + color: #aaa; +} + +code.source-link a { + padding-left: 7px; + padding-right: 10px; + color: #aaa; +} + +.method-details, .member-details { + padding-bottom: 30px; +} + +nav.nav { + margin-top: 30px; +} + +h4.name a { + text-decoration: none; + color: #444; +} + +h4.name span.type-signature a { + text-decoration: none; + color: #99d; +} + +header.tutorial-header { + float: right; + clear: both; +} +header.tutorial-header ul { + list-style: none; + margin: 0; + padding: 0; + text-align: right; + margin-bottom: 30px; +} + +section.tutorial article { + border-top: solid 1px #eee; + margin-left: -30px; + margin-right: -30px; + padding-left: 30px; + padding-right: 30px; + clear: both; +} + +a { + color: #77d; +} + +.methods-members ul { + margin:0; + padding:0; + list-style:none; + color: #ccc; +} +.methods-members li { + display:inline-block; +} +.methods-members li + li::before { + content: " | "; +} + + +/* BOOTSTRAP */ + +.bs-callout { + padding: 20px; + margin: 20px 0; + border: 1px solid #eee; + border-left-width: 5px; + border-radius: 3px; +} +.bs-callout h5 { + margin-top: 0; + margin-bottom: 5px; +} +.bs-callout p:last-child { + margin-bottom: 0; +} +.bs-callout code { + border-radius: 3px; +} +.bs-callout+.bs-callout { + margin-top: -5px; +} +.bs-callout-default { + border-left-color: #777; +} +.bs-callout-default h5 { + color: #777; +} +.bs-callout-primary { + border-left-color: #428bca; +} +.bs-callout-primary h5 { + color: #428bca; +} +.bs-callout-success { + border-left-color: #5cb85c; +} +.bs-callout-success h5 { + color: #5cb85c; +} +.bs-callout-danger { + border-left-color: #d9534f; +} +.bs-callout-danger h5 { + color: #d9534f; +} +.bs-callout-warning { + border-left-color: #f0ad4e; +} +.bs-callout-warning h5 { + color: #f0ad4e; +} +.bs-callout-info { + border-left-color: #5bc0de; +} +.bs-callout-info h5 { + color: #5bc0de; +} +.bs-callout-rpc { + border-left-color: #FF69B4; +} +.bs-callout-rpc h5 { + color: #FF69B4; +} +.label-rpc { + background-color: #FF69B4; +} +.bs-callout-api { + border-left-color: #800080; +} +.bs-callout-api h5 { + color: #800080; +} +.label-api { + background-color: #800080; +} diff --git a/docs/htz-a11y-tabs/1.0.0/styles/prettify-jsdoc.css b/docs/htz-a11y-tabs/1.0.0/styles/prettify-jsdoc.css new file mode 100644 index 0000000..834a866 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/styles/prettify-jsdoc.css @@ -0,0 +1,111 @@ +/* JSDoc prettify.js theme */ + +/* plain text */ +.pln { + color: #000000; + font-weight: normal; + font-style: normal; +} + +/* string content */ +.str { + color: hsl(104, 100%, 24%); + font-weight: normal; + font-style: normal; +} + +/* a keyword */ +.kwd { + color: #000000; + font-weight: bold; + font-style: normal; +} + +/* a comment */ +.com { + font-weight: normal; + font-style: italic; +} + +/* a type name */ +.typ { + color: #000000; + font-weight: normal; + font-style: normal; +} + +/* a literal value */ +.lit { + color: #006400; + font-weight: normal; + font-style: normal; +} + +/* punctuation */ +.pun { + color: #000000; + font-weight: bold; + font-style: normal; +} + +/* lisp open bracket */ +.opn { + color: #000000; + font-weight: bold; + font-style: normal; +} + +/* lisp close bracket */ +.clo { + color: #000000; + font-weight: bold; + font-style: normal; +} + +/* a markup tag name */ +.tag { + color: #006400; + font-weight: normal; + font-style: normal; +} + +/* a markup attribute name */ +.atn { + color: #006400; + font-weight: normal; + font-style: normal; +} + +/* a markup attribute value */ +.atv { + color: #006400; + font-weight: normal; + font-style: normal; +} + +/* a declaration */ +.dec { + color: #000000; + font-weight: bold; + font-style: normal; +} + +/* a variable name */ +.var { + color: #000000; + font-weight: normal; + font-style: normal; +} + +/* a function name */ +.fun { + color: #000000; + font-weight: bold; + font-style: normal; +} + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { + margin-top: 0; + margin-bottom: 0; +} diff --git a/docs/htz-a11y-tabs/1.0.0/styles/prettify-tomorrow.css b/docs/htz-a11y-tabs/1.0.0/styles/prettify-tomorrow.css new file mode 100644 index 0000000..81e74d1 --- /dev/null +++ b/docs/htz-a11y-tabs/1.0.0/styles/prettify-tomorrow.css @@ -0,0 +1,132 @@ +/* Tomorrow Theme */ +/* Original theme - https://github.com/chriskempson/tomorrow-theme */ +/* Pretty printing styles. Used with prettify.js. */ +/* SPAN elements with the classes below are added by prettyprint. */ +/* plain text */ +.pln { + color: #4d4d4c; } + +@media screen { + /* string content */ + .str { + color: hsl(104, 100%, 24%); } + + /* a keyword */ + .kwd { + color: hsl(240, 100%, 50%); } + + /* a comment */ + .com { + color: hsl(0, 0%, 60%); } + + /* a type name */ + .typ { + color: hsl(240, 100%, 32%); } + + /* a literal value */ + .lit { + color: hsl(240, 100%, 40%); } + + /* punctuation */ + .pun { + color: #000000; } + + /* lisp open bracket */ + .opn { + color: #000000; } + + /* lisp close bracket */ + .clo { + color: #000000; } + + /* a markup tag name */ + .tag { + color: #c82829; } + + /* a markup attribute name */ + .atn { + color: #f5871f; } + + /* a markup attribute value */ + .atv { + color: #3e999f; } + + /* a declaration */ + .dec { + color: #f5871f; } + + /* a variable name */ + .var { + color: #c82829; } + + /* a function name */ + .fun { + color: #4271ae; } } +/* Use higher contrast and text-weight for printable form. */ +@media print, projection { + .str { + color: #060; } + + .kwd { + color: #006; + font-weight: bold; } + + .com { + color: #600; + font-style: italic; } + + .typ { + color: #404; + font-weight: bold; } + + .lit { + color: #044; } + + .pun, .opn, .clo { + color: #440; } + + .tag { + color: #006; + font-weight: bold; } + + .atn { + color: #404; } + + .atv { + color: #060; } } +/* Style */ +/* +pre.prettyprint { + background: white; + font-family: Consolas, Monaco, 'Andale Mono', monospace; + font-size: 12px; + line-height: 1.5; + border: 1px solid #ccc; + padding: 10px; } +*/ + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { + margin-top: 0; + margin-bottom: 0; } + +/* IE indents via margin-left */ +li.L0, +li.L1, +li.L2, +li.L3, +li.L4, +li.L5, +li.L6, +li.L7, +li.L8, +li.L9 { + /* */ } + +/* Alternate shading for lines */ +li.L1, +li.L3, +li.L5, +li.L7, +li.L9 { + /* */ } diff --git a/gh-pages.sh b/gh-pages.sh new file mode 100755 index 0000000..61cfe42 --- /dev/null +++ b/gh-pages.sh @@ -0,0 +1,5 @@ +#!/bin/bash +if [ "`git branch --list --remote origin/gh-pages`" ] +then + git push origin --delete gh-pages +fi diff --git a/gulpfile.babel.js b/gulpfile.babel.js new file mode 100644 index 0000000..931ed7b --- /dev/null +++ b/gulpfile.babel.js @@ -0,0 +1,97 @@ +import gulp from 'gulp'; +import gulpLoadPlugins from 'gulp-load-plugins'; +import browserSync from 'browser-sync'; +import del from 'del'; +import jspm from 'jspm'; + +import pkg from './package.json'; + +const $ = gulpLoadPlugins(); +const reload = browserSync.reload; + +gulp.task('jspm', ['eslint'], (cb) => { + const builder = new jspm.Builder(); + + builder.buildStatic( + 'js/head', + 'js/dist/bodyBundle.js', + { + minify: false, + format: 'global', + globalName: 'Achbar', + sourceMaps: true, + } + ).then( + builder.buildStatic( + 'js/head', + 'js/dist/bodyBundle.min.js', + { + minify: true, + format: 'global', + globalName: 'Achbar', + sourceMaps: true, + } + ) + ) + .then(() => { + cb(); + }) + .catch((err) => { + console.log(err); // eslint-disable-line no-console + cb(); + }); +}); + +gulp.task('jspm:watch', () => { + gulp.watch('js/body/**/*', ['jspm:body']); +}); + +function eslint(files, options) { + return () => gulp.src(files) + .pipe(reload({ stream: true, once: true })) + .pipe($.eslint(options)) + .pipe($.eslint.format()) + .pipe($.if(!browserSync.active, $.eslint.failAfterError())); +} + +gulp.task('eslint', eslint(['**/*.js'])); + +gulp.task('jsdoc', $.shell.task([ + 'node_modules/.bin/jsdoc --verbose -c jsdoc.conf.json', +])); + +// Push documentation to github +gulp.task('gh-pages', $.shell.task([ + './gh-pages.sh', + `git subtree push --prefix docs/htz-a11y-tabs/${pkg.version} origin gh-pages`, +])); + +gulp.task('cleanDocs', del.bind(null, ['docs'])); + +gulp.task('serve', () => { + browserSync({ + notify: true, + port: 9001, + server: { + baseDir: './', + }, + }); + + gulp.watch(['src/**/*.js', 'test.js', 'index.html', 'test.css'], ['eslint']).on('change', reload); +}); + +gulp.task('serve:docs', ['jsdoc'], () => { + browserSync({ + notify: true, + port: 9002, + server: { + baseDir: `./docs/htz-a11y-tabs/${pkg.version}`, + }, + }); + + gulp.watch(['src/**/*.js', 'README.md'], ['jsdoc']).on('change', reload); +}); + + +// Build for deployment +gulp.task('default', ['serve']); diff --git a/index.html b/index.html new file mode 100644 index 0000000..257891a --- /dev/null +++ b/index.html @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + +
+ +
+

This is tabpanel 1

+

+ Adipisicing odio dolores ullam minus laudantium. Quibusdam a porro similique voluptates ullam architecto ipsam hic. Eos sed voluptas distinctio accusantium vel minima. Numquam ducimus necessitatibus reprehenderit officia voluptate laboriosam ab. + Consectetur repellendus vitae totam quam veritatis laudantium impedit! Repellat maiores voluptatibus minima ex possimus eius vel temporibus vitae commodi. Aperiam explicabo sed hic eligendi veritatis sint officiis quos error, animi. + Lorem saepe expedita explicabo cumque sunt eius consectetur, laborum, amet vel ipsa dicta dolorem. Veritatis mollitia atque reiciendis laboriosam quos harum ab provident accusamus. Modi odio esse similique pariatur quis! +

+
+
+

This is tabpanel 2

+

+ Amet fuga pariatur non dolore ullam eaque deleniti. Blanditiis vitae magni temporibus odio natus. Earum delectus iusto iusto distinctio cumque laudantium sequi ipsa soluta. Odio laborum deleniti voluptas accusantium facilis! + Adipisicing quam inventore labore dolores pariatur sint odio? Iste quam ab deserunt odio a! Nulla tempora nihil animi neque optio placeat cum sint similique atque id. Soluta debitis cupiditate sit. + Elit tempora voluptatem recusandae sint nesciunt obcaecati inventore eum sed blanditiis. Architecto provident omnis a possimus aliquid voluptatum eos, dolores deserunt veritatis fugiat quo minus officiis. Quo amet soluta sint! +

+
+
+

This is tabpanel 3

+

+ Ipsum earum animi repellendus placeat iusto optio commodi necessitatibus? Minus magnam quas maiores recusandae laborum. Iste distinctio consequuntur obcaecati facere alias dolore! Et voluptatum amet inventore ea eveniet. Laborum aspernatur. + Adipisicing repellat inventore ut neque repellendus, fugiat soluta quaerat ipsam neque ipsum aut quis ab dolorem, voluptate deserunt aliquam? Impedit facere eius ducimus quas eligendi eum sapiente voluptatem? Esse expedita. + Lorem ipsam ea nostrum accusamus similique. Facere accusamus nesciunt laudantium animi esse porro, veniam. Optio dolores deleniti alias officiis est nemo magnam officia officiis. Unde aliquam ratione eum commodi incidunt. +

+
+
+

This is tabpanel 4

+

+ Sit nobis perferendis autem ipsum impedit vel dolorum consequatur. Libero sequi vitae eos sunt molestias. Modi eaque eos perferendis earum excepturi. Repellat unde officia veniam consequuntur laudantium! Facilis ipsam sunt. + Amet aspernatur dolorem possimus voluptate facilis! Ipsum quod a sed alias doloremque. Quidem magni nemo praesentium numquam ea aut amet illum. Ducimus molestias molestias explicabo illo amet rem tempore. Laborum. + Adipisicing culpa nihil dolorum quo laboriosam molestias! Iusto possimus doloribus cum vel corrupti laboriosam? Officiis ut ipsa ad culpa consequatur sequi, voluptatem! Porro dolorem temporibus harum quisquam ullam! Iste at. +

+
+
+ + + +
+ +
+

This is tabpanel 1

+

+ Adipisicing odio dolores ullam minus laudantium. Quibusdam a porro similique voluptates ullam architecto ipsam hic. Eos sed voluptas distinctio accusantium vel minima. Numquam ducimus necessitatibus reprehenderit officia voluptate laboriosam ab. + Consectetur repellendus vitae totam quam veritatis laudantium impedit! Repellat maiores voluptatibus minima ex possimus eius vel temporibus vitae commodi. Aperiam explicabo sed hic eligendi veritatis sint officiis quos error, animi. + Lorem saepe expedita explicabo cumque sunt eius consectetur, laborum, amet vel ipsa dicta dolorem. Veritatis mollitia atque reiciendis laboriosam quos harum ab provident accusamus. Modi odio esse similique pariatur quis! +

+
+
+

This is tabpanel 2

+

+ Amet fuga pariatur non dolore ullam eaque deleniti. Blanditiis vitae magni temporibus odio natus. Earum delectus iusto iusto distinctio cumque laudantium sequi ipsa soluta. Odio laborum deleniti voluptas accusantium facilis! + Adipisicing quam inventore labore dolores pariatur sint odio? Iste quam ab deserunt odio a! Nulla tempora nihil animi neque optio placeat cum sint similique atque id. Soluta debitis cupiditate sit. + Elit tempora voluptatem recusandae sint nesciunt obcaecati inventore eum sed blanditiis. Architecto provident omnis a possimus aliquid voluptatum eos, dolores deserunt veritatis fugiat quo minus officiis. Quo amet soluta sint! +

+
+
+

This is tabpanel 3

+

+ Ipsum earum animi repellendus placeat iusto optio commodi necessitatibus? Minus magnam quas maiores recusandae laborum. Iste distinctio consequuntur obcaecati facere alias dolore! Et voluptatum amet inventore ea eveniet. Laborum aspernatur. + Adipisicing repellat inventore ut neque repellendus, fugiat soluta quaerat ipsam neque ipsum aut quis ab dolorem, voluptate deserunt aliquam? Impedit facere eius ducimus quas eligendi eum sapiente voluptatem? Esse expedita. + Lorem ipsam ea nostrum accusamus similique. Facere accusamus nesciunt laudantium animi esse porro, veniam. Optio dolores deleniti alias officiis est nemo magnam officia officiis. Unde aliquam ratione eum commodi incidunt. +

+
+
+

This is tabpanel 4

+

+ Sit nobis perferendis autem ipsum impedit vel dolorum consequatur. Libero sequi vitae eos sunt molestias. Modi eaque eos perferendis earum excepturi. Repellat unde officia veniam consequuntur laudantium! Facilis ipsam sunt. + Amet aspernatur dolorem possimus voluptate facilis! Ipsum quod a sed alias doloremque. Quidem magni nemo praesentium numquam ea aut amet illum. Ducimus molestias molestias explicabo illo amet rem tempore. Laborum. + Adipisicing culpa nihil dolorum quo laboriosam molestias! Iusto possimus doloribus cum vel corrupti laboriosam? Officiis ut ipsa ad culpa consequatur sequi, voluptatem! Porro dolorem temporibus harum quisquam ullam! Iste at. +

+
+
+ + + + diff --git a/jsdoc.conf.json b/jsdoc.conf.json new file mode 100644 index 0000000..e0be2db --- /dev/null +++ b/jsdoc.conf.json @@ -0,0 +1,38 @@ +{ + "source": { + "include": ["README.md", "src", "./package.json"] + }, + "tags": { + "allowUnknownTags": true + }, + "markdown": { + "excludeTags": ["author"] + }, + "opts": { + "access": "all", + "encoding": "utf8", + "destination": "./docs", + "recurse": true, + "template": "node_modules/loke-jsdoc-theme" + }, + "plugins": [ + "plugins/markdown", + "./node_modules/loke-jsdoc-theme/plugins/async", + "./node_modules/loke-jsdoc-theme/plugins/rpc", + "./node_modules/loke-jsdoc-theme/plugins/api", + "./node_modules/loke-jsdoc-theme/plugins/timeout" + ], + "templates": { + "cleverLinks": false, + "monospaceLinks": true, + "default": { + "outputSourceFiles": true + }, + "systemName": "HTZ A11Y TABS", + "navType": "vertical", + "linenums": true, + "dateFormat": "MMMM Do YYYY, h:mm:ss a" + } +} + + diff --git a/jspm.config.js b/jspm.config.js new file mode 100644 index 0000000..c2b379d --- /dev/null +++ b/jspm.config.js @@ -0,0 +1,60 @@ +SystemJS.config({ + paths: { + "npm:": "jspm_packages/npm/", + "github:": "jspm_packages/github/", + "htz-a11y-tabs/": "src/" + }, + browserConfig: { + "baseURL": "/" + }, + devConfig: { + "map": { + "plugin-babel": "npm:systemjs-plugin-babel@0.0.13" + } + }, + transpiler: "plugin-babel", + packages: { + "htz-a11y-tabs": { + "main": "index.js", + "meta": { + "*.js": { + "loader": "plugin-babel" + } + } + } + }, + map: { + "babel": "npm:babel-core@5.8.38", + "babel-runtime": "npm:babel-runtime@5.8.38", + "core-js": "npm:core-js@1.2.7", + "path": "github:jspm/nodelibs-path@0.2.0-alpha" + } +}); + +SystemJS.config({ + packageConfigPaths: [ + "npm:@*/*.json", + "npm:*.json", + "github:*/*.json" + ], + map: { + "htz-dispatch-event": "github:haaretz/htz-dispatch-event@1.0.1", + "buffer": "github:jspm/nodelibs-buffer@0.2.0-alpha", + "fs": "github:jspm/nodelibs-fs@0.2.0-alpha", + "process": "github:jspm/nodelibs-process@0.2.0-alpha" + }, + packages: { + "github:jspm/nodelibs-buffer@0.2.0-alpha": { + "map": { + "buffer-browserify": "npm:buffer@4.7.1" + } + }, + "npm:buffer@4.7.1": { + "map": { + "ieee754": "npm:ieee754@1.1.6", + "isarray": "npm:isarray@1.0.0", + "base64-js": "npm:base64-js@1.1.2" + } + } + } +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..b6cd7e0 --- /dev/null +++ b/package.json @@ -0,0 +1,63 @@ +{ + "name": "htz-a11y-tabs", + "version": "1.0.0", + "description": "JavaScript scaffolding for accessible tab interfaces", + "repository": { + "type": "git", + "url": "https://github.com/haaretz/htz-a11y-tabs" + }, + "license": "MIT", + "scripts": { + "init": "git init && npm i", + "postinstall": "jspm install", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "devDependencies": { + "babel-cli": "^6.11.4", + "babel-core": "^6.11.4", + "babel-eslint": "^6.1.2", + "babel-preset-es2015": "^6.9.0", + "babel-register": "^6.11.6", + "browser-sync": "^2.14.0", + "del": "^2.2.1", + "eslint-config-airbnb": "^10.0.0", + "eslint-plugin-import": "^1.12.0", + "git-hooks": "^1.1.0", + "gulp": "^3.9.1", + "gulp-eslint": "^3.0.1", + "gulp-if": "^2.0.0", + "gulp-ignore": "^2.0.1", + "gulp-load-plugins": "^1.2.4", + "gulp-newer": "^1.2.0", + "gulp-plumber": "^1.1.0", + "gulp-rename": "^1.2.2", + "gulp-replace": "^0.5.4", + "gulp-sequence": "^0.4.5", + "gulp-shell": "^0.5.2", + "gulp-size": "^2.1.0", + "gulp-sourcemaps": "^1.6.0", + "gulp-util": "^3.0.7", + "jsdoc": "^3.4.0", + "jspm": "^0.17.0-beta.25", + "loke-jsdoc-theme": "^2.1.0" + }, + "dependencies": {}, + "jspm": { + "name": "htz-a11y-tabs", + "main": "index.js", + "directories": { + "lib": "src" + }, + "dependencies": { + "htz-dispatch-event": "github:haaretz/htz-dispatch-event@^1.0.1" + }, + "devDependencies": { + "plugin-babel": "npm:systemjs-plugin-babel@^0.0.13" + }, + "peerDependencies": { + "buffer": "github:jspm/nodelibs-buffer@^0.2.0-alpha", + "fs": "github:jspm/nodelibs-fs@^0.2.0-alpha", + "process": "github:jspm/nodelibs-process@^0.2.0-alpha" + } + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..ef24189 --- /dev/null +++ b/src/index.js @@ -0,0 +1,195 @@ +/** + * HTZ A11Y TABS + * + * JavaScript scaffolding for accessible tab interfaces + * + * @module htz-a11y-tabs + * @license MIT + */ + +import { initialize, destroyInstance, gotoTab, nextTab, prevTab } from './lib/utils'; + +/** + * 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. + * @param {HTMLElement} container - The wrapper element around the tabs and tab panels + * @param {Boolean} rtl - Determine if the tab interface should be right-to-left + * @param {String} [tablistSelector='ul'] - The tablist's selector. + * @param {String} [tabpanelSelector='section'] - The tabpanels' selector. + * @param {Integer} [activeTab=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 initialized + * @fires module:htz-a11y-tabs~a11y-tabs:destroy - Fired from `container` after + * a tab interface has been destroyed + * @fires 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. + * @fires module:htz-a11y-tabs~a11y-tabs:after-select - Fired from `container` + * after a tab selection is applied. + * + * @return {module:htz-a11y-tabs#API} + */ +export default function htzA11yTabs( + container, + rtl, + tablistSelector = 'ul', + tabpanelSelector = 'section', + activeTab = 0 +) { + // State + const state = { + isInitialized: false, + activeTab, + }; + + let [tabs, tabpanels] = initialize( + container, + tablistSelector, + tabpanelSelector, + clickHandler, + keyHandler, + activeTab + ); + + init(activeTab); + + + /* ---- EVENT HANDLERS ----- */ + /** + * Change focus between tabs with arrow keys + * + * @param {Object} evt - A keyboard event object. + */ + function keyHandler(evt) { + const key = evt.keyCode; + const active = state.activeTab; + const back = key === (rtl ? 39 : 37) || key === 38; + const forward = key === (rtl ? 37 : 39) || key === 40; + + if (back) state.activeTab = prevTab(container, tabs, tabpanels, active, false); + else if (forward) state.activeTab = nextTab(container, tabs, tabpanels, active, false); + + if ([undefined, null, false].indexOf(state.activeTab) >= 0) state.activeTab = active; + } + + function clickHandler(evt) { + evt.preventDefault(); + + const targetIndex = tabs.indexOf(evt.target); + const active = state.activeTab; + + state.activeTab = gotoTab(targetIndex, container, tabs, tabpanels, active, true); + + if ([undefined, null, false].indexOf(state.activeTab) >= 0) state.activeTab = active; + } + + + /* ---- Instance methods ----- */ + /** + * Initialize an instance + * @callback module:htz-a11y-tabs#init + * + * @param {Integer} activate - The tab number to activate. Zero based. + */ + function init(activate = activeTab) { + if (state.isInitialized) destroy(); + ([tabs, tabpanels] = initialize( + container, + tablistSelector, + tabpanelSelector, + clickHandler, + keyHandler, + activate + )); + + state.isInitialized = true; + state.activeTab = activate; + } + + /** + * Remove event listeners from an instance + * + * @callback module:htz-a11y-tabs#destroy + */ + function destroy() { + if (state.isInitialized) { + destroyInstance(container, clickHandler, keyHandler); + + state.isInitialized = false; + } + } + + /** + * Go to a tab + * + * @callback module:htz-a11y-tabs#goto + * + * @param {Integer} index - The index of the tab to be activated + * @param {Boolean} [focus] - Determine if the newly activated tab should be focused. + */ + function goto(index, focus) { + const active = state.activeTab; + + state.activeTab = gotoTab(index, container, tabs, tabpanels, active, focus); + if ([undefined, null, false].indexOf(state.activeTab) >= 0) state.activeTab = active; + } + + /** + * Go to the next tab + * + * @callback module:htz-a11y-tabs#next + * + * @param {Boolean} [focus] - Determine if the newly activated tab should be focused. + */ + function next(focus) { + const active = state.activeTab; + + state.activeTab = nextTab(container, tabs, tabpanels, active, focus); + if ([undefined, null, false].indexOf(state.activeTab) >= 0) state.activeTab = active; + } + + /** + * Go to the previous tab + * + * @callback module:htz-a11y-tabs#prev + * + * @param {Boolean} [focus] - Determine if the newly activated tab should be focused. + */ + function prev(focus) { + const active = state.activeTab; + + state.activeTab = prevTab(container, tabs, tabpanels, active, focus); + + if ([undefined, null, false].indexOf(state.activeTab) >= 0) state.activeTab = active; + } + + /** + * Instance API + * + * @typedef {Object} module:htz-a11y-tabs#API + * + * @prop {Boolean} isInitialized - Indicates if the instance is initialized + * @prop {Integer} isInitialized - The number of the active tab. Zero based. + * @prop {module:htz-a11y-tabs#init} init - Initialize an instance. + * @prop {module:htz-a11y-tabs#destroy} destroy - Destroy an instance. + * @prop {module:htz-a11y-tabs#goto} goto - Go to a specific tab + * @prop {module:htz-a11y-tabs#next} next - Go to the next tab + * @prop {module:htz-a11y-tabs#prev} previous - Go to the next tab + */ + return { + // Status + isInitialized: state.isInitialized, + visibleTab: state.activeTab, + + // Instance handling + init, + destroy, + + // Instance control + goto, + next, + prev, + }; +} diff --git a/src/lib/utils.js b/src/lib/utils.js new file mode 100644 index 0000000..8397be9 --- /dev/null +++ b/src/lib/utils.js @@ -0,0 +1,274 @@ +/** + * HTZ A11Y TABS UTILS + * + * Utility function for the htz-a11y-tabs module + * @module htz-a11y-tabs/utils + */ + +import dispatchEvent from 'htz-dispatch-event'; + +/** + * Initialize an instance + * + * @param {HTMLElement} container - The wrapper element around the tabs and tab panels + * @param {String} tablistSelector - The tablist's selector. + * @param {String} tabpanelSelector - The tabpanel's selector. + * @param {clickHandler} clickHandler - A callback to handle click events. + * @param {keyHandler} keyHandler - A callback to handle keydown events. + * @param {Integer} activeTab - The tab number to activate. Zero based. + * + * @fires module:htz-a11y-tabs~a11y-tabs:init + * + * @return {Array} - An array whose items are: + * 0: the `tablist` HTMLElement + * 1: An Array of the clickable tab HTMLElements + */ +export function initialize( + container, + tablistSelector, + tabpanelSelector, + clickHandler, + keyHandler, + activeTab +) { + const tablist = container.querySelector(tablistSelector); + const tabpanels = Array.from(container.querySelectorAll(tabpanelSelector)); + const tabs = Array.from(tablist.children); + const clickables = Array.from(tablist.querySelectorAll('a, button')); + + tablist.setAttribute('role', 'tablist'); + + tabs.forEach((tab, index) => { + const clickable = tab.querySelector('a, button'); + const tabpanel = tabpanels[index]; + const isActive = index === activeTab; + const href = clickable.href; + const controls = href ? href.match(/#([^?&]*)/)[1] : + tabpanel ? + tabpanel.id || `tab${Math.random()}` : + `tab${Math.random()}`; + + tab.setAttribute('role', 'presentation'); + clickable.setAttribute('role', 'tab'); + clickable.setAttribute('tabindex', isActive ? '0' : '-1'); + clickable.setAttribute('aria-controls', controls); + + isActive ? + clickable.setAttribute('aria-selected', 'true') : + clickable.removeAttribute('aria-selected'); + + + tabpanel.setAttribute('role', 'tabpanel'); + if (!isActive) tabpanel.setAttribute('aria-hidden', 'true'); + if (!tabpanel.id) tabpanel.id = controls; + + if (isActive) makeFocusable(tabpanel); + + // Attach event listeners + clickable.addEventListener('keydown', keyHandler); + clickable.addEventListener('click', clickHandler); + }); + + /** + * Fired from `container` when a tab interface is initialized + * @event module:htz-a11y-tabs~a11y-tabs:init + * + * @type {Object} + * + * @prop {Object} detail + * @prop {HTMLElement} detail.activeTab - The active tab element. + * @prop {HTMLElement} detail.activeTabpanel - The active tabpanel element. + */ + dispatchEvent( + container, + 'a11y-tabs:init', + { + activeTab: clickables[activeTab], + activeTabpanel: tabpanels[activeTab], + } + ); + + return [clickables, tabpanels]; +} + + +/** + * Remove event listeners + * + * @param {HTMLElement} container - The container wrapping the tab interface + * @param {clickHandler} clickHandler - A callback to handle click events. + * @param {keyHandler} keyHandler - A callback to handle keydown events. + */ +export function destroyInstance(container, clickHandler, keyHandler) { + container.removeEventListener('click', clickHandler); + container.removeEventListener('keydown', keyHandler); + + /** + * Fired from `container` after a tab interface has been destroyed. + * + * @event module:htz-a11y-tabs~a11y-tabs:destroy + * + * @type {Object} + */ + dispatchEvent(container, 'a11y-tabs:destroy'); +} + + +/** + * Go to the next tab + * + * @param {HTMLElement} container - The container wrapping the tab interface + * @param {HTMLElement[]} tabs - An array containing the tab elements + * @param {HTMLElement[]} tabpanels - An array containing tabpanel element + * @param {Integer} activeTabIndex - The index of the currently active tab + * @param {Boolean} focus - Determine if the newly activated tab should be focused. + * + * @return {Integer} The index of the newly active tab. + */ +export function nextTab(container, tabs, tabpanels, activeTabIndex, focus) { + const targetIndex = activeTabIndex + 1; + + return gotoTab(targetIndex, container, tabs, tabpanels, activeTabIndex, focus); +} + +/** + * Go to the previous tab + * + * @param {HTMLElement} container - The container wrapping the tab interface + * @param {HTMLElement[]} tabs - An array containing the tab elements + * @param {HTMLElement[]} tabpanels - An array containing tabpanel element + * @param {Integer} activeTabIndex - The index of the currently active tab + * @param {Boolean} focus - Determine if the newly activated tab should be focused. + * + * @return {Integer} The index of the newly active tab. + */ +export function prevTab(container, tabs, tabpanels, activeTabIndex, focus) { + const targetIndex = activeTabIndex - 1; + + return gotoTab(targetIndex, container, tabs, tabpanels, activeTabIndex, focus); +} + + +/** + * Go to a tab + * + * @param {Integer} targetIndex - The index of the tab to be activated + * @param {HTMLElement} container - The container wrapping the tab interface + * @param {HTMLElement[]} tabs - An array containing the tab elements + * @param {HTMLElement[]} tabpanels - An array containing tabpanel element + * @param {Integer} activeTabIndex - The index of the currently active tab + * @param {Boolean} focus - Determine if the newly activated tab should be focused. + * + * @fires module:htz-a11y-tabs~a11y-tabs:before-select + * @fires module:htz-a11y-tabs~a11y-tabs:after-select + * + * @return {Integer} The index of the newly active tab. + */ +export function gotoTab(targetIndex, container, tabs, tabpanels, activeTabIndex, focus) { + const currentTab = tabs[activeTabIndex]; + const targetTab = tabs[targetIndex]; + const currentTabpanel = tabpanels[activeTabIndex]; + const targetTabpanel = tabpanels[targetIndex]; + + + if (targetTab && targetTabpanel) { + /** + * 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:before-select + * + * @type {Object} + * @prop {Object} detail + * @prop {HTMLElement} detail.currentTab - The currently active tab + * @prop {HTMLElement} detail.targetTab - The tab that will be activated + * after the selection is applied. + * @prop {HTMLElement} detail.currentTabpanel - The currently active tabpanel + * @prop {HTMLElement} detail.targetTabpanel - The tabpanel that will be + * activated after the selection is applied. + */ + const allowed = dispatchEvent( + container, + 'a11y-tabs:before-select', + { currentTab, targetTab, currentTabpanel, targetTabpanel } + ); + + if (allowed) { + handleTabSwitch(currentTab, targetTab, currentTabpanel, targetTabpanel, focus); + + /** + * Fired from `container` after a tab selection is applied. + * + * @event module:htz-a11y-tabs~a11y-tabs:after-select + * + * @type {Object} + * @prop {Object} detail + * @prop {HTMLElement} detail.prevTab - The previously active tab + * @prop {HTMLElement} detail.targetTab - The tab that has been activated + * by the selection. + * @prop {HTMLElement} detail.prevTabpanel - The previously active tabpanel + * @prop {HTMLElement} detail.targetTabpanel - The tabpanel that will be activated + * after the selection is applied. + */ + dispatchEvent( + container, + 'a11y-tabs:after-select', + { + prevTab: currentTab, + targetTab, + prevTabpanel: currentTabpanel, + targetTabpanel, + } + ); + + return targetIndex; + } + } + + return undefined; +} + +/** + * Make the first child of an element focusable. If the element has + * no children, make the element itself focusable. + * + * @param {HTMLElement} elem - The Element to target + * + * @return {HTMLElement} - The focusable element. + * + * @private + */ +export function makeFocusable(elem) { + const firstChild = elem.firstElementChild; + + (firstChild || elem).setAttribute('tabindex', '0'); + + return firstChild || elem; +} + +/** + * Handle DOM changes related to switching tabs + * + * @param {HTMLElement} currentTab - The currently selected tab + * @param {HTMLElement} targetTab - The tab to be selected + * @param {HTMLElement} currentTabpanel - The currently selected tabpanel + * @param {HTMLElement} targetTabpanel - The tabpanel to be selected + * @param {Boolean} moveFocus - Determine if the newly activated tab should be focused. + * + * @private + */ +function handleTabSwitch(currentTab, targetTab, currentTabpanel, targetTabpanel, moveFocus) { + targetTab.setAttribute('tabindex', '0'); + targetTab.setAttribute('aria-selected', 'true'); + targetTab.focus(); + + currentTab.setAttribute('tabindex', '-1'); + currentTab.removeAttribute('aria-selected'); + + currentTabpanel.setAttribute('aria-hidden', 'true'); + targetTabpanel.removeAttribute('aria-hidden'); + + const focusable = makeFocusable(targetTabpanel); + + if (moveFocus) focusable.focus(); +} diff --git a/test.css b/test.css new file mode 100644 index 0000000..89c1257 --- /dev/null +++ b/test.css @@ -0,0 +1,24 @@ +/***************************************** + * + * htz-a11y-tabs + * + *****************************************/ + +ul { padding: 0; margin: 0; } +.tabs > * { + display: inline-block; +} + +.tabs a { + display: block; + padding: 6px; + background-color: #ccc; +} +.tabs a[aria-selected="true"] { + background-color: #000; + color: #ccc; +} + +[aria-hidden="true"] { + display: none; +} diff --git a/test.js b/test.js new file mode 100644 index 0000000..63dde5e --- /dev/null +++ b/test.js @@ -0,0 +1,9 @@ +/* eslint-disable import/no-unresolved */ +import tabs from 'htz-a11y-tabs'; +/* eslint-enable import/no-unresolved */ + +const tabs1 = document.getElementById('tabs1'); +const tabs2 = document.getElementById('tabs2'); + +tabs(tabs1); +tabs(tabs2, true);