OperationCode/front-end

Change focus styles to be applied on focus-visible instead

kylemh opened this issue · 4 comments

kylemh commented

Focus rings should only be seen by keyboard navigating users! To make it so, we should add styles to the :focus-visible pseudo-selector instead of :focus.

Unfortunately, Safari STILL doesn't supports :focus-visible 😭. This means we need to add the feature with backwards compatibility OR polyfill the feature.

Polyfilling correctly is complicated and potentially costly for ALL users (even ones that have no need to download that polyfill because they use a browser that supports the feature). So, let's go the backwards compatible route instead.

MartinL551 commented

Hey, is this free to have a crack at still? :)

kylemh commented

Certainly is!

  • 👍1
MartinL551 commented

Hey,

Can I just check that I am along the right track with this before I go through the other :focus classes and update them.

So I've started with the contact us module. I've updated the CSS code to use the backwards compatible code you linked above.

image
I added an outline to it following the :focus-visible that is used in the Presslinks.module.css file

image

So now when I tab the link into focus it shows a outline + the color and shadow change on the contact us page links vs the mouse which is just the text color change like before.

image
vs
image
When mousing over.

Should be I be updating all instances of :focus to use this backwards compatiable code? With the same outline?

I haven't got access to Safari to check behaviour on that unfortunately. But in theory it should just revert to browser default focus ring right?

Still learning the ropes. So if these are obvious questions sorry in advance haha.

kylemh commented

My thought process was that we could simply replace :focus with :focus-visible, but I see now that both the fallback and polyfill strategies are a larger undertaking than I initially presumed when glancing at those strategies.

Our Safari usage is at 15.05% over the last 90 days. Almost 10% of that is mobile Safari, where focus states are irrelevant.

Since the desktop Safari usage is so small, I think we can just replace all :focus usages with :focus-visible and call it a day.

  • 👍1