246591 2022-10-16 07:24:17 -0700 :focus-visible does not work after calling the event.preventDefault() of the keyboard event 2024-10-14 07:16:21 -0700 1 1 1 Unclassified WebKit UI Events WebKit Local Build Unspecified Linux NEW BrowserCompat, InRadar P2 Normal --- 1 weijarz webkit-unassigned agafvv cdumez fotis.papadogeorgopoulos karlcow koivisto ntim rego webkit-bug-importer oldest_to_newest 1905962 0 weijarz 2022-10-16 07:24:17 -0700 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> ``` 1907263 1 karlcow 2022-10-21 02:04:23 -0700 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. 1907650 2 webkit-bug-importer 2022-10-23 07:25:17 -0700 <rdar://problem/101474264> 1912173 3 weijarz 2022-11-13 21:05:07 -0800 (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