Remove accordion icon added by JS and add to twig instead

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;
 }

modules/localgov_subsites_paragraphs/js/localgov-accordion.js

@@ -117,20 +117,19 @@
           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');
+          // Add aria-controls id to button and un-hide
           button.setAttribute('aria-controls', id);
+          button.hidden = false;
+
+          // Hide default Heading text
+          heading.hidden = true;
 
           // Add click event listener to the show/hide button.
           button.addEventListener('click', e => {
@@ -188,13 +187,20 @@
 
       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.
+          button.hidden = true;
+
+          // Un-hide default heading text
+          accordion
+            .querySelectorAll('.accordion-pane__title')[i]
+            .querySelector('.accordion-pane__heading')
+            .hidden = false
 
           // Remove id attributes from pane content elements.
           accordionPanes[i]

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;
     }
   }
 

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 }}