Remove accordion icon added by JS and add to twig instead (#200)

* Remove accordion icon added by JS and add to twig instead * Moved button from JS to Twig * Removed un-needed commented code * Removed more commented code * Updated button to hidden in twig and un-hidden by JS and updated destroy() * Corrected button selector code * Removed unrequired class from button * Hide the button in CSS when it has attribute "hidden" * Added default heading text, hide in JS * If heading or buttons don't exist
localgovdrupal · Oct 1, 2024 · ba3be61 · ba3be61
1 parent 3728f14
commit ba3be61
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 60 deletions.
diff --git a/modules/localgov_subsites_paragraphs/css/localgov-accordion.css b/modules/localgov_subsites_paragraphs/css/localgov-accordion.css
@@ -8,6 +8,10 @@
   text-align: left;
 }
 
+.accordion-pane__title button[hidden] {
+	display: none;
+}
+
 .accordion--initialised .accordion-pane__content {
   display: none;
 }

diff --git a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
@@ -117,83 +117,97 @@
           const pane = accordionPanes[i];
           const content = pane.querySelectorAll('.accordion-pane__content');
           const title = pane.querySelectorAll('.accordion-pane__title');
-          const titleText = title[0].textContent;
-          const button = document.createElement('button');
-          const text = document.createTextNode(titleText);
+          const button = title[0].querySelector('button');
+          const heading = title[0].querySelector('.accordion-pane__heading');
           const id = `accordion-content-${index}-${i}`;
 
           // Add id attribute to all pane content elements.
           content[0].setAttribute('id', id);
 
-          // Add show/hide button to each accordion title.
-          button.appendChild(text);
-          // Add an initially hidden icon which can be used if required to make accordions fit GDS standard
-          button.innerHTML += "<span class='accordion-icon' aria-hidden='true'></span>";
-          button.setAttribute('aria-expanded', 'false');
-          button.setAttribute('aria-controls', id);
-
-          // Add click event listener to the show/hide button.
-          button.addEventListener('click', e => {
-            const targetPaneId = e.target.getAttribute('aria-controls');
-            const targetPane = accordion.querySelectorAll(`#${targetPaneId}`);
-            const openPane = accordion.querySelectorAll(`.${openClass}`);
-
-            // Check the current state of the button and the content it controls.
-            if (e.target.getAttribute('aria-expanded') === 'false') {
-              // Close currently open pane.
-              if (openPane.length && !allowMultiple) {
-                const openPaneId = openPane[0].getAttribute('id');
-                const openPaneButton = accordion.querySelectorAll(
-                  `[aria-controls="${openPaneId}"]`,
-                );
-
-                collapsePane(openPaneButton[0], openPane[0]);
-              }
+          // Hide default Heading text
+          if (heading) {  
+            heading.hidden = true;  
+          };
+
+          if (button) {
+            // Add aria-controls id to button and un-hide
+            button.setAttribute('aria-controls', id);
+            button.hidden = false;
+
+            // Add click event listener to the show/hide button.
+            button.addEventListener('click', e => {
+              const targetPaneId = e.target.getAttribute('aria-controls');
+              const targetPane = accordion.querySelectorAll(`#${targetPaneId}`);
+              const openPane = accordion.querySelectorAll(`.${openClass}`);
 
-              // Show new pane.
-              expandPane(e.target, targetPane[0]);
-            } else {
-              // If target pane is currently open, close it.
-              collapsePane(e.target, targetPane[0]);
-            }
+              // Check the current state of the button and the content it controls.
+              if (e.target.getAttribute('aria-expanded') === 'false') {
+                // Close currently open pane.
+                if (openPane.length && !allowMultiple) {
+                  const openPaneId = openPane[0].getAttribute('id');
+                  const openPaneButton = accordion.querySelectorAll(
+                    `[aria-controls="${openPaneId}"]`,
+                  );
 
-            if (showHideButton) {
-              const accordionState = getAccordionState();
-              const toggleState = showHideButton.getAttribute('aria-expanded') === 'true';
+                  collapsePane(openPaneButton[0], openPane[0]);
+                }
 
-              if (
-                (accordionState === 1 && !toggleState) ||
-                (!accordionState && toggleState)
-              ) {
-                toggleAll();
+                // Show new pane.
+                expandPane(e.target, targetPane[0]);
+              } else {
+                // If target pane is currently open, close it.
+                collapsePane(e.target, targetPane[0]);
               }
-            }
-          });
 
-          if (displayShowHide) {
-            showHideButton = accordion.querySelector('.accordion-toggle-all');
-            showHideButton.hidden = false;
-            showHideButton.addEventListener('click', toggleAll);
-            showHideButtonLabel = showHideButton.querySelector('.accordion-text');
-          }
+              if (showHideButton) {
+                const accordionState = getAccordionState();
+                const toggleState = showHideButton.getAttribute('aria-expanded') === 'true';
+
+                if (
+                  (accordionState === 1 && !toggleState) ||
+                  (!accordionState && toggleState)
+                ) {
+                  toggleAll();
+                }
+              }
+            });
+          };
 
-          // Add init class.
-          accordion.classList.add(initClass);
+          if (button) {
+            if (displayShowHide) {
+              showHideButton = accordion.querySelector('.accordion-toggle-all');
+              showHideButton.hidden = false;
+              showHideButton.addEventListener('click', toggleAll);
+              showHideButtonLabel = showHideButton.querySelector('.accordion-text');
+            }
+
+            // Add init class.
+            accordion.classList.add(initClass);
+          };
 
-          // Add show/hide button to each accordion pane title element.
-          title[0].children[0].innerHTML = '';
-          title[0].children[0].appendChild(button);
         }
       };
 
       const destroy = () => {
         for (let i = 0; i < numberOfPanes; i++) {
-          // Remove buttons from accordion pane titles.
+          // Remove id attributes from buttons in accordion pane titles.
           const button = accordion
-            .querySelectorAll('.accordion-pane__title')
-            [i].querySelectorAll('button');
-          if (button.length > 0) {
-            button[0].outerHTML = button[0].innerHTML;
+            .querySelectorAll('.accordion-pane__title')[i]
+            .querySelector('button')
+            .removeAttribute('id');
+
+          // Hide buttons in accordion pane titles.
+          if (button) {
+            button.hidden = true;
+          }
+
+          // Un-hide default heading text
+          const heading =  accordion
+            .querySelectorAll('.accordion-pane__title')[i]
+            .querySelector('.accordion-pane__heading');
+
+          if (heading) {
+            heading.hidden = false;
           }
 
           // Remove id attributes from pane content elements.

diff --git a/modules/localgov_subsites_paragraphs/localgov_subsites_paragraphs.module b/modules/localgov_subsites_paragraphs/localgov_subsites_paragraphs.module
@@ -122,6 +122,8 @@ function localgov_subsites_paragraphs_preprocess_paragraph(&$variables) {
     $heading_level = $paragraph->get('localgov_heading_level')->value;
     if (is_string($heading_level)) {
       $variables['heading'] = _localgov_subsites_paragraphs_create_heading($heading_text, $heading_level);
+      $variables['heading_text'] = $heading_text;
+      $variables['heading_level'] = $heading_level;
     }
   }
 

diff --git a/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig b/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig
@@ -52,7 +52,13 @@
   <div{{ attributes.addClass(classes) }}>
     {% block content %}
       <div class="accordion-pane__title">
-        {{ heading }}
+        <{{ heading_level }}>
+          <span class="accordion-pane__heading">{{ heading_text }}</span>
+          <button aria-expanded="false" hidden>
+            {{ heading_text }}
+            <span class='accordion-icon' aria-hidden='true'></span>
+          </button>
+        </{{ heading_level }}>
       </div>
       <div class="accordion-pane__content">
         {{ content.localgov_body_text }}