Bug 246591 – :focus-visible does not work after calling the event.preventDefault() of the keyboard event

• Status: NEW
• Component: UI Events

OS: ArchLinux/GNOME
Webkit: Lastest version

To reproduce:
1. Open below html page.
2. Click `elB` using mouse, now `elB` text color is blue and no blue border.
3. Press key 'a', now `elA` text color is blue and have a blue border.
4. Press key 'b', now `elB` text color is blue, BUT it's `:focus-visible` css rule (blue border) does not work.

It is displayed correctly in Firefox and Chrome, except for Webkit.


Html page source:
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<style>
#elA, #elB { margin: 1rem; height: 100px; border: 2px solid #ccc; font-size: 5rem; }
#elA:focus,
#elB:focus { color: blue; }
#elA:focus-visible,
#elB:focus-visible { outline: 2px solid blue; }
</style>

<div id="elA" tabindex="0">elA</div>
<div id="elB" tabindex="0">elB</div>

<script>
document.addEventListener('keydown', ev => {
  if (ev.key === 'a') {
    elA.focus()
  } else if (ev.key === 'b') {
    ev.preventDefault()
    elB.focus()
  }
})
</script>

```

[Karl Dubost]

I have different behaviors on 
Safari Technology Preview  16.4 (156)    18615.1.8.5
Firefox Nightly            108.0a1       10822.10.18
Google Chrome Canary       109.0.5372.0  5372.0
with trackpad.


Safari
2. OK
3. a -> elB is blue and blue border
4. b -> doesn't change anything visually

Chrome
2. OK
3. a -> elB is blue and blue border
4. b -> doesn't change anything visually

Firefox
2. OK
3. a -> elB stays blue. doesn't change anything visually
4. b -> doesn't change anything visually

so if the steps to reproduce are the ones provided. Safari and Chrome behave the same for me and Firefox is different.

[Radar WebKit Bug Importer]

<rdar://problem/101474264>

(In reply to Karl Dubost from comment #1)
> I have different behaviors on 
> Safari Technology Preview  16.4 (156)    18615.1.8.5
> Firefox Nightly            108.0a1       10822.10.18
> Google Chrome Canary       109.0.5372.0  5372.0
> with trackpad.
> 
> 
> Safari
> 2. OK
> 3. a -> elB is blue and blue border
> 4. b -> doesn't change anything visually
> 
> Chrome
> 2. OK
> 3. a -> elB is blue and blue border
> 4. b -> doesn't change anything visually
> 
> Firefox
> 2. OK
> 3. a -> elB stays blue. doesn't change anything visually
> 4. b -> doesn't change anything visually
> 
> so if the steps to reproduce are the ones provided. Safari and Chrome behave
> the same for me and Firefox is different.

My test results:

GNOME 43 Default Browser (epiphany, webkit2gtk-4.1):  Does not work
Firefox 106: Perfect
Chromium 107: Perfect