From ee9a973507da4a9a09d289152ba461ec47d34065 Mon Sep 17 00:00:00 2001 From: mynamesleon Date: Thu, 9 Jan 2020 12:09:11 +0000 Subject: [PATCH] 1.0.0 release --- README.md | 2 ++ examples/index.html | 9 ++++++--- package-lock.json | 2 +- package.json | 3 +-- src/aria-tablist.js | 35 +++++++++++++++++++++-------------- 5 files changed, 31 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index d187c51..d0a59eb 100644 --- a/README.md +++ b/README.md @@ -122,6 +122,8 @@ Most of the functionality is assumed from the included ARIA attributes in your H } ``` +All component options that accept a Function will have their context (`this`) set to include the full autocomplete API (assuming you use a normal `function: () {}` declaration for the callbacks instead of arrow functions). + ## API The returned `AriaTablist` class instance exposes the following API (which is also available on the original element's `ariaTablist` property): diff --git a/examples/index.html b/examples/index.html index 133a99d..101ed9a 100644 --- a/examples/index.html +++ b/examples/index.html @@ -488,9 +488,12 @@

Options

- All component options that accept a Function will - have their context (this) set to - include the full autocomplete API. + All component options that accept a + Function will have their context + (this) set to include the full + autocomplete API (assuming you use a normal + function: () {} declaration for the + callbacks instead of arrow functions).

diff --git a/package-lock.json b/package-lock.json index c0aecbf..513566f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "aria-tablist", - "version": "1.0.0-beta.5", + "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index d566658..e1835f8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aria-tablist", - "version": "1.0.0-beta.5", + "version": "1.0.0", "description": "Dependency-free plain JavaScript module for WCAG compliant tablists", "main": "dist/aria-tablist.min.js", "scripts": { @@ -19,7 +19,6 @@ "accessibility" ], "files": [ - "src", "dist/*.js" ], "author": "Leon Slater (https://www.mynamesleon.com)", diff --git a/src/aria-tablist.js b/src/aria-tablist.js index 311b5bf..d626cc6 100644 --- a/src/aria-tablist.js +++ b/src/aria-tablist.js @@ -8,6 +8,7 @@ const DEFAULT_OPTIONS = { // callbacks onOpen: undefined, onClose: undefined, + onDelete: undefined, onReady: undefined }; @@ -286,27 +287,26 @@ class Tablist { * @description generate api instance */ generateApi() { - ['tabs', 'panels', 'options', 'destroy'].forEach(prop => { - this.api[prop] = - typeof prop === 'function' - ? (...args) => this[prop].apply(this, args) - : this[prop]; + ['tabs', 'panels', 'options'].forEach(prop => { + this.api[prop] = this[prop]; }); this.api.open = (...args) => { - this.checkMultiple(); - this.activateTabWithTimer.apply(this, args); + const tab = this.getTab(args[0]); + if (tab && getAttribute(tab, 'aria-selected') !== 'true') { + this.checkMultiple(); + this.activateTabWithTimer.apply(this, args); + } }; - this.api.close = (...args) => { this.checkMultiple(); - this.deActivateTab.apply(this, args); + this.deactivateTab.apply(this, args); }; - this.api.delete = (...args) => { this.checkMultiple(); this.determineDeletable.apply(this, args); }; + this.api.destroy = () => this.destroy.call(this); // store api on original element this.tablist[TABLIST_STORAGE_PROP] = this.api; @@ -374,6 +374,10 @@ class Tablist { case keys.right: this.determineOrientation(event); break; + case keys.space: + case keys.enter: + preventDefault(event); + break; } } } @@ -392,6 +396,7 @@ class Tablist { case keys.enter: case keys.space: this.checkMultiple(); + preventDefault(event); this.activateTabWithTimer(event.target); break; } @@ -466,7 +471,7 @@ class Tablist { typeof this.options.delay === 'number' ? this.options.delay : 0; this.tabTimer = setTimeout(() => { this.activateTab(element, setFocus, delay); - }); + }, delay); } /** @@ -574,7 +579,7 @@ class Tablist { return; } const tab = this.getTab(element); - if (getAttribute(tab, 'data-deletable') === 'false') { + if (!tab || getAttribute(tab, 'data-deletable') === 'false') { return; } @@ -637,9 +642,11 @@ class Tablist { tab.removeAttribute('role'); delete tab[TAB_INDEX_PROP]; } - this.tablist.removeAttribute('role'); + if (this.tablist) { + delete this.tablist[TABLIST_STORAGE_PROP]; + this.tablist.removeAttribute('role'); + } // reset element storage - delete this.tablist[TABLIST_STORAGE_PROP]; this.tablist = null; this.panels = null; this.tabs = null;