[css-selectors-4] browser focus styles and focus-visible, example 38

[frivoal]

My understanding of :focus-visible was that it gave authors access to the existing logic by which browsers style focused elements, so that authors could change that, without adding focus indicators onto things where the browser wouldn't, which is what would happen if they used :focus instead.

However, the spec, and in particular example 38, suggest that authors could write something like:

:focus:not(:focus-visible) {
  outline: 0;
}

in order to suppress browser-supplied focus indicators on elements that match :focus but not :focus-visible.

That's very confusing to me, as by my understanding, there should be no such element. The sentence immediately before the example also seems to agree with me.

Maybe that selector is meant as a poor man's @support for selectors, but it's given what the rest of the example does, it's not needed or useful.

If I'm right, this example is causing confusion and inducing authors to think that they need to use :focus:not(:focus-visible) to select and suppress undesirable browser styles, which is just not true. In that case, this should be removed from the example.

If I'm wrong, I'd like to understand why, because then the feature no longer makes sense to me.

[mrego]

I think that while the default stylesheet on the UAs are using :focus and not :focus-visible, the way to go is to use this :focus:not(:focus-visible) and disable the focus ring in that case.

For example you have a <div tabindex="1">Click me!</div>, when you click it, it gets focused, so it's going to match :focus, but it's not going to match focus-visible.
Chromium is still using :focus in the UA stylesheet, so unless you do something like that, you won't be able to get rid of the focus ring in those cases. I haven't checked what Firefox does.

CC @alice @emilio @robdodson

[emilio]

Which UA sheet is using :focus but not :focus-visible to show outlines? I'd consider that a bug.

[emilio]

(AFAICT in Gecko all UA sheets use :-moz-focusring. when :focus-visible is enabled they are equivalent)

[mrego]

Chromium is using :focus in the UA sheet, probably it should switch to :focus-visible now that it has shipped.

WebKit uses :-webkit-direct-focus (it doesn't support :focus-visible yet).

[mrego]

I believe that the problem might be that Chromium has implemented something different than what the initial idea was, and that's why this confusion arise. Maybe I'm wrong but let's me explain my thoughts next.

The spec says:

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the user agent determines via heuristics that the focus should be made evident on the element.

So let's use again a very simple example:

<div tabindex="1">Click me!</div>

When you click on that element Chromium (and WebKit) shows an outline, however in Chromium it doesn't match :focus-visible. This seems to be a contradiction to the initial text on the spec.
In Firefox it doesn't show any outline, so :focus-visible doesn't match either, but that seems to be the expected behavior.

I guess Chromium is implementing this other part of the spec:

If the user interacts with the page via a pointing device, such that the focus is moved to a new element which does not support user input, the newly focused element should not match :focus-visible.

So if Chromium decides to change the UA sheet to use :focus-visible there'll be a change of behavior in those cases, when you click an element like the one in the example the outline would be gone after the change in the UA sheet.
Maybe that's what we want in order to look for interoperability in when the focus ring is shown or not.

It'd be nice to understand why Chromium did this and why the UA sheet is still not using :focus-visible.

[emilio]

I think this is just a Chromium bug, tbf. Chromium should be using :focus-visible in the UA sheet.

[mrego]

I think this is just a Chromium bug, tbf. Chromium should be using :focus-visible in the UA sheet.

I agree, I've just reported https://bugs.chromium.org/p/chromium/issues/detail?id=1162070

And also created a test that fails in Chromium due to this (and pass in Firefox) at web-platform-tests/wpt#27015

[robdodson]

Just ramping back up post-vacation, sorry for the dealy!

So if Chromium decides to change the UA sheet to use :focus-visible there'll be a change of behavior in those cases, when you click an element like the one in the example the outline would be gone after the change in the UA sheet.

Yes, I believe that's correct.

It'd be nice to understand why Chromium did this and why the UA sheet is still not using :focus-visible.

I think @alice can speak more to this. My guess is that we didn't want to change too many things at once so it seemed safer to ship :focus-visible first, let folks play around with it for a bit, and then update the UA stylesheet.

[alice]

@robdodson That's right. Wanted to make one change at a time.

[mrego]

Thanks for the feedback @robdodson and @alice, would you mind confirming that you agree with the change on HTML spec on @emilio's PR: whatwg/html#6256 ?

[alice]

It seems like that isn't blocked on me or Rob, but rather on feedback on https://crbug.com/1162070#c7

[css-meeting-bot]

The CSS Working Group just discussed [css-selectors-4] browser focus styles and focus-visible, example 38, and agreed to the following:

• RESOLVED: remove the example

The full IRC log of that discussion

<myles> Topic: [css-selectors-4] browser focus styles and focus-visible, example 38
<myles> GitHub: https://github.com//issues/4278
<myles> rego: florian reported it, but I added it to the agenda
<myles> rego: florian was asking about focus-visible in the spec. Was asking about using focus-visible to remove the old line from the element
<myles> rego: The thing is that, this was confusing to some people, and kind of a hack to disable the whole line instead of the focus when you have focus visible, to see the whole line but not always
<myles> rego: this is kind of confusing. you expect when it matches focus-visible, it matches only when the outline is painted.
<myles> rego: and if it's not painted it's not
<myles> rego: chromium was not using that in its default visible. So you would get an outline but the element wasn't matching focus-visible
<florian> q+
<myles> rego: Chromium's impl is updated. The default stylesheet uses focus-visible. So this example can be removed from the spec. Because it was only due to some browsers' implementations.
<myles> florian: We should double remove it.
<myles> florian: This is no longer how browsers work. It shouldn't stay there. Also, even when we were before that change, specs are a bad place to put descriptions of hacks you need to use to force browsers to not follow the spec behave correctly. And if we do that, it needs to be described deliberately
<myles> florian: now that it's no longer relevant, remove it, and if we need to highlight workarounds in the spec, be clear they are workarounds.
<Rossen_> q?
<Rossen_> ack florian
<myles> rego: So the proposal is to remove the example from the sepc
<myles> bkardell_: We should remove it. My recollection is that we added that to help people understand what it was doing, because you could explain that focused matched all the time, and people said it this way, but people wanted to remove it when that wasn't the case. but that made it into the spec in a way that it should not have. we should take it out.
<myles> Rossen_: proposed resolution: remove the example
<fantasai> If we agree on something, we resolve on it, so it's clear there was an agreement.
<myles> RESOLVED: remove the example