a11y accordion

Author: zackkrida

assets/css/styles.css

@@ -1,4 +1,25 @@
+function togggleBoolAttr(el, attr) {
+  return attr == "true" ? "false" : "true";
+}
+
+function togggleHiddenAttr(el, attr) {
+  if (attr === true || attr === "hidden") return false;
+  return true;
+}
+
 jQuery(document).ready(function ($) {
+  // Accordions
+  // accordionHeader.click(() => accordionBody where labelledby = accordionHeader.id remove hide)
+  $(".accordion-header").click(function (event) {
+    var $el = $(event.currentTarget);
+    var bodyId = $el.attr("aria-controls");
+    var $accBody = $('[id="' + bodyId + '"]');
+
+    // flip aria expanded
+    $el.attr("aria-expanded", togggleBoolAttr);
+    $accBody.attr("hidden", togggleHiddenAttr);
+  });
+
   // FAQ Page
   if ($(".page-template-template-faq").length > 0) {
     var lock = false;

assets/js/script.js

@@ -35,6 +35,10 @@ body {
   color: $color-dark-slate-gray;
 }
 
+button {
+  font-family: inherit;
+}
+
 // Responsive Font Styles
 // Reduce font sizes when on mobile screens
 // @todo: I think this should become a part of vocabulary.

front/src/styles/base.scss

@@ -37,17 +37,28 @@ span.icon {
 
 // Accordion component
 // @todo: Should this be in vocabulary? Do/will we use this anywhere else?
-
 .accordion {
   .accordion-item {
     border-bottom: 2px solid $color-light-gray;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+
+    .accordion-header {
+      border: none;
+      background-color: transparent;
+      appearance: none;
+      width: 100%;
+      -webkit-appearance: none;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
 
     &:hover {
       cursor: pointer;
     }
+
+    .accordion-body[hidden] {
+      visibility: hidden;
+    }
   }
 }
 

front/src/styles/shame.scss

@@ -10,15 +10,20 @@
   <h2>Frequently Asked Questions</h2>
   <ul class="margin-top-large margin-bottom-large accordion">
     <?php foreach ($faqs as $faq) : ?>
-      <li class="margin-top-big padding-bottom-big body-big accordion-item">
-        <p class="has-color-dark-slate-gray">
-          <?php echo $faq['question']; ?>
-        </p>
-        <span class="margin-left-small icon has-text-black">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792" class="caret">
-            <path fill="currentColor" d="M1426.44 407.864q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45q19-19 45-19h896q26 0 45 19t19 45z"/>
-          </svg>
-        </span>
+      <li class="accordion-item">
+        <button class="accordion-header padding-top-big padding-bottom-big" id="<?php echo 'accordion-'.$faq['question']; ?>" aria-expanded="false" aria-controls="<?php echo 'section-'.$faq['question']; ?>">
+          <span class="has-color-dark-slate-gray body-big has-text-left">
+            <?php echo $faq['question']; ?>
+          </span>
+          <span class="margin-left-small icon has-text-black">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792" class="caret">
+              <path fill="currentColor" d="M1426.44 407.864q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45q19-19 45-19h896q26 0 45 19t19 45z"/>
+            </svg>
+          </span>
+        </button>
+        <div class="accordion-body accordion-body padding-left-small padding-right-small padding-bottom-normal" role="region" aria-labelledby="<?php echo 'accordion-'.$faq['question']; ?>" id="<?php echo 'section-'.$faq['question']; ?>" hidden>
+          <?php echo $faq['answer']; ?>
+        </div>
       </li>
     <?php endforeach; ?>
   </ul>