Focus style should use :focus-visible instead of :focus

Open on Drupal.org →

Created on 11 March 2024, 12 months ago

Updated 13 March 2024, 12 months ago

Problem/Motivation

Focus styles should only apply when they are really necessary, e.g. when navigating with the keyboard. See this explanation on MDN:

Browsers no longer visibly indicate focus (such as by drawing a "focus ring"), around each element when it has focus. Instead, they use a variety of heuristics to provide focus indicators only when it would be most helpful to the user. For instance, when a button is clicked using a pointing device, the focus is generally not visually indicated, but when a text box needing user input has focus, focus is indicated.

Proposed resolution

Use the :focus-visible pseudo-selector, instead of :focus.

✨ Feature request

Status

Needs review

Version

2.1

Component

Code

Created by

🇩🇪Germany mrshowerman Munich

Live updates comments and jobs are added and updated live.

Sign in to follow issues

Merge Requests

!4Focus style should use :focus-visible instead of :focus
Open
🇩🇪Germany mrshowerman
updated 10 months ago

Comments & Activities

Issue created by @mrshowerman
Merge request !4Replace usage of :focus with :focus-visible → (Open) created by mrshowerman
Issue was unassigned.
Status changed to Needs review 12 months ago1:17pm 11 March 2024
Comment 12 months ago →
🇩🇪Germany mrshowerman Munich
Opened MR against 2.1.x, adding patch for 2.0.x.
Comment 12 months ago →
🇩🇪Germany hexabinaer Berlin, Germany
I am reluctant. Admittedly this is the more modern approach and surely makes it nicer for sighted users. Have you checked back with different input devices in all instances?
Comment 12 months ago →
🇩🇪Germany mrshowerman Munich
Not myself. But this is also how it is done in the Bootstrap framework (e.g., buttons), and accessibility plays an important role there.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024