Move heading text to AccordionSection

This allows to remove the variable storing the CSS class, as well as drop an `if` that was only to satisfy TypeScript being unaware that the element existed for sure as we had created it ourselves after we used `querySelector`

Author: romaricpascal

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

@@ -36,6 +36,8 @@ export class AccordionSection extends Component {
       })
     }
 
+    this.$headingText = createHeadingText(this.$buttonPlaceholder)
+
     // 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.
@@ -63,6 +65,38 @@ export class AccordionSection extends Component {
   }
 }
 
+/**
+ * Creates the `<span>` containing the text of the section's heading
+ *
+ * @param {Element} $buttonPlaceholder - The heading of the span
+ * @returns {HTMLSpanElement} - The `<span>` containing the text of the section's heading
+ */
+function createHeadingText($buttonPlaceholder) {
+  // Create an inner heading text container to limit the width of the focus
+  // state
+  const $headingTextFocus = createElement(
+    'span',
+    {
+      class: 'govuk-accordion__section-heading-text-focus'
+    },
+    // 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($buttonPlaceholder.childNodes)
+  )
+
+  // Create container for heading text so it can be styled
+  const $headingText = createElement(
+    'span',
+    {
+      class: 'govuk-accordion__section-heading-text',
+      id: $buttonPlaceholder.id
+    },
+    [$headingTextFocus]
+  )
+
+  return $headingText
+}
+
 /**
  * Creates a `<span>` rendering the 'Show'/'Hide' toggle
  *

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

@@ -17,9 +17,6 @@ const sectionButtonClass = 'govuk-accordion__section-button'
 /** @private */
 const sectionHeadingClass = 'govuk-accordion__section-heading'
 
-/** @private */
-const sectionHeadingTextClass = 'govuk-accordion__section-heading-text'
-
 /** @private */
 const iconClass = 'govuk-accordion-nav__chevron'
 
@@ -212,7 +209,7 @@ export class Accordion extends ConfigurableComponent {
     // 2. Punctuation
     // 3. (Optional: Summary line followed by punctuation)
     // 4. Show / hide toggle
-    $button.appendChild(this.createHeadingText(section.$buttonPlaceholder))
+    $button.appendChild(section.$headingText)
     $button.appendChild(this.getButtonPunctuationEl())
 
     // If summary content exists add to DOM in correct order
@@ -230,38 +227,6 @@ export class Accordion extends ConfigurableComponent {
     $heading.appendChild($button)
   }
 
-  /**
-   * Creates the `<span>` containing the text of the section's heading
-   *
-   * @param {Element} $buttonPlaceholder - The heading of the span
-   * @returns {HTMLSpanElement} - The `<span>` containing the text of the section's heading
-   */
-  createHeadingText($buttonPlaceholder) {
-    // Create an inner heading text container to limit the width of the focus
-    // state
-    const $headingTextFocus = createElement(
-      'span',
-      {
-        class: 'govuk-accordion__section-heading-text-focus'
-      },
-      // 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($buttonPlaceholder.childNodes)
-    )
-
-    // Create container for heading text so it can be styled
-    const $headingText = createElement(
-      'span',
-      {
-        class: sectionHeadingTextClass,
-        id: $buttonPlaceholder.id
-      },
-      [$headingTextFocus]
-    )
-
-    return $headingText
-  }
-
   /**
    * Creates the `<span>` element with the summary for the section
    *
@@ -379,10 +344,7 @@ export class Accordion extends ConfigurableComponent {
     // Update aria-label combining
     const ariaLabelParts = []
 
-    const $headingText = $section.querySelector(`.${sectionHeadingTextClass}`)
-    if ($headingText) {
-      ariaLabelParts.push(`${$headingText.textContent}`.trim())
-    }
+    ariaLabelParts.push(`${section.$headingText.textContent}`.trim())
 
     const $summary = $section.querySelector(`.${sectionSummaryClass}`)
     if ($summary) {