Fix accordion underline hover state being removed when hovering plus/minus symbol #1778
Conversation
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.
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1778
36degrees
changed the title
There was a problem hiding this comment.
Since the current behaviour relies on the parent having relative positioning then moving it inside another child logically doesnt change the behaviour, only risk I could think of is that the accessible name for the button is changed but that doesnt seem likely given that the icon has aria-hidden=true applied.
So I'm happy to approve given that you are doing cross browser testing.
|
This does change the behaviour in Firefox if using a custom colour scheme – the controls end up black (no matter what foreground colour is chosen, it seems) like the rest of the Before
After
|
|
@36degrees that's unfortunate but I would argue if the darker text was a usability issue in general then that text is still the most important clickable part of the component. So given that we're improving the usability elsewhere feels like a decent compromise to me... |
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.
Browser testing
Fixes #1769