The path of bringing :focus-visible to WebKit

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