NEW241408
[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
Minimal test case (109 bytes, text/html)
2022-06-08 03:25 PDT, Dan Wolff
no flags
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
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.