A presentation at CSS Conf Armenia 2021 in in Yerevan, Armenia by Manuel Rego Casasnovas
The path of bringing :focus-visible to WebKit Manuel Rego 13th November 2021 | CSS Conf Armenia
About Me Igalia Web Platform Team Web engines hacker working on Chromium/Blink and Safari/WebKit CSS Working Group member since 2017
TOC 1. Introduction 2. Open Prioritization 3. Work Done 4. Next Steps
Introduction
The Problem Click me! :focus { outline: none; }
❌ The Problem :focus { outline: none; } Click me!
The Solution :focus-visible
Spec 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.
While the :focus pseudo-class always matches the currently-focused element, UAs only sometimes visibly indicate focus (such as by drawing a “focus ring”), instead using a variety of heuristics to visibly indicate the focus only when it would be most helpful to the user. The :focus-visible pseudo-class matches a focused element in these situations only, allowing authors to change the appearance of the focus indicator without changing when a focus indicator appears.
Heuristics
If the element which supports keyboard input, indicate focus.
Basically any <input> , <textarea> or contenteditable element. This is a text area.
What happens with <select> or <input type=”date”> on mobile? 13/11/2021
If the user interacts with the page via keyboard, indicate focus.
Everyone agrees here, keyboard navigation should always show a focus ring. foo bar baz
If the user interacts with the page via a pointing device, do not indicate focus.
This is the key part. When you click on a <button> or <div tabindex=0> you do not want to see a focus ring, only when you tab navigate. foo bar baz
Default UA Stylesheet 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.
https://twitter.com/LeaVerou/status/104576827975366656
:-internal-direct-focus WebKit uses :-internal-direct-focus in the default UA stylesheet (not web exposed). It uses this to avoid showing a double focus ring, when you focus something in a Shadow DOM tree.
Open Prioritization
An experiment in crowd-funding prioritization of new feature implementations for web browsers. https://www.igalia.com/open-prioritization/
https://opencollective.com/focus-visible-in-webkit
75 Contributors 0:00 / 0:26
Work Done
Implementation From January to May 2021. Monthly reports on my blog: https://blogs.igalia.com/mrego/ . WebKit implementation ready behind a runtime flag (not shipped yet). Passing all tests, some slight differences depending on the platform. Develop > Experimental Features > :focus-visible pseudo-class
WebKit 27 patches
WebKit 27 patches WPT 26 patches
WebKit 27 patches WPT 26 patches Chromium 9 patches
WebKit WPT 27 patches 26 patches Chromium 9 patches Specs 3 patches
UA Stylesheet Status January 2021: Nobody was using :focus-visible in the default UA stylesheet. May 2021: Chromium and Firefox started using :focus-visible in the default UA stylesheet.
Web Platform Tests (WPT) The tests were not in a good shape. Fixed tests, added new tests, ended up with ~40 tests. Tests use WebDriver (added missing bits in WebKit).
https://wpt.fyi/results/css/selectors/
Next Steps
Goal Ship :focus-visible in WebKit (Safari)
Platform Conventions Buttons are not click focusable on Mac platforms. Thus buttons are not click focusable in Safari. Apple wants to be sure that :focus-visible changes are aligned with the platform conventions. https://webkit.org/b/22261 (2008)
Examples Apple engineers were reluctant to hide the focus ring on click on <div tabindex=0> . Perhaps one possibility would be to hide the focus ring on click on <div tabindex=0 role=button> . How this affects user interaction (e.g. scrolling with spacebar) if focus ring is not visible? https://github.com/WICG/focus-visible/issues/257
Status Apple showed interested on :focus-visible at the WebKit Contributors Meeting (Sep 2021). Conversations are still ongoing, latest updates have been positive. Interoperability might weight in.
Proposal? A new HTML attribute to identify an element that is keyboard focusable but not mouse focusable. This will allow to mimic Mac platform conventions regarding focus.
tabindex=”-1” already allows to make an element not keyboard focusable. foo bar tabindex=”-1” baz
Today is not possible to make an element keyboard focusable but not mouse focusable. button
The Boy, the Mole, the Fox and the Horse by Charlie Mackesy
Thanks! Email: rego@igalia.com Twitter: @regocas
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.