234516 2021-12-20 09:23:53 -0800 Focus ring missing on range 2024-02-19 13:03:55 -0800 1 1 1 Unclassified WebKit Layout and Rendering WebKit Nightly Build Unspecified Unspecified NEW InRadar P2 Normal --- 1 jcraig webkit-unassigned ahmad.saleem792 akeerthi annevk bfulgham info ntim simon.fraser webkit-bug-importer webkit.org wenson_hsieh zalan oldest_to_newest 1825633 0 jcraig 2021-12-20 09:23:53 -0800 From https://twitter.com/romainmenke/status/1472569307993448457 “…Safari 15.2 no longer show[s] a focus ring for input type="range"? I can make it work by toggling ‘Enable Full Keyboard Access’ in System preferences, but this wasn’t required before.” 1825635 1 webkit-bug-importer 2021-12-20 09:25:48 -0800 <rdar://problem/86727390> 2012610 2 webkit.org 2024-02-11 09:29:52 -0800 This problem still exists in Safari 17.3. Testcase: https://cdpn.io/pen/debug/XWGxxbr Enabling Full Keyboard Access adds an OS-level focus ring (in the macOS Accent color) in addition to the browser's. Range inputs should have a User Agent-defined focus ring, just like any other focusable element. 2012786 3 info 2024-02-12 11:08:37 -0800 I think range input should be also accessible via keyboard (TAB), and if you check the testcase by Curtis, it's clearly not working there. BTW: also interesting, if you add focus style for the -webkit-slider-thumb it is only active if you trigger focus event directly from JS. If you click the thumb by hand it never gets focused. And if you focus using JS and then hit TAB, it will skip all other ranges entirely. 2014176 4 webkit.org 2024-02-15 15:00:49 -0800 (In reply to Kamil Tomšík from comment #3) > I think range input should be also accessible via keyboard (TAB), and if you > check the testcase by Curtis, it's clearly not working there. Range inputs are keyboard navigable and operable, pressing Tab moves focus to it, it's just missing a visible focus indicator in Safari. To operate, use arrow keys to change the value; right or up to increase, left or down to decrease, at least in a LTR language. > If you click the thumb by hand it never gets focused Safari has long used heuristics to avoid showing a focus ring for elements focused by pointer, basically what :focus-visible became. The default focus ring should be around the entire input, not the thumb, that's how browsers do it. Changing the appearance of the thumb on focus is a decent idea but you can also click the pointer anywhere on the track to change the value and the thumb alone is a relatively small target size (roughly 16x16). 2014195 5 ahmad.saleem792 2024-02-15 15:41:25 -0800 Just taking some notes - which might be completely wrong: 1) Add 'range' in CSSValueKeywords.in: https://searchfox.org/wubkat/rev/c40451f6052e2805fb1c6abfb61fa322c67caf5b/Source/WebCore/css/CSSValueKeywords.in#901 2) Next Update 'StyleAppearance.h': https://searchfox.org/wubkat/rev/c40451f6052e2805fb1c6abfb61fa322c67caf5b/Source/WebCore/style/StyleAppearance.h#37 3) Update 'RenderTheme': (RenderTheme::supportsFocusRing) https://searchfox.org/wubkat/rev/c40451f6052e2805fb1c6abfb61fa322c67caf5b/Source/WebCore/rendering/RenderTheme.cpp#1136 ___ Just hypothetical without any testing on how to get this fixed but didn't tried. @Anne - you have 'RenderTheme' expertise. Any input? & @Tim - any input? 2015224 6 annevk 2024-02-19 13:03:55 -0800 1/2 shouldn't be needed. Range controls already have their own appearance (Slider*). 3 might help, would require some testing. We'd also want to double check how AppKit and UIKit render the focus ring for this control to ensure we match that for the native appearance.