| Summary: | Focus ring missing on range | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | James Craig <jcraig> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | ahmad.saleem792, akeerthi, annevk, bfulgham, info, ntim, simon.fraser, webkit-bug-importer, webkit.org, wenson_hsieh, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
|
Description
James Craig
2021-12-20 09:23:53 PST
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. 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. (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). 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? 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. |