Accordion anchor link navigation breaks with invalid anchor

[andysellick]

I'm not sure I fully understand the exact problem here but raising for further investigation.

The accordion has an option to allow a section to open based on the URL hash. This can break the entire accordion JS if the hash does not match an accordion section, but does match another element.

I found this in the components audit pages (running locally) where accordions are inside tabs. Reloading the page having clicked a tab left the URL hash as #applications, which resulted in the below.

This is the error in the console:

According to the documentation this option can be disabled if the anchor_navigation flag is false, but this didn't change the problem (this flag defaults to false, and I wasn't setting it).

Thanks to @owenatgov for helping debug this.

[andysellick]

@owenatgov I'm trying to work out what else needs fixing on this. I thought there might be a problem if the anchor link matched both an accordion section and a tab (for example) but that shouldn't happen because IDs are unique. Can you clarify what else needs fixing?

[MartinJJones]

@andysellick following on from the frontend triage meeting yesterday.

An issue exists in the component given the steps below:

• anchor_navigation flag is passed as true
• an id is passed in for an element that exists in the document but is not related to the accordion, a heading for example
• we then get the same error as before in the getContainingSection method

Broken example - id in the URL is for a regular heading element that exists in the document, but is separate to the accordion https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#section-title

A possible fix could be to get the id from the module instead of the document: https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/javascripts/govuk_publishing_components/components/accordion.js#L64

There may be other fixes and refactoring required when testing further.