Bind event handlers on the details summary only

This fixes an issue where clicking the revealed content in browsers that do not support the native `details` element causes the details element to collapse. (Fixes #911)

It also fixes an issue in all browsers where clicking the revealed content ‘flips’ the aria-expanded attribute on the summary element and the aria-hidden attribute on the content element, causing them to get out of sync with the visible state of the component.

src/components/details/details.js

@@ -111,7 +111,7 @@ Details.prototype.init = function () {
   }
 
   // Bind an event to handle summary elements
-  this.handleInputs($module, this.setAttributes.bind(this))
+  this.handleInputs($summary, this.setAttributes.bind(this))
 }
 
 /**

src/components/details/details.test.js

@@ -111,6 +111,15 @@ describe('/components/details', () => {
       expect(detailsOpen).not.toBeNull()
     })
 
+    it('should not be affected when clicking the revealed content', async () => {
+      await page.goto(baseUrl + '/components/details/expanded/preview', { waitUntil: 'load' })
+
+      await page.click('.govuk-details__text')
+
+      const summaryAriaExpanded = await page.evaluate(() => document.body.getElementsByTagName('summary')[0].getAttribute('aria-expanded'))
+      expect(summaryAriaExpanded).toBe('true')
+    })
+
     describe('when details is triggered', () => {
       it('should indicate the expanded state of the summary using aria-expanded', async () => {
         await page.goto(baseUrl + '/components/details/expanded/preview', { waitUntil: 'load' })