Bug 246591 - :focus-visible does not work after calling the event.preventDefault() of the keyboard event
Summary: :focus-visible does not work after calling the event.preventDefault() of the ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: UI Events (show other bugs)
Version: WebKit Local Build
Hardware: Unspecified Linux
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2022-10-16 07:24 PDT by weijarz
Modified: 2023-10-24 10:48 PDT (History)
7 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 weijarz 2022-10-16 07:24:17 PDT 
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>

```
Comment 1 Karl Dubost 2022-10-21 02:04:23 PDT 
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.
Comment 2 Radar WebKit Bug Importer 2022-10-23 07:25:17 PDT 
<rdar://problem/101474264>
Comment 3 weijarz 2022-11-13 21:05:07 PST 
(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