Accordion focus state in Windows High Contrast Mode has an overhanging border

[hannalaakso]

What

This is a fairly minor issue but there's an odd looking overhanging right border on the new accordion focus state in Windows High Contrast mode, see below:

This appears to be caused by the pseudo element fix that is there to limit the width of the focus state to the width of its contents (it was originally introduced to fix an issue in NVDA but I think we found in later testing that it might not be necessary for NVDA, only to make the focus state work - we should clarify this in the code comments to be clear why the fix is there).

This is what I suspect anyway because it seems to happen to all the elements that are followed by an element with the above mentioned :before, as is the case here where I duplicated the "Show" element - the first "Show" now has the overhanging border which the last one (the same element) still doesn't have:

If you manipulate the positioning in the pseudo elements so that the elements flow to one line, you can see the overhanging border is created by overlapping borders.

Why

The actual Windows High Contrast Mode bug is a minor issue but it could be indicative of other issues we haven't discovered around the pseudo element fix.

Who needs to know about this

Developers

Done when

• Check first if the pseudo element fix is still definitely needed for NVDA and change f4ba458 if it isn't so that we record accurately why the fix is there before we publish the component
• If it isn't, consider prototyping an alternative solution in JS to handle the width of the focus state and test that it works. Essentially, we might be able to set the focus state inside the three containers (heading, summary, "Show") on yet another <span> we need to add inside of them so that we can set the width of the focus state only to span the width of the text.

[hannalaakso]

It seems that the fix is still useful to potentially improve the experience in NVDA reader mode (I say 'potentially' since Anika didn't necessarily consider it an issue as discussed here). It makes NVDA read out the button content as one thing in reader mode, instead of treating them as separate elements. Tested in NVDA 2021.1 with FF 91.

We still have the minor issue of the overhanging in Windows High Contrast Mode but this is unlikely to be a blocker for users.

I've also not to tried to prototype an alternative approach as discussed in the PR description as a potential action, this is something we could look at separately.

Going to remove this issue from the sprint board but leave it open for now but in case other users pick up on the Windows High Contrast mode issue.

[hannalaakso]

Alternative to the NVDA browse mode adjustment added in 4a818c3 and c6cd841 which seems to have resolved this.

[hannalaakso]

Reviewed by @vanitabarrett, moving to done.