Accordion Example: fix issue #455 by adding aria-disabled (pull #460)

If allow toggle is not set, that is, if one panel must be expanded at all times, put aria-disabled=true on the header of the expanded panel.

examples/accordion/js/accordion.js

@@ -28,13 +28,23 @@ Array.from(document.querySelectorAll('.Accordion')).forEach(function (accordion)
         active.setAttribute('aria-expanded', 'false');
         // Hide the accordion sections, using aria-controls to specify the desired section
         document.getElementById(active.getAttribute('aria-controls')).setAttribute('hidden', '');
+
+        // When toggling is not allowed, clean up disabled state
+        if (!allowToggle) {
+          active.removeAttribute('aria-disabled');
+        }
       }
 
       if (!isExpanded) {
         // Set the expanded state on the triggering element
         target.setAttribute('aria-expanded', 'true');
         // Hide the accordion sections, using aria-controls to specify the desired section
         document.getElementById(target.getAttribute('aria-controls')).removeAttribute('hidden');
+
+        // If toggling is not allowed, set disabled state on trigger
+        if (!allowToggle) {
+          target.setAttribute('aria-disabled', 'true');
+        }
       }
       else if (allowToggle && isExpanded) {
         // Set the expanded state on the triggering element
@@ -97,4 +107,16 @@ Array.from(document.querySelectorAll('.Accordion')).forEach(function (accordion)
     }
   });
 
+  // Minor setup: will set disabled state, via aria-disabled, to an
+  // expanded/ active accordion which is not allowed to be toggled close
+  if (!allowToggle) {
+    // Get the first expanded/ active accordion
+    var expanded = accordion.querySelector('[aria-expanded="true"]');
+
+    // If an expanded/ active accordion is found, disable
+    if (expanded) {
+      expanded.setAttribute('aria-disabled', 'true');
+    }
+  }
+
 });