Unable to set focus on :focus-visible only

[legendofmi]

I'm trying to set the focus ring only when the user selects it via keyboard (:focus-visible), but NOT when the user interacts with it via a click or touch ie. no focus ring unless it's for accessibility.

Clicking/taping on it seems to trigger a focus action which doesn't allow me to show the focus ring only when the user navigates to the component via keyboard.

[sneas]

This component works similarly to any other focusable input, for example, <input type="text">. Thus, it doesn't distinguish between selecting with a pointer device or selecting with the keyboard.

But you can achieve the desired behavior with JS + CSS. Here is an example of how to do it https://codepen.io/sneas/pen/bGzKJvR

[legendofmi]

Thanks, that was quick! That’s exactly the behaviour I would expect.

In my opinion, It would make more sense for it to work as an input type=“range” (slider) component and not an input=“text”. As long as you don't enter text, the focus ring is not as critical and you should be able to control its visibility using ":focus-visible".

Chromium blog explains how :focus-visible should work (https://blog.chromium.org/2020/09/giving-users-and-developers-more.html):

Does the element require text input?
:focus-visible will always match when an element which requires text input (for example, ) is focused.
A quick way to know if an element is likely to require text input is to ask yourself "If I were to tap on this element using a mobile device, would I expect to see a virtual keyboard?" If the answer is "yes" then the element will match :focus-visible.

What input device is being used?
If the user is using a keyboard to navigate the page, then :focus-visible will match on any interactive element (including any element with tabindex) which becomes focused. If they're using a mouse or touch screen, then it will only match if the focused element requires text input.

[sneas]

You made a pretty good point, and I'm currently researching how this can be achieved.

https://twitter.com/sneasio/status/1733438507731812785

Feel free to contribute if you have any ideas.

[legendofmi]

Thanks for looking into this! I love this component as it’s very lightweight and has all the main functionality an image comparison slider should have. For now, I'm using your suggested solution on my website.

No idea either on how to achieve this :( I could only find a discussion where a WebKit developer explains why Shadow DOM only gets focus but not focus-visible. Not helpful, but still interesting to read. Apparently, the specs are not very clear on the expected behaviour.
w3c/csswg-drafts#5893

[sneas]

Seems like we've reached the edge of the spec :)