| 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: | CSS | Assignee: | 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: |
|
||||||||
Created attachment 460089 [details]
Minimal test case
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 |
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".