Use :focus-visible instead of :focus in stylesheets

[davwheat]

We should use :focus-visible instead of :focus to style the tabs on focus. This pseudoclass is only true when focus is gained via keyboard navigation, not by any other method, and is how focus is handled on native elements, like buttons and links.

This isn't supported in Safari, so we need to perform some acrobatics to keep the old styles working in that browser.

button:focus {
  /* our focus styles */
}

button:focus:not(:focus-visible) {
  /* UNDO our focus styles */
}

Read more:

• https://css-tricks.com/almanac/selectors/f/focus-visible/
• https://www.tpgi.com/focus-visible-and-backwards-compatibility/

[brennanho]

Has there been any updates on this @davwheat or have you been able to find a work around? I need to accomplish exactly what you described but applying the focus:not(:focus-visible) on my Tab elements don't seem to do the trick.

[davwheat]

I personally ended up switching to another Tabs library for my project.

I wrote a wrapping component so it was quite easy to swap out: https://github.com/davwheat/personal-portfolio/blob/a7a932e355893a23f9187a92648a4af6d549e8aa/src/components/Tabs.tsx

[danez]

The styles have changed since this was reported, we do not set any style on focus anymore. I tried :focus-visible but couldn't get it reliably to work. Sometimes it would also trigger on click.