The issue of inconsistent hover behavior across different devices was reported in issue #30388 and touched in #5882.
The challenge arises because the hover effect, designed primarily for mouse interactions, does not translate well to touch devices. Users on touch devices cannot hover over elements without initiating a touch, leading to the "sticky" behavior described in these issues.
The CSS approach involving the any-hover or hover media query, as implemented in #31700 is insufficient for our needs. This is particularly problematic for devices that support multiple input modes. For example, Windows laptops with touchscreens or iPadOS 13.4 and later, allow users to switch between touch and pointer-based interactions seamlessly. The any-hover media query cannot dynamically adapt to these changes.
To address this issue comprehensively, we should probably lean towards JS-based approach, something similar to the one used in React Spectrum.
It relates to all components with hover effects. I labeled it with vNext (hope it's the correct label).
Please feel free to share any comments or suggestions 🙂
Have you discussed this feature with our team
The problem was discussed on the regular tech sync
Additional context
No response
Validations
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
Library
React Components / v9 (@fluentui/react-components)
Describe the feature that you would like added
The issue of inconsistent hover behavior across different devices was reported in issue #30388 and touched in #5882.
The challenge arises because the hover effect, designed primarily for mouse interactions, does not translate well to touch devices. Users on touch devices cannot hover over elements without initiating a touch, leading to the "sticky" behavior described in these issues.
The CSS approach involving the any-hover or hover media query, as implemented in #31700 is insufficient for our needs. This is particularly problematic for devices that support multiple input modes. For example, Windows laptops with touchscreens or iPadOS 13.4 and later, allow users to switch between touch and pointer-based interactions seamlessly. The any-hover media query cannot dynamically adapt to these changes.
To address this issue comprehensively, we should probably lean towards JS-based approach, something similar to the one used in React Spectrum.
It relates to all components with hover effects. I labeled it with
vNext
(hope it's the correct label).Please feel free to share any comments or suggestions 🙂
Have you discussed this feature with our team
The problem was discussed on the regular tech sync
Additional context
No response
Validations
Priority
None