Issue 4925 - Create accordion component for Help Center

static/js/main.js

Index: static/js/main.js
===================================================================
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -44,10 +44,118 @@
     {
       customSelectEls[i]
         .addEventListener("click", onClickCustomSelect, false);
       customSelectEls[i]
         .nextElementSibling
         .setAttribute("aria-hidden", "true");
     }
 
+    // Accordion menu
+
+    function Accordion(accordion)
+    {
+      this.accordion = accordion;
+      this.init();

[juliandoucette, 2017/09/26 18:57:06]

NIT: It's unnecessary to separate this constructor logic if we are not planning
to override it later (at which point we could separate it).

[ire, 2017/09/28 14:48:52]

Done.

+    }
+
+    Accordion.prototype.init = function()
+    {
+      var accordionButtons = this.accordion.getElementsByClassName('accordion-toggle-button');
+      
+      for (var i = 0; i < accordionButtons.length; i++)
+      {
+        accordionButtons[i]
+          .addEventListener("click", this.toggleAccordionSection, false);
+        accordionButtons[i]
+          .addEventListener("keydown", this.navigateAccordionHeadings, false);
+
+        // Close all sections except the first
+        if (i !== 0)
+        {
+          accordionButtons[i].setAttribute("aria-expanded", "false");
+          document
+            .getElementById( accordionButtons[i].getAttribute("aria-controls") )
+            .setAttribute("hidden", "true");
+        }
+      }
+    };
+
+    Accordion.prototype.toggleAccordionSection = function()
+    {
+      // Hide currently expanded section
+      var accordion = this.parentElement.parentElement;
+      var expandedButton = accordion.querySelector("button[aria-expanded='true']");
+      if (expandedButton)
+      {
+        expandedButton.setAttribute("aria-expanded", "false");
+        document
+          .getElementById( expandedButton.getAttribute("aria-controls") )
+          .setAttribute("hidden", "true");
+      }
+
+      // If currently expanded section is clicked
+      if (expandedButton === this) return;
+
+      // Expand new section
+      this.setAttribute("aria-expanded", "true");
+      document
+        .getElementById( this.getAttribute("aria-controls") )
+        .removeAttribute("hidden");
+    }
+
+    Accordion.prototype.navigateAccordionHeadings = function(event)

[juliandoucette, 2017/09/26 18:57:06]

Suggest:

Accordion.prototype._onKeyDown(event)
{
  if (event.key === "ArrowUp" || event.keyCode === 38) this.toggleNextSection();
  if (event.key === "ArrowDown" || event.keyCode === 40)
this.togglePrevSection();
}

Accordion.prototype.toggleNextSection()
{
  var toggledSectionBody =
this.accordion.querySelector('[aria-expanded="true"]').parentElement.nextElementSibling;

  if (this.accordion.children[this.accordion.children.length - 1] ===
toggledSectionBody) // if the last section is already expanded
     ...  
}

Accordion.prototype.togglePrevSection()
{
  var toggledSectionHeading =
this.accordion.querySelector('[aria-expanded="true"]').parentElement;

  if (this.accordion.children[0] === toggledSectionHeading) // if the first
section is already expanded
     ...  
}
...

(Or similar - I'm just thinking out loud about how this code could be made
clearer.)

[ire, 2017/09/28 14:48:53]

Made some changes.

+    {
+      var IS_KEY_UP = event.key == 38 || event.keyCode == 38;

[juliandoucette, 2017/09/26 18:57:06]

I think that the value of event.key for up is "ArrowUp" and down is "ArrowDown".

[ire, 2017/09/28 14:48:53]

Done. (Sorry I didn't check :/)

+      var IS_KEY_DOWN = event.key == 40 || event.keyCode == 40;
+
+      if (!IS_KEY_UP && !IS_KEY_DOWN) return;
+
+      var accordion = this.parentElement.parentElement;
+
+      if (IS_KEY_UP)
+      {
+        var prevAccordionBody = this.parentElement.previousElementSibling;
+        if (prevAccordionBody)
+        {
+          prevAccordionBody // .accordion-body
+            .previousElementSibling // .accordion-heading
+            .firstElementChild // .accordion-toggle-button
+            .focus();
+        }
+        else
+        {
+          accordion
+            .lastElementChild // .accordion-body
+            .previousElementSibling // .accordion-heading
+            .firstElementChild // .accordion-toggle-button
+            .focus();
+        }
+      }
+
+      else if (IS_KEY_DOWN)
+      {
+        var nextheading = this.parentElement.nextElementSibling.nextElementSibling;
+        if (nextheading)
+        {
+          nextheading // .accordion-heading
+            .firstElementChild // .accordion-toggle-button
+            .focus();
+        }
+        else
+        {
+          accordion
+            .firstElementChild // .accordion-heading
+            .firstElementChild // .accordion-toggle-button
+            .focus();
+        }
+      }
+
+    }
+
+    var accordions = document.getElementsByClassName('accordion');
+    for (var i = 0; i < accordions.length; i++)
+    {
+      new Accordion(accordions[i]);
+    }
+
   }, false);
 }());