1.0.0 release

mynamesleon · Jan 9, 2020 · ee9a973 · ee9a973
1 parent 51302d5
commit ee9a973
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 20 deletions.
diff --git 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
@@ -488,9 +488,12 @@ <h2>Options</h2>
                             </dd>
                         </dl>
                         <p>
-                            All component options that accept a Function will
-                            have their context (<code>this</code>) set to
-                            include the full autocomplete API.
+                            All component options that accept a
+                            <code>Function</code> will have their context
+                            (<code>this</code>) set to include the full
+                            autocomplete API (assuming you use a normal
+                            <code>function: () {}</code> declaration for the
+                            callbacks instead of arrow functions).
                         </p>
                     </div>
                     <div class="tile">

diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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;