WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
241408
[selectors] Button click that triggers focus shouldn't cause :focus-visible, when the button contains an element
https://bugs.webkit.org/show_bug.cgi?id=241408
Summary
[selectors] Button click that triggers focus shouldn't cause :focus-visible, ...
Dan Wolff
Reported
2022-06-08 03:24:31 PDT
Created
attachment 460088
[details]
Test cases for experimenting Tested in Safari on iOS 15.5. For the "Minimal test case": Clicking the "Click me" button should not cause a focus ring on the "Target button". --- Scenario: Clicking a button causes another button to gain focus. The first button contains an element. Problem: The button that gains focus, also gains focus-visible. What happens when clicking the buttons in the "Test cases for experimenting" attachment: - [bad] The target button GAINS focus-visible when clicking: "1. Span" and "2a. Inside span". - [good] The target button DOES NOT gain focus-visible when clicking: "2b. Outside span", "3. pointer-events:none span" and "4. Without span".
Attachments
Test cases for experimenting
(654 bytes, text/html)
2022-06-08 03:24 PDT
,
Dan Wolff
no flags
Details
Minimal test case
(109 bytes, text/html)
2022-06-08 03:25 PDT
,
Dan Wolff
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Dan Wolff
Comment 1
2022-06-08 03:25:19 PDT
Created
attachment 460089
[details]
Minimal test case
Radar WebKit Bug Importer
Comment 2
2022-06-15 03:25:13 PDT
<
rdar://problem/95188454
>
Matt Stow
Comment 3
2023-04-27 22:18:08 PDT
I have just experienced this bug in a real project. Our design system's button components focus themselves onClick to workaround the known issue of focus being dropped to its nearest, focusable ancestor (
https://bugs.webkit.org/show_bug.cgi?id=22261
), but that unfortunately causes `:focus-visible` to become visible as logged here. The fact that `pointer-events: none` on child elements fixes it for specific buttons, and then fixes it for all other buttons demonstrates that this is a bug. Here is a reduced codepen example:
https://codepen.io/stowball/pen/MWPoGqO
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