Fix bug when getting target element from URL hash

When searching for the target element we now restrict this to the accordion component, instead of the searching the entire document.

The html fixture was also updated in the related test to add a closing div tag that was missing.

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Fix bug when getting target element from URL hash in accordion component ([PR #2985](https://github.com/alphagov/govuk_publishing_components/pull/2985))
+
 ## 30.7.3
 
 * Lint ga4-core ([PR #2982](https://github.com/alphagov/govuk_publishing_components/pull/2982))

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

@@ -59,11 +59,9 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
 
   // Navigate to and open accordions with anchored content on page load if a hash is present
   GemAccordion.prototype.openByAnchorOnLoad = function () {
+    if (!window.location.hash) return
     var splitHash = window.location.hash.split('#')[1]
-
-    if (window.location.hash && document.getElementById(splitHash)) {
-      this.openForAnchor(splitHash)
-    }
+    this.openForAnchor(splitHash)
   }
 
   // Add event listeners for links to open accordion sections when navigated to using said anchor links on the page
@@ -80,7 +78,9 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
 
   // Find the parent accordion section for the given id and open it
   GemAccordion.prototype.openForAnchor = function (hash) {
-    var target = document.getElementById(hash)
+    hash = hash.replace(':', '\\:')
+    var target = this.$module.querySelector('#' + hash)
+    if (!target) return
     var $section = this.getContainingSection(target)
     var $header = $section.querySelector(this.sectionHeader)
     var $expanded = this.getContainingSection($section)

spec/javascripts/components/accordion-spec.js

@@ -24,6 +24,7 @@ describe('Accordion component', function () {
             '</button>' +
           '</h2>' +
         '</div>' +
+      '</div>' +
       '<div class="govuk-accordion__section">' +
         '<div class="govuk-accordion__section-header">' +
           '<h2 class="govuk-accordion__section-heading">' +