[Feature]: improve hover and touch interactions

[mainframev]

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

• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Priority

None

[smhigley]

@mainframev are you OK with me assigning this to you for future tracking?

[mainframev]

@smhigley yes 👍🏻

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".