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".
Created attachment 460089 [details] Minimal test case
<rdar://problem/95188454>
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