Bug 309245
| Summary: | :focus-visible is applied to button when opening native <dialog> via showModal() after pointer interaction | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Mateusz Daniluk <danilukmateusz92> |
| Component: | Forms | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | a_protyasha, cdumez, koivisto, ntim, wenson_hsieh |
| Priority: | P2 | ||
| Version: | Safari 18 | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | Unspecified | ||
Mateusz Daniluk
When a native <dialog> is opened via showModal() after a pointer click, Safari focuses the first button inside the dialog and applies :focus-visible.
This results in a visible focus ring even though the dialog was opened with a mouse/pointer interaction, which seems inconsistent with the intended heuristics of :focus-visible.
According to the expected behavior, :focus-visible should typically appear only when focus is triggered by keyboard navigation or other assistive mechanisms.
Steps to reproduce:
1. Open the reproduction example
2. Click the “Open dialog” button
3. The dialog opens via showModal()
Safari focuses the first button inside the dialog and applies :focus-visible
Reproduction
CodePen:
https://codepen.io/ptu14/pen/NPRNRQa
Expected result
The button may receive focus, but :focus-visible should not be applied when the dialog is opened via pointer interaction.
Actual result
The focused button receives :focus-visible, causing a visible focus ring immediately after opening the dialog.
Browser comparison
Chrome and Firefox also focuses the first button inside the dialog upon showModal(), however it correctly does not apply :focus-visible in this case. Chrome inherits the "no focus ring" state from the pointer interaction that triggered showModal(), so the programmatic focus inside the dialog does not show a focus ring.
Safari's behavior diverges. It applies :focus-visible regardless of how the dialog was opened, treating the programmatic focus from showModal() as if it were keyboard-initiated. This appears to be a specific issue with how WebKit propagates the pointer/keyboard interaction state across the showModal() focus boundary. The previously related bug #236782 (script focus after clicking a different button) is already fixed and this is a distinct case specific to <dialog>.showModal().
Environment
Safari Version 18.6 (20621.3.11.11.3) (macOS 15.7.3 (24G419))
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Mateusz Daniluk
duplicate of https://bugs.webkit.org/show_bug.cgi?id=247416
Mateusz Daniluk
duplicate of https://bugs.webkit.org/show_bug.cgi?id=247416
Alexey Proskuryakov
*** This bug has been marked as a duplicate of bug 247416 ***