Merge pull request #4069 from alphagov/update-accordion-initialisatio…

…n-check

Add guard to accordion component init method

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Add guard to accordion component init method ([PR #4069](https://github.com/alphagov/govuk_publishing_components/pull/4069))
 * Prevent screen readers from announcing document list child/parts items dashes ([PR #4066](https://github.com/alphagov/govuk_publishing_components/pull/4066))
 * Align checkboxes component more toward Design System ([PR #4061](https://github.com/alphagov/govuk_publishing_components/pull/4061))
 * Add govuk-frontend checking to the component auditing ([PR #4058](https://github.com/alphagov/govuk_publishing_components/pull/4058))

app/assets/javascripts/govuk_publishing_components/components/accordion.js

@@ -24,6 +24,11 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
   }
 
   GemAccordion.prototype.init = function () {
+    // Do not initialise if the accordion component from govuk-frontend has not initialised
+    if (this.$module.querySelector(this.showAllControls) === null) {
+      return
+    }
+
     // Indicate that JavaScript has worked
     this.$module.querySelector(this.showAllControls).classList.add('gem-c-accordion__show-all')
 

spec/javascripts/components/accordion-spec.js

@@ -10,7 +10,7 @@ describe('Accordion component', function () {
   var html =
     '<div class="gem-c-accordion" data-show-text="Show" data-hide-text="Hide" data-show-all-text="Show all sections" data-hide-all-text="Hide all sections" data-this-section-visually-hidden=" this section">' +
       '<div class="govuk-accordion__controls">' +
-        '<button type="button" class="govuk-accordion__show-all gem-c-accordion__show-all" aria-expanded="false">' +
+        '<button type="button" class="govuk-accordion__show-all" aria-expanded="false">' +
           '<span class="govuk-accordion__show-all-text">Show all sections</span>' +
         '</button>' +
       '</div>' +
@@ -67,6 +67,14 @@ describe('Accordion component', function () {
     }
   })
 
+  it('does not initialise if the accordion from govuk-frontend has not initialised', function () {
+    var accordionShowAllButton = accordion.querySelector('.govuk-accordion__show-all')
+    accordionShowAllButton.classList.remove('govuk-accordion__show-all')
+    startAccordion()
+
+    expect(accordion.querySelector('.govuk-accordion__controls button')).not.toHaveClass('gem-c-accordion__show-all')
+  })
+
   it('applies custom attributes to click event if specified in section', function () {
     accordion.setAttribute('data-track-sections', 'true')