Improve accordion presentation in Firefox High Contrast mode

[hannalaakso]

What

We should review whether we want to improve the rendering of the component in Firefox High Contrast mode, the new behaviour feels like a potential regression since the buttons are now large block containers.

The content also slightly breaks out of the container due to the borders on the button being reset. This is less of an issue but we could look at it whilst reviewing the button size in FF High Contrast mode.

Why

We want to ensure that the component can be used in FF High Contrast mode. It might be safest to stay close to the existing behaviour since we don't have any evidence that an alternative design would work for users.

Who needs to know about this

Developers

Done when

• [x] At least two developers have discussed a potential change to the visual button presentation
• [x] If required, we've implemented a fix for the button size
• [x] Optional: review the content slightly breaking out of the button container

[hannalaakso]

We'll check in on this on the accessibility clinic. Below, the current visual, the new visual and an alternative which is perhaps somewhat closer to the current behaviour as the buttons fit the size of their contents. But we're not really sure whether the alternative is an improvement in any sense, or whether the new visual that demonstrates the size of the touch area is a better solution.

Current FF high contrast mode

New FF High Contrast mode

Alternative new FF High Contrast mode

[hannalaakso]

From accessibility clinic:

The team showed a potential change where the button is limited to the width of the content rather than being full width, so it visually looks less like big white blocks. Gut instinct is that this may be a better version, but it may still be an issue that the button contains so much content as this isn’t something you see very often. It may also confuse things further as the click area would still be the whole button even if that wasn’t highlighted as white in high contrast mode.

If we keep the existing design, we should add a border between the sections to

Tweak accordion in high contrast mode to visually separate accordion buttons/sections a bit more

We'll discuss the alternatives in our catch up next week, moving to Blocked until we've had the meeting.

[hannalaakso]

Fix pushed to https://github.com/alphagov/govuk-frontend/pull/2257

We didn't implement the alternative design discussed at the accessibility clinic because that could have led to a WCAG fail unless we changed the hover state style too (currently both the hover state and <button> span the whole of each section in the accordion - if we reduce the size of the button, it's possible that we would need to change the hover state too to reflect the reduced size of the button to meet 4.1.2 so that both keyboard and mouse users receive equivalent feedback).

Bottom border fix to separate sections

We've added a thick transparent bottom border (similar to what we do on the cookie banner to solve a similar issue) to separate the sections a bit more visually and this seems to improve the presentation.

Windows High Contrast Mode Edge 91, with border fix

Firefox when user changes their colours, with border fix

Contained elements break out by 1px in Firefox when user changes colours

This impacts Firefox High Contrast mode since it shows the outline of <button> elements by giving them a background colour. Windows High Contrast Mode does not do this, so the issue isn't visible there.

We remove the native button border and margin which makes the enclosed elements (which are aligned left and flush against the edge of the component) break out of the button container by 1px, creating a slightly jagged edge when user changes the colours in the browser in Firefox - the screen grab below demonstrates this.

This issue is actually present in the current Design System accordion too: the heading inside the button protrudes very slightly out of the container when user changes colours in Firefox but this isn't noticeable since in that design the button is only around the heading element.

We had initially considered adding a Firefox-high-contrast-mode only hack in this new design to hide the overflow of the container but this interferes with the rendering of the focus state, so I think we'll have to leave it as is, it's a minor issue.

More discussion about the issues discussed in this comment can be found here: https://github.com/alphagov/govuk-frontend/issues/2321