Bug 258987
| Summary: | Clicking a button, then calling `.focus()` on another button via JS causes `:focus-visible` to not fire. | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Konnor Rogers <konnor5456> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | agafvv, akeerthi, cory, fotis.papadogeorgopoulos, koivisto, rego, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 16 | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 13 | ||
Konnor Rogers
## Problem
When implementing a focus-trap by using programmatic `.focus()` calls on elements, `:focus-visible` pseudo-selectors don't propagate to the element. Only `:focus` and `:focus-within`.
`:focus-visible` disappears after clicking a <button> and then calling `.focus()` in Safari 16.4
The above works as expected in Chrome 114.0.5735.198, Edge 114.0.1823.67, and Firefox 114.0.2
## Reproduction
https://codepen.io/paramagicdev/pen/xxQXWbq?editors=1111
## Similar bugs
I think this may be a duplicate of: https://bugs.webkit.org/show_bug.cgi?id=246591
Based on the above bug, the issue may also have something to do with `e.preventDefault()`
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/112276014>