Move button placeholder access to AccordionSection

Ultimately, it shouldn't get accessed by the `Accordion`, but while refactoring
it'll be publicly accessible.

Author: romaricpascal

packages/govuk-frontend/src/govuk/components/accordion/accordion-section.mjs

@@ -26,6 +26,16 @@ export class AccordionSection extends Component {
       })
     }
 
+    this.$buttonPlaceholder = this.$header.querySelector(
+      `.govuk-accordion__section-button`
+    )
+    if (!this.$buttonPlaceholder) {
+      throw new ElementError({
+        component: AccordionSection,
+        identifier: `Section button placeholder (\`<span class="govuk-accordion__section-button">\`)`
+      })
+    }
+
     // Technically slightly different from the current implementation
     // However, I'm not sure we originally intended to check whether the content element
     // is present every time we toggle a section.

packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs

@@ -182,7 +182,6 @@ export class Accordion extends ConfigurableComponent {
     // before it gets moved to the `AccordionSection` class
     const $header = section.$header
 
-    const $span = $header.querySelector(`.${sectionButtonClass}`)
     const $heading = $header.querySelector(`.${sectionHeadingClass}`)
     const $summary = $header.querySelector(`.${sectionSummaryClass}`)
 
@@ -193,13 +192,6 @@ export class Accordion extends ConfigurableComponent {
       })
     }
 
-    if (!$span) {
-      throw new ElementError({
-        component: Accordion,
-        identifier: `Section button placeholder (\`<span class="${sectionButtonClass}">\`)`
-      })
-    }
-
     // Create a button element that will replace the
     // '.govuk-accordion__section-button' span
     const $button = createElement('button', {
@@ -209,7 +201,7 @@ export class Accordion extends ConfigurableComponent {
 
     // Copy all attributes from $span to $button (except `id`, which gets added
     // to the `$headingText` element)
-    for (const attr of Array.from($span.attributes)) {
+    for (const attr of Array.from(section.$buttonPlaceholder.attributes)) {
       if (attr.name !== 'id') {
         $button.setAttribute(attr.name, attr.value)
       }
@@ -220,7 +212,7 @@ export class Accordion extends ConfigurableComponent {
     // 2. Punctuation
     // 3. (Optional: Summary line followed by punctuation)
     // 4. Show / hide toggle
-    $button.appendChild(this.createHeadingText($span))
+    $button.appendChild(this.createHeadingText(section.$buttonPlaceholder))
     $button.appendChild(this.getButtonPunctuationEl())
 
     // If summary content exists add to DOM in correct order
@@ -234,17 +226,17 @@ export class Accordion extends ConfigurableComponent {
 
     $button.appendChild(section.$toggle)
 
-    $heading.removeChild($span)
+    $heading.removeChild(section.$buttonPlaceholder)
     $heading.appendChild($button)
   }
 
   /**
    * Creates the `<span>` containing the text of the section's heading
    *
-   * @param {Element} $span - The heading of the span
+   * @param {Element} $buttonPlaceholder - The heading of the span
    * @returns {HTMLSpanElement} - The `<span>` containing the text of the section's heading
    */
-  createHeadingText($span) {
+  createHeadingText($buttonPlaceholder) {
     // Create an inner heading text container to limit the width of the focus
     // state
     const $headingTextFocus = createElement(
@@ -254,15 +246,15 @@ export class Accordion extends ConfigurableComponent {
       },
       // span could contain HTML elements which need moving to the new span
       // (see https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content)
-      Array.from($span.childNodes)
+      Array.from($buttonPlaceholder.childNodes)
     )
 
     // Create container for heading text so it can be styled
     const $headingText = createElement(
       'span',
       {
         class: sectionHeadingTextClass,
-        id: $span.id
+        id: $buttonPlaceholder.id
       },
       [$headingTextFocus]
     )

packages/govuk-frontend/src/govuk/components/accordion/accordion.puppeteer.test.js

@@ -836,7 +836,7 @@ describe('/components/accordion', () => {
             cause: {
               name: 'ElementError',
               message:
-                'govuk-accordion: Section button placeholder (`<span class="govuk-accordion__section-button">`) not found'
+                'govuk-accordion-section: Section button placeholder (`<span class="govuk-accordion__section-button">`) not found'
             }
           })
         })