WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED DUPLICATE of
bug 185859
30523
Add support for :focus-visible CSS pseudo class
https://bugs.webkit.org/show_bug.cgi?id=30523
Summary
Add support for :focus-visible CSS pseudo class
Erik Arvidsson
Reported
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.
Attachments
Add attachment
proposed patch, testcase, etc.
Darryl Pogue
Comment 1
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
Albert Scheiner
Comment 2
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
Kyle Bavender
Comment 3
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.
Kyle Bavender
Comment 4
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.
Justus Romijn
Comment 5
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.
Kyle Bavender
Comment 6
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.
Justus Romijn
Comment 7
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!
Kyle Bavender
Comment 8
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.
Sam Sneddon [:gsnedders]
Comment 9
2021-05-17 02:55:22 PDT
Forward duping, given that's where all the discussion/implementation actually is happening. *** This bug has been marked as a duplicate of
bug 185859
***
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug