Bug 30523 – Add support for :focus-visible CSS pseudo class

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: CSS

[Erik Arvidsson]

For background see

http://enndeakin.wordpress.com/2009/10/05/visible-focus-rings/
https://bugzilla.mozilla.org/show_bug.cgi?id=418521

To sum it up we need a way to differentiate how an element was focused. The focusring pseudo class should be the platform specific pseudo class that we use to show the focus outline.

[Darryl Pogue]

This has been added to the CSS Selectors draft as the :focusring pseudoclass
https://github.com/w3c/csswg-drafts/pull/709

[Albert Scheiner]

The name of the pseudoclass has changed in the meantime to :focus-visible.

Sources:
https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
https://caniuse.com/#feat=css-focus-visible
https://bugzilla.mozilla.org/show_bug.cgi?id=1445482

[Kyle Bavender]

:focus-visible was added to Chrome 86. Blog post: https://blog.chromium.org/2020/09/giving-users-and-developers-more.html 

I checked in on this as I am building a menu where it would be desirable to remove focus outline styles on an element, but allow for focus outline styles to persist in a condition matching that of :focus-visible.

[Kyle Bavender]

:focus-visible was added in the recently-release Firefox 85. Blog post: https://hacks.mozilla.org/2021/01/january-brings-us-firefox-85/ 

With both Chrome and Firefox supporting this feature, I am hopeful that this can be implemented in to WebKit as well.

[Justus Romijn]

:focus-visible works as expected on Safari 14.0.3, just make sure to have the accessibility settings setup.

For Mac, select "Preferences -> Advanced", and enable checkmark for:

 [V] : Press Tab to highlight each item on a web page

By default, this is disabled. If you tab through a page in safari, by default it will skip buttons, but it will go to input fields. With this option enabled, it will also go through buttons and other tabbable items.

[Kyle Bavender]

re: Justus:
":focus-visible works as expected on Safari 14.0.3, just make sure to have the accessibility settings setup."

You are referring to the :focus pseudo-class, not the :focus-visible pseudo-class. You may review documentation for what :focus-visible is and does on this page: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible . As is said there, :focus-visible "...is useful to provide a different focus indicator based on the user’s input modality (mouse vs. keyboard)." This is in contrast to :focus, which is set on an element whether it was selected via tabbing on the keyboard, or by way of clicking with a mouse.

You can see for yourself that Safari/WebKit do not support the :focus-visible pseudo-class: There is also an Example on the page in which you can test tabbing from one input to button to the next — Safari does not show the dashed dark orange outline that comes from :focus-visible styles as it does in Chrome and Firefox.

[Justus Romijn]

Indeed I see now I made a mistake. 

The behaviour we were implementing for our UI actually wants default outlines only on focus-visible, but it seems that Safari, with that setting enabled, does that for you (e.g., when tabbing to a button, shows an outline, whilst clicking a button does not) so I wrongly assumed this means the pseudo selector works. But this is by accident just the default behaviour when you opt-in with the accessibility option. Sorry!

[Kyle Bavender]

(In reply to Justus Romijn from comment #7)
> Indeed I see now I made a mistake. 
> 
> The behaviour we were implementing for our UI actually wants default
> outlines only on focus-visible, but it seems that Safari, with that setting
> enabled, does that for you (e.g., when tabbing to a button, shows an
> outline, whilst clicking a button does not) so I wrongly assumed this means
> the pseudo selector works. But this is by accident just the default
> behaviour when you opt-in with the accessibility option. Sorry!

Hey no worries! I just wanted to make sure it is clear to all that :focus-visible is unique, and can be very useful. Indeed, earlier this morning I learned via the MDN article linked that the browser does this by default on button elements. This is good to know!

Re: :focus-visible, I am eager for the myriad possibilities that open up both for other types of elements — anchors, input fields, and more — and also for the creation of more helpful and dynamic focus styles that are aware of the input method.

I am a sighted user, but I do try to use my ergonomic keyboard as much as I can (vs. my mouse; both for ergonomics, and for speed), so I am familiar with, and do tend to recommend turning on the macOS setting to allow keyboard navigation to move focus between controls. :focus-visible would be a great tool for making more intuitive and accessible interfaces.

[Sam Sneddon [:gsnedders]]

Forward duping, given that's where all the discussion/implementation actually is happening.

*** This bug has been marked as a duplicate of bug 185859 ***