:focus-visible has shipped in Chromium 86, however Chromium hasn't
updated the default UA style sheet like the :focus-visible spec indicates:
"User agents should also use :focus-visible to specify the default focus
style, so that authors using :focus-visible will not also need to
disable the default :focus style."
HTML has also been modified recently
) to use :focus-visible instead
So right now when you click an element like "<div tabindex="0">Focus
me</div>" you get a focus indicator (because it matches :focus, and the
UA style sheet is setting an outline in that case), but the element
doesn't match :focus-visible (as expected).
The problem is that :focus-visible is not enough to style the default
focus indicator showed by Chromium, and people need to use a workaround
to remove it from :focus when it doesn't match :focus-visible:
Once Chromium changes the UA style sheet to use :focus-visible instead
of :focus this workaround won't be needed anymore.
This change on the UA style sheet will cause a change of behavior for
users, when they click on that kind of elements they no longer will get
a focus indicator, but that's exactly the main purpose of
:focus-visible. Many websites were disabling :focus all together due to
this problem, so not showing it by default seems the way to go. Also
websites can still use :focus pseudo-class if they want to always show a
Change the Chromium default UA style sheet to use :focus-visible instead
of :focus pseudo-class to paint the focus indicator (outline).
This will avoid that elements show a focus indicator (because they're
focused and match :focus) while they don't match :focus-visible.
This was already part of the spec in the original TAG review, the only
reason why it was not changed before was to avoid changing many things
in just one go (check Rob Dodson and Alice Boxhall comments at
**Interoperability and Compatibility**
Right now Chromium behavior differs from Firefox, and this change will
align both browsers. WebKit doesn't implement :focus-visible yet.
* Gecko: Shipped
Firefox has shipped :focus-visible in version 85.
Firefox uses :-moz-focusring in the UA style sheet, but that's
equivalent to :focus-visible and the behavior would match the one in
Chromium after this change.
* WebKit: No signal (https://bugs.webkit.org/show_bug.cgi?id=185859
WebKit doesn't have an implementation of :focus-visible yet (I'm
currently working on adding support for it). But it already uses
something special in the UA style sheet :-webkit-direct-focus, due to a
somehow related issue (see
). Once :focus-visible is
ready, I'll propose to replace :-webkit-direct-focus in the UA style sheet.
* Web developers: Positive
Bug has 7 stars: https://crbug.com/1162070
Another bug was reported 1 year ago about the very same issue:
This blog post explains the need of ":not(:focus-visible)" and
mentions it as "less than elegant" solution:
Also this other blog post talks about this problem too, "The
:focus-visible Trick": https://css-tricks.com/the-focus-visible-trick/
**Is this feature fully tested by web-platform-tests?**
**Link to entry on the Chrome Platform Status**