:focus-visible vs useFocusRing

[ritz078]

Is there any benefit of using useFocusRing's isFocusVisible over the :focus-visible pseudo class ?

[reidbarber]

See this blog post: https://react-spectrum.adobe.com/blog/building-a-button-part-3.html#focus-rings

[pvorona]

This 3 year old blog post suggest using useFocusRing before :focus-visible is implemented. :focus-visible is now implemented in all major browsers.

[snowystinger]

In the future, the :focus-visible pseudo class in CSS may be able to replace this code. However, since the spec does not say when it should apply, browsers will likely implement different heuristics, which will mean it will behave inconsistently. Until browser support improves, the useFocusVisible and useFocusRing hooks in React Aria can be used to implement focus rings that work consistently across browsers.

It might be worth going through all browser/input modes/operating systems/etc to see where support is, but I'd be willing to bet that we still normalize some differences. It is only a suggestion to use it, for that express benefit. You are not required to use it.

Did you have another question?

[devongovett]

One difference is that the native :focus-visible will show the focus ring when an element is programmatically focused whereas useFocusVisible does not. We use programmatic focus in a bunch of places and it's not always desirable to show the focus ring.