Copy heading text ID from span and test it

Copy the section heading text ID directly from the span to the heading text, instead of constructing
it in the JS, since the span ID attribute comes directly from the component template, as does
the expandable content area `aria-labelledby` which references the ID.

I considered, but decided against, programmatically adding the summary line ID (if it exists) to the
expandable content area `aria-labelledby` in addition to the heading ID since in the current component
the heading text, which the expandable content `aria-labelledby` refers to, in turn has an
`aria-labelledby` which references the summary. However, at least in the Chrome accessibility tree it
appears that this link doesn't mean that the current component expandable area gets access to the summary
line via the heading.

src/govuk/components/accordion/accordion.js

@@ -129,10 +129,12 @@ Accordion.prototype.constructHeaderMarkup = function ($headerWrapper, index) {
   }
 
   // Create container for heading text so it can be styled
-  // ID set to allow the heading alone to be referenced without "this section"
   var $headingText = document.createElement('span')
   $headingText.classList.add(this.sectionHeadingTextClass)
-  $headingText.setAttribute('id', this.moduleId + '-heading-' + (index + 1))
+  // Copy the span ID to the heading text to allow it to be referenced by `aria-labelledby` on the
+  // hidden content area without "Show this section"
+  $headingText.id = $span.id
+
   // Create an inner heading text container to limit the width of the focus state
   var $headingTextFocus = document.createElement('span')
   $headingTextFocus.classList.add(this.sectionHeadingTextFocusClass)

src/govuk/components/accordion/accordion.test.js

@@ -249,6 +249,18 @@ describe('/components/accordion', () => {
           expect(hiddenText).toEqual(numberOfExampleSections)
         })
       })
+
+      describe('expandable content', () => {
+        it('should have an aria-labelledby that matches the heading text ID', async () => {
+          await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
+
+          const ariaLabelledByValue = await page.evaluate(() => document.body.querySelector('.govuk-accordion__section-content').getAttribute('aria-labelledby'))
+
+          const headingTextId = await page.evaluate(() => document.body.querySelector('.govuk-accordion__section-heading-text').getAttribute('id'))
+
+          expect(ariaLabelledByValue).toEqual(headingTextId)
+        })
+      })
     })
   })
 })