Merge pull request #4 from TheC2Group/feature/a11y-updates

Feature/a11y updates
TheC2Group · Jul 6, 2018 · 1bd9f11 · 1bd9f11
2 parents e837a0b + 1539f13
commit 1bd9f11
Show file tree

Hide file tree

Showing 8 changed files with 1,414 additions and 149 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,8 @@
 {
-  "presets": [ "es2015-rollup" ]
+  "presets": [
+    ["es2015", { "modules": false }]
+  ],
+  "plugins": [
+    "external-helpers"
+  ]
 }
diff --git a/README.md b/README.md
@@ -50,6 +50,7 @@ tabs.on('update', i => {
 tabs.activate(0); // activates tab with a specific index
 tabs.activateNext();
 tabs.activatePrevious();
+tabs.destroy();
 ```
 
 

diff --git a/cjs/tabs.js b/cjs/tabs.js
@@ -10,7 +10,8 @@ var defaults = {
     tab: '.tab',
     panel: '.panel',
     prefix: 'Tabs-',
-    hashEnabled: false
+    hashEnabled: false,
+    direction: 'horizontal' // other option is 'vertical'
 };
 
 var keys = {
@@ -37,12 +38,22 @@ var activateNext = function activateNext() {
 };
 
 var keyEvents = function keyEvents(e, index) {
-    if (e.which === keys.left || e.which === keys.up) {
+    if (e.which === keys.left && this.opts.direction === 'horizontal') {
         e.preventDefault();
         activatePrevious.call(this, index);
         return;
     }
-    if (e.which === keys.right || e.which === keys.down) {
+    if (e.which === keys.right && this.opts.direction === 'horizontal') {
+        e.preventDefault();
+        activateNext.call(this, index);
+        return;
+    }
+    if (e.which === keys.up && this.opts.direction === 'vertical') {
+        e.preventDefault();
+        activatePrevious.call(this, index);
+        return;
+    }
+    if (e.which === keys.down && this.opts.direction === 'vertical') {
         e.preventDefault();
         activateNext.call(this, index);
         return;
@@ -78,76 +89,120 @@ var activate = function activate(index) {
 };
 
 var bindEvents = function bindEvents() {
-    var _this = this;
+    var self = this;
 
-    this.$tabs.on('click', function (e) {
-        activate.call(_this, _this.$tabs.index(e.currentTarget));
+    self.$tabs.on('click', function (e) {
+        activate.call(self, self.$tabs.index(e.currentTarget));
     });
-    this.$tabs.on('keydown', function (e) {
-        keyEvents.call(_this, e);
+
+    self.$tabs.on('keydown', function (e) {
+        keyEvents.call(self, e);
     });
-    this.$panels.on('keydown', function (e) {
+
+    self.$panels.on('keydown', function (e) {
         if (!e.ctrlKey) return;
-        keyEvents.call(_this, e);
+        keyEvents.call(self, e);
+    });
+
+    $(window).on('hashchange', function () {
+        if (self.opts.hashEnabled && self._enabled) {
+            checkHash.call(self);
+        }
     });
-    if (this.opts.hashEnabled) {
-        $(window).on('hashchange', function () {
-            checkHash.call(_this);
-        });
-    }
+};
+
+var unbindEvents = function unbindEvents() {
+    this.$tabs.off('click keydown');
+
+    this.$panels.off('keydown');
+
+    this._enabled = false;
 };
 
 var addAriaAttributes = function addAriaAttributes() {
-    var _this2 = this;
+    var _this = this;
 
     if (!this.$tablist.attr('role')) {
         this.$tablist.attr('role', 'tablist');
     }
 
     this.$tabs.each(function (i, tab) {
-		var tabId = $(tab).attr('id');
-
-		$(tab).attr({
-			'role': 'tab',
-			'tabindex': i === _this2.index ? 0 : -1,
-			'aria-selected': i === _this2.index ? true : false,
-		});
-
-		if (!tabId) {
-			$(tab).attr({
-				'id': _this2.opts.prefix + _this2.count + '-' + (i + 1)
-			});
-		}
+        var tabId = $(tab).attr('id');
+
+        $(tab).attr({
+            'role': 'tab',
+            'tabindex': i === _this.index ? 0 : -1,
+            'aria-selected': i === _this.index ? true : false
+        });
+
+        if (!tabId) {
+            $(tab).attr({
+                'id': _this.opts.prefix + _this.count + '-' + (i + 1)
+            });
+        } else {
+            $(tab).attr('data-original-id', true);
+        }
+    });
+
+    this.$panels.each(function (i, panel) {
+        var labelledBy = $(panel).attr('aria-labelledby');
+
+        $(panel).attr({
+            'role': 'tabpanel',
+            'tabindex': i === _this.index ? 0 : -1,
+            'aria-hidden': i === _this.index ? false : true
+        });
+
+        if (!labelledBy) {
+            $(panel).attr({
+                'aria-labelledby': _this.opts.prefix + _this.count + '-' + (i + 1)
+            });
+        } else {
+            $(panel).attr('data-original-labelledBy', true);
+        }
+    });
+};
+
+var removeAriaAttributes = function removeAriaAttributes() {
+    this.$tablist.removeAttr('role');
+
+    this.$tabs.each(function (i, tab) {
+        var tabId = $(tab).attr('id');
+
+        if (!$(tab).attr('data-original-id')) {
+            $(tab).removeAttr('id');
+        }
+
+        $(tab).removeAttr('role tabindex aria-selected data-original-id');
     });
 
     this.$panels.each(function (i, panel) {
-		var labelledBy = $(panel).attr('aria-labelledby');
-
-		$(panel).attr({
-			'role': 'tabpanel',
-			'tabindex': i === _this2.index ? 0 : -1,
-			'aria-hidden': i === _this2.index ? false : true,
-		});
-
-		if (!labelledBy) {
-			$(panel).attr({
-				'aria-labelledby': _this2.opts.prefix + _this2.count + '-' + (i + 1)
-			});
-		}
+        var labelledBy = $(panel).attr('aria-labelledby');
+
+        if (!$(panel).attr('data-original-labelledBy')) {
+            $(panel).removeAttr('aria-labelledby');
+        }
+
+        $(panel).removeAttr('role tabindex aria-hidden data-original-labelledBy');
     });
 };
 
+var destroy = function destroy() {
+    removeAriaAttributes.call(this);
+    unbindEvents.call(this);
+};
+
 var checkHash = function checkHash() {
-    var _this2 = this;
+    var self = this;
 
     if (document.location.hash) {
         // find tab with that hash
         var hashKey = document.location.hash.split('#')[1];
-        var $selectedTab = this.$tabs.filter('[data-hash="'+hashKey+'"]');
+        var $selectedTab = self.$tabs.filter('[data-hash="' + hashKey + '"]');
 
         // activate tab with that hash
         if ($selectedTab.length > 0) {
-            activate.call(_this2, $selectedTab.index());
+            activate.call(self, $selectedTab.index());
         }
     }
 };
@@ -162,6 +217,7 @@ var Tabs = function Tabs(el, options) {
     this.$tablist = this.$el.find(this.opts.tablist);
     this.$tabs = this.$el.find(this.opts.tab);
     this.$panels = this.$el.find(this.opts.panel);
+    this._enabled = true;
 
     this.len = this.$tabs.length;
     this.index = 0;
@@ -178,5 +234,6 @@ eventHandler(Tabs);
 Tabs.prototype.activate = activate;
 Tabs.prototype.activateNext = activateNext;
 Tabs.prototype.activatePrevious = activatePrevious;
+Tabs.prototype.destroy = destroy;
 
-module.exports = Tabs;
+module.exports = Tabs;