From ff89b7993467dbe56f230d15c12689d65b2f4db1 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 17 Jul 2018 09:29:17 +0100 Subject: [PATCH] Bind event handlers on the details `summary` only MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 2 +- src/components/details/details.test.js | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/details/details.js b/src/components/details/details.js index 7b011a0c98..61bdb341b4 100644 --- a/src/components/details/details.js +++ b/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)) } /** diff --git a/src/components/details/details.test.js b/src/components/details/details.test.js index 01aa19ee51..e4459a7474 100644 --- a/src/components/details/details.test.js +++ b/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' })