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.

Motivation

:focus-visible has been 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." 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 seeting 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: :focus:not(:focus-visible) { outline: 0; } 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 focus indicator.

Demo

Documentation

Specification

Specification link


Specification being incubated in a Community Group

Status in Chromium

Blink>CSS


Enabled by default (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • Shipped/Shipping
  • No signal
  • Positive

Owner

Comments

HTML spec: https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3

Last updated on 2021-05-23