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

Created on 11 March 2024, 4 months ago

Updated 13 March 2024, 4 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.

Merge Requests

!4Focus style should use :focus-visible instead of :focus
Open
🇩🇪Germany mrshowerman
updated 2 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 4 months ago1:17pm 11 March 2024
Comment 4 months ago →
🇩🇪Germany mrshowerman Munich
Opened MR against 2.1.x, adding patch for 2.0.x.
Comment 4 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 4 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.69.0 2024

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

Problem/Motivation

Proposed resolution

Merge Requests

!4Focus style should use :focus-visible instead of :focusOpen

Comments & Activities

!4Focus style should use :focus-visible instead of :focus
Open