fix codepen issue and failing test

w3c · Jan 19, 2021 · 9a79e3a · 9a79e3a
1 parent 07f1100
commit 9a79e3a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 37 deletions.
diff --git a/examples/disclosure/js/disclosureMenu.js b/examples/disclosure/js/disclosureMenu.js
@@ -79,6 +79,11 @@ class DisclosureNav {
     }
   }
 
+  // public function to close open menu
+  close() {
+    this.toggleExpand(this.openIndex, false);
+  }
+
   onBlur(event) {
     var menuContainsFocus = this.rootNode.contains(event.relatedTarget);
     if (!menuContainsFocus && this.openIndex !== null) {
@@ -177,7 +182,7 @@ class DisclosureNav {
 
 window.addEventListener(
   'load',
-  function (event) {
+  function () {
     var menus = document.querySelectorAll('.disclosure-nav');
     var disclosureMenus = [];
 
@@ -187,31 +192,36 @@ window.addEventListener(
 
     // listen to arrow key checkbox
     var arrowKeySwitch = document.getElementById('arrow-behavior-switch');
-    arrowKeySwitch.addEventListener('change', function (event) {
-      var checked = arrowKeySwitch.checked;
-      for (var i = 0; i < disclosureMenus.length; i++) {
-        disclosureMenus[i].updateKeyControls(checked);
-      }
-    });
-
-    // fake link behavior
-    var links = document.querySelectorAll('[href="#mythical-page-content"]');
-    var examplePageHeading = document.getElementById('mythical-page-heading');
-    for (var k = 0; k < links.length; k++) {
-      links[k].addEventListener('click', function (event) {
-        // add preventDefault for Codepen functionality
-        event.preventDefault();
-
-        var pageTitle = event.target.innerText;
-        examplePageHeading.innerText = pageTitle;
-
-        // handle aria-current
-        for (var n = 0; n < links.length; n++) {
-          links[n].removeAttribute('aria-current');
+    if (arrowKeySwitch) {
+      arrowKeySwitch.addEventListener('change', function (event) {
+        var checked = arrowKeySwitch.checked;
+        for (var i = 0; i < disclosureMenus.length; i++) {
+          disclosureMenus[i].updateKeyControls(checked);
         }
-        this.setAttribute('aria-current', 'page');
       });
     }
+
+    // fake link behavior
+    disclosureMenus.forEach((disclosureNav, i) => {
+      var links = menus[i].querySelectorAll('[href="#mythical-page-content"]');
+      var examplePageHeading = document.getElementById('mythical-page-heading');
+      for (var k = 0; k < links.length; k++) {
+        links[k].addEventListener('click', (event) => {
+          // add preventDefault for Codepen functionality, then manually close dropdown
+          event.preventDefault();
+          disclosureNav.close();
+
+          var pageTitle = event.target.innerText;
+          examplePageHeading.innerText = pageTitle;
+
+          // handle aria-current
+          for (var n = 0; n < links.length; n++) {
+            links[n].removeAttribute('aria-current');
+          }
+          event.target.setAttribute('aria-current', 'page');
+        });
+      }
+    });
   },
   false
 );
diff --git a/test/tests/disclosure_navigation_hybrid.js b/test/tests/disclosure_navigation_hybrid.js
@@ -79,18 +79,14 @@ ariaTest(
     for (let b = 0; b < buttons.length; b++) {
       const links = await t.context.queryElements(t, 'a', menus[b]);
 
-      for (let l = 0; l < links.length; l++) {
+      if (links.length > 0) {
         await buttons[b].click();
-        await links[l].click();
-
+        await links[0].click();
+        
         t.is(
-          await links[l].getAttribute('aria-current'),
+          await links[0].getAttribute('aria-current'),
           'page',
-          'after clicking link at index ' +
-            l +
-            ' on menu ' +
-            b +
-            'aria-current should be set to page'
+          `after clicking link at index 0 on menu ${b}, aria-current should be set to page`
         );
 
         let ariaCurrentLinks = await t.context.queryElements(
@@ -101,11 +97,7 @@ ariaTest(
         t.is(
           ariaCurrentLinks.length,
           1,
-          'after clicking link at index ' +
-            l +
-            ' on menu ' +
-            b +
-            ', only one link should have aria-current set'
+          `after clicking link at index 0 on menu ${b}, only one link should have aria-current set`
         );
       }
     }