| Summary: | :focus-visible does not work after calling the event.preventDefault() of the keyboard event | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | weijarz |
| Component: | UI Events | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | cdumez, fotis.papadogeorgopoulos, karlcow, koivisto, ntim, rego, webkit-bug-importer |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | WebKit Local Build | ||
| Hardware: | Unspecified | ||
| OS: | Linux | ||
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. (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 |
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> ```