Item focus rings not rendered on touch devices

[rolfsmeds]

Description

Apparently the item focus ring in the dropdown in Select, ComboBox and DatePicker is not rendered on devices that present themselves as "non-hover" or "coarse pointer", for example touch screen devices (which can have keyboard focus e.g. via bluetooth keyboards).

https://drive.google.com/file/d/1rEmbmKzG43vnOiJyJ5GOyYE5X7nnx1qx/view?usp=sharing

Expected outcome

Focus rings should render whenever items are focused by keyboard, regardless of whether they have mouse-equivalent pointers.

Minimal reproducible example

https://vaadin.com/docs/latest/components/select

Steps to reproduce

Go to the above example, emulate a touch-screen device, and browse the items by keyboard.

Environment

Vaadin version(s): V24.2.alpha10
OS: any, I guess

Browsers

Any, I guess

[rolfsmeds]

For Select and ComboBox, this is presumably caused by the following line in the vaadin-item Lumo stylesheet that restricts the focus ring to devices that match the any-hover:hover media query : https://github.com/vaadin/web-components/blob/main/packages/item/theme/lumo/vaadin-item-styles.js#L65-L74

For DatePicker, the culprit is probably this line in the vaadin-month-calendar Lumo stylesheet that hides the focus ring for devices that match the pointer:coarse media query : https://github.com/vaadin/web-components/blob/main/packages/date-picker/theme/lumo/vaadin-month-calendar-styles.js#L130-L143

[rolfsmeds]

These might provide some useful info:
https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/
https://patrickhlauke.github.io/touch/pointer-hover-any-pointer-any-hover/results/