From 859c06cd345397587251e72ce4ed12d1d9daa849 Mon Sep 17 00:00:00 2001
From: Martin Jones <martin.jones@digital.cabinet-office.gov.uk>
Date: Thu, 20 Jun 2024 13:50:35 +0100
Subject: [PATCH] Check govuk-frontend accordion has initialised

When the accordion component from govuk-frontend is initialised, the `govuk-accordion__show-all` class is added to the button element.

It is possible that the accordion component from govuk-frontend does not get initialised, but we have no checks in place to guard against this when initialising the accordion component from the gem.

This change checks if the accordion component from govuk-frontend has initialised before trying to initialise the accordion component from the publishing components gem.

A new test has been added to check it does not initialise, if the accordion from govuk-frontend has not initialised. `gem-c-accordion__show-all` was removed from the fixture as this is added by the JS from the publishing-components accordion.
---
 CHANGELOG.md                                           |  1 +
 .../components/accordion.js                            |  5 +++++
 spec/javascripts/components/accordion-spec.js          | 10 +++++++++-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 00ab8c32e1..79f526e176 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/app/assets/javascripts/govuk_publishing_components/components/accordion.js b/app/assets/javascripts/govuk_publishing_components/components/accordion.js
index e56818c510..07884d121c 100644
--- a/app/assets/javascripts/govuk_publishing_components/components/accordion.js
+++ b/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')
 
diff --git a/spec/javascripts/components/accordion-spec.js b/spec/javascripts/components/accordion-spec.js
index 35a0776672..6501319531 100644
--- a/spec/javascripts/components/accordion-spec.js
+++ b/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')