Merge pull request #25 from edenspiekermann/fix/button-role

[RFR] Fixed an issue with non-button toggles
edenspiekermann · Apr 15, 2016 · 6675bbc · 6675bbc
2 parents b0d04d2 + 2c7350c
commit 6675bbc
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 16 deletions.
diff --git a/a11y-toggle.js b/a11y-toggle.js
@@ -2,6 +2,8 @@
   'use strict';
 
   var internalId = 0;
+  var togglesMap = {};
+  var targetsMap = {};
 
   function $ (selector) {
     return Array.prototype.slice.call(document.querySelectorAll(selector));
@@ -23,8 +25,21 @@
     return null;
   }
 
-  var togglesMap = {};
-  var targetsMap = {};
+  function handleToggle (toggle) {
+    var target = toggle && targetsMap[toggle.getAttribute('aria-controls')];
+
+    if (!target) {
+      return false;
+    }
+
+    var toggles = togglesMap['#' + target.id];
+    var isExpanded = target.getAttribute('aria-hidden') === 'false';
+
+    target.setAttribute('aria-hidden', isExpanded);
+    toggles.forEach(function (toggle) {
+      toggle.setAttribute('aria-expanded', !isExpanded);
+    });
+  }
 
   document.addEventListener('DOMContentLoaded', function () {
     togglesMap = $('[data-a11y-toggle]').reduce(function (acc, toggle) {
@@ -56,18 +71,15 @@
 
   document.addEventListener('click', function (event) {
     var toggle = getClosestToggle(event.target);
-    var target = toggle && targetsMap[toggle.getAttribute('aria-controls')];
+    handleToggle(toggle);
+  });
 
-    if (!target) {
-      return false;
+  document.addEventListener('keyup', function (event) {
+    if (event.which === 13 || event.which === 32) {
+      var toggle = getClosestToggle(event.target);
+      if (toggle && toggle.getAttribute('role') === 'button') {
+        handleToggle(toggle);
+      }
     }
-
-    var toggles = togglesMap['#' + target.id];
-    var isExpanded = target.getAttribute('aria-hidden') === 'false';
-
-    target.setAttribute('aria-hidden', isExpanded);
-    toggles.forEach(function (toggle) {
-      toggle.setAttribute('aria-expanded', !isExpanded);
-    });
   });
 })();
diff --git a/a11y-toggle.min.js b/a11y-toggle.min.js
diff --git a/example/main.js b/example/main.js
@@ -54,7 +54,7 @@
     });
   });
 
-  document.addEventListener('click', function (event) {
+  function handleToggle (event) {
     var toggle = getClosestToggle(event.target);
     var target = toggle && targetsMap[toggle.getAttribute('aria-controls')];
 
@@ -69,5 +69,13 @@
     toggles.forEach(function (toggle) {
       toggle.setAttribute('aria-expanded', !isExpanded);
     });
+  }
+
+  document.addEventListener('click', handleToggle);
+  document.addEventListener('keyup', function (event) {
+    if (event.which === 13 || event.which === 32) {
+      var toggle = getClosestToggle(event.target);
+      if (toggle && toggle.getAttribute('role') === 'button') handleToggle(event);
+    }
   });
 })();
diff --git a/tests/index.html b/tests/index.html
@@ -83,6 +83,11 @@
         <button data-a11y-toggle="t13" type="button"><span>Toggle</span></button>
         <div id="t13">Target</div>
       </div>
+
+      <div class="test test-14">
+        <span data-a11y-toggle="t14" role="button" tabindex="0">Toggle</span>
+        <div id="t14">Target</div>
+      </div>
     </div>
 
     <script src="../a11y-toggle.js"></script>

diff --git a/tests/index.js b/tests/index.js
@@ -1,5 +1,6 @@
+/* globals describe, it, expect */
+
 describe('Initial setup', function () {
-  var toggle, target;
   var actual, expected;
 
   it('should add `id` attribute to toggle if not set', function () {
@@ -103,4 +104,13 @@ describe('Click events', function () {
     expected = 'true';
     expect(actual).to.be.equal(expected);
   });
+
+  it('should work correctly with accessible non-<button> toggle', function () {
+    var toggle = document.querySelector('[data-a11y-toggle="t14"]');
+    toggle.click();
+
+    actual = toggle.getAttribute('aria-expanded');
+    expected = 'true';
+    expect(actual).to.be.equal(expected);
+  });
 });