In Safari the focus outline is shown on mouse click

[katie-day]

In safari the focus state is shown on mouse click, ideally the outline would only be shown on keyboard navigation.

A fix for this might be to actually use a <button> element rather than a div with a role of button.

[liamjohnston]

Changing to use <button> would likely be a breaking change, because buttons come with a whole lot of default styling baggage that divs do not. :(

[marko-hologram]

Now since a decent amount of time has passed, :focus-visible selector is a viable option. But would also mean dropping IE11 support I guess https://caniuse.com/css-focus-visible

[liamjohnston]

@marko-hologram Yeah, that's a good call to use :focus-visible. As for "dropping IE support", I'm sure we could work around that with @supports (...). If I find time soon I'll look into this.

[liamjohnston]

OK, so on closer inspection I'm not sure if any action is needed here.
It seems that the major browsers' UA styles use the focus-visible behaviour by default now.
I just tested Chrome, Firefox, and yes, even Safari (15.5).

@katie-day Can you confirm whether this is still an issue for you?

As for whether we should keep trying to support IE11, which MS have officially stopped supporting now... that is something for discussion at some stage.

I reckon we can close this issue.