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;