From 4b81e5ab5500e1933368ae4081e2f7d0660a676b Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 31 Mar 2020 16:21:55 +0100 Subject: [PATCH 1/2] Append icon to accordion button, not heading MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit At present, when you hover over a section the section title gets the affordance of an underline to show which element is being interacted with – except if you hover over the plus/minus 'control', in which case the underline disappears again. This happens because the icon is appended to the heading, rather than the button, and so the button and icon are siblings, and the icon being absolutely positioned overlays the button. (The only reason that you can click the control to toggle the section is that the click handler is bound to the heading, rather than the button. If the click handler was bound to the button, clicking the icon would not work.) Append the icon to the button rather than the heading, which makes it part of the button, and thus hovering the icon will correctly trigger the button hover styles. --- src/govuk/components/accordion/accordion.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/govuk/components/accordion/accordion.js b/src/govuk/components/accordion/accordion.js index 6dde305885..e39db053d3 100644 --- a/src/govuk/components/accordion/accordion.js +++ b/src/govuk/components/accordion/accordion.js @@ -135,7 +135,7 @@ Accordion.prototype.initHeaderAttributes = function ($headerWrapper, index) { icon.className = this.iconClass icon.setAttribute('aria-hidden', 'true') - $heading.appendChild(icon) + $button.appendChild(icon) } // When section toggled, set and store state From 0aa5d51cf2a5d908449a339a7033d2f55cb4f62c Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 31 Mar 2020 16:24:17 +0100 Subject: [PATCH 2/2] Add to changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e3fac62d6d..b9d5851423 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ ### Fixes - [Pull request #1765: Import textarea from character count](https://github.com/alphagov/govuk-frontend/pull/1765). +- [Pull request #1778: Fix accordion underline hover state being removed when hovering plus/minus symbol](https://github.com/alphagov/govuk-frontend/pull/1778). ## 3.6.0 (Feature release)