Move access to section content to AccordionSection

Author: romaricpascal

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

@@ -26,6 +26,21 @@ export class AccordionSection extends Component {
       })
     }
 
+    // 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.
+    // If that's the case, we can always wrap this in a setter
+    this.$content = this.$root.querySelector(
+      `.govuk-accordion__section-content`
+    )
+
+    if (!this.$content) {
+      throw new ElementError({
+        component: AccordionSection,
+        identifier: `Section content (\`<div class="govuk-accordion__section-content">\`)`
+      })
+    }
+
     this.$toggleIcon = createElement('span', {
       class: 'govuk-accordion-nav__chevron'
     })

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

@@ -29,9 +29,6 @@ const iconOpenModifier = 'govuk-accordion-nav__chevron--down'
 /** @private */
 const sectionSummaryClass = 'govuk-accordion__section-summary'
 
-/** @private */
-const sectionContentClass = 'govuk-accordion__section-content'
-
 /**
  * Accordion component
  *
@@ -373,14 +370,7 @@ export class Accordion extends ConfigurableComponent {
     const $showHideIcon = section.$toggleIcon
     const $showHideText = section.$toggleText
     const $button = $section.querySelector(`.${sectionButtonClass}`)
-    const $content = $section.querySelector(`.${sectionContentClass}`)
-
-    if (!$content) {
-      throw new ElementError({
-        component: Accordion,
-        identifier: `Section content (\`<div class="${sectionContentClass}">\`)`
-      })
-    }
+    const $content = section.$content
 
     if (!$button) {
       // Return early for elements we create

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

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