Bug 234516 – Focus ring missing on range

• Component: Layout and Rendering
• Status: NEW

[James Craig]

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.”

[Radar WebKit Bug Importer]

<rdar://problem/86727390>

[Curtis Wilcox]

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.

[Kamil Tomšík]

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.

[Curtis Wilcox]

(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).

[Ahmad Saleem]

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?

[Anne van Kesteren]

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.