Bug 258987 - Clicking a button, then calling `.focus()` on another button via JS causes `:focus-visible` to not fire.
Summary: Clicking a button, then calling `.focus()` on another button via JS causes `:...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 16
Hardware: Mac (Apple Silicon) macOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-07-07 10:48 PDT by Konnor Rogers
Modified: 2023-10-24 10:48 PDT (History)
6 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Konnor Rogers 2023-07-07 10:48:27 PDT 
## 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()`
Comment 1 Radar WebKit Bug Importer 2023-07-14 10:49:23 PDT 
<rdar://problem/112276014>