Intent to Ship: Use :focus-visible in the default UA style sheet

[Manuel Rego Casasnovas]

**Contact emails**

re...@igalia.com

**Explainer**

: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
(https://github.com/whatwg/html/pull/6256) to use :focus-visible instead
of :focus.

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:
: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.

**Specification**

* https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
* https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3

**Summary**

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.

**Blink component**

Blink>CSS

**TAG review**

https://github.com/w3ctag/design-reviews/issues/233

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
https://github.com/w3c/csswg-drafts/issues/4278#issuecomment-759785056).

**Risks**

**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
https://github.com/w3c/csswg-drafts/issues/5893). 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:
https://crbug.com/1038823
This blog post explains the need of ":not(:focus-visible)" and
mentions it as "less than elegant" solution:
https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
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?**

Yes
https://github.com/web-platform-tests/wpt/pull/27015

**Tracking bug**

https://crbug.com/1162070

**Sample links**

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

**Link to entry on the Chrome Platform Status**

https://www.chromestatus.com/feature/5658873031557120

[Adam Argyle]

Nice!

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/f593f6ef-eb53-4e98-8634-8c2fbd6dc620%40igalia.com.

[Manuel Rego Casasnovas]

On 29/01/2021 11:49, Manuel Rego Casasnovas wrote:
> * 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.

An update here, Firefox is now using :focus-visible in the UA sheet:
https://hg.mozilla.org/integration/autoland/rev/c3d49d6fe821

Bye,
Rego

[yo...@yoav.ws]

LGTM1

[Daniel Bratell]

Is there a risk for an accessibility regression here?

/Daniel

--

You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ddb9c195-55e3-45a2-801a-50ece3c006dcn%40chromium.org.

[Alex Russell]

LGTM2

[Daniel Bratell]

Got an answer to my question offline.

LGTM3

/Daniel

[Manuel Rego Casasnovas]

On 04/02/2021 20:53, Daniel Bratell wrote:
> Is there a risk for an accessibility regression here?

Jut to answer here too.

Basically with this change we're not going to show the focus indicator
in some cases (like a DIV with tabindex on mouse click), but there won't
be changes for people navigating with the keyboard as :focus-visible
will always match on that case.

People can still be using thing like ":focus { outline: none }" which
are bad for accessibility to hide this kind of focus indicators. This
change will make these kind of rules not needed and generally improve
a11y of the websites if they get rid of them.

Also Alice Boxhall has agreed on doing this and approved the patch.

Bye,
Rego