Bug 30523 - Add support for -webkit-focusring CSS pseudo class
Summary: Add support for -webkit-focusring CSS pseudo class
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Enhancement
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks: 26856
  Show dependency treegraph
 
Reported: 2009-10-19 11:18 PDT by Erik Arvidsson
Modified: 2021-05-16 02:14 PDT (History)
13 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Erik Arvidsson 2009-10-19 11:18:48 PDT
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.
Comment 1 Darryl Pogue 2016-11-24 10:19:52 PST
This has been added to the CSS Selectors draft as the :focusring pseudoclass
https://github.com/w3c/csswg-drafts/pull/709
Comment 2 Albert Scheiner 2018-08-15 19:04:47 PDT
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
Comment 3 Kyle Bavender 2020-11-23 09:11:46 PST
: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.
Comment 4 Kyle Bavender 2021-02-02 09:38:15 PST
: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.
Comment 5 Justus Romijn 2021-02-11 05:11:53 PST
: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.
Comment 6 Kyle Bavender 2021-02-11 07:11:56 PST
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.
Comment 7 Justus Romijn 2021-02-11 07:19:08 PST
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!
Comment 8 Kyle Bavender 2021-02-11 07:57:50 PST
(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.