Bug 241408

Summary: [selectors] Button click that triggers focus shouldn't cause :focus-visible, when the button contains an element
Product: WebKit Reporter: Dan Wolff <webkit-bugs>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: akeerthi, cdumez, koivisto, matt, ntim, rego, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Test cases for experimenting
none
Minimal test case none

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.