Focus behaviour for buttons and anchors

[frobernik]

Bug Report

What is the issue?

The yellow focus indicator is visible after clicking on a button or an anchor.

What steps are required to reproduce the issue?

Mouse click

Move the mouse over the button, click and then move the mouse away. The yellow highlight is shown on the button.

Keyboard

Tab onto the button, tap the enter key and leave. The yellow highlight is shown on the button.

What was the environment where this issue occurred?

• Device: Mac
• Operating System: OSX Big Sur 11.4
• Browser: Chrome
• Browser version: 91.0.4472.106 (Official Build) (x86_64)
• NHS.UK frontend package version: nhs-frontend v3.0.3
• Node version: v14.17.0
• npm version: v6.14.3

Is there anything else you think would be useful in recreating the issue?

We're aware this could be an accessibility feature and would like some input (no pun intended) on whether the behaviour is different in more recent versions or whether its the same?

[andymantell]

This is expected behaviour at the moment - the reality is that in both these situations the button is still focused so the yellow highlight is shown correctly. You'll see the same behaviour if you look at the buttons on https://design-system.service.gov.uk/

This is now "fixable" by using https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible but I don't think this is something we would transition to lightly without significant research and possibly discussion with the govuk-frontend folks. Alas the feature's existence in web standards doesn't always mean it's been thoroughly considered from an accessibility and usability perspective.

That's not a no, and I think we should consider it... Just need some evidence that it works well for people.

[andymantell]

Had a quick chat with someone from the GOV.UK design system team and they said:

"It would be good to see more evidence and research to see how focus-visible tests with users. For instance, we know from research that some users with mild vision impairment use a mouse. We’d need to be confident that this change wouldn’t actually make using a mouse less accessible for some users."

[frobernik]

Thanks for getting back quickly.

I experimented a little (before you pointed out :focus-visible) and attached a document wide listener that blurs the highlight when a mouse click occurs but keeps the highlight when an Enter key is pressed.

The behaviour of this change felt odd though as the highlight got lost and this would no doubt confuse people alternating between keyboard and mouse - myself included.

From our point of view it looks like we'll have to wait for any future changes from you and GOV.UK .