[Bug]: Sticky hover effect on mobile

[daniharo]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1
    Memory: 63.02 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Safari: 17.2.1
    
NPM packages:
"@fluentui/react-components": "^9.45.0"

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/p/sandbox/fluent-sticky-hover-cxcx89

Bug Description

Actual Behavior

In Safari mobile or Chromium mobile, after touching a button, it remains being shown in the "hover" styles.

[Edit @behowell] This also repros on Edge on Windows when using touch.

Expected Behavior

In mobile browsers, :hover styles should be disabled for all components. There's no obvious way to do this for Fluent v9 components right now.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[mainframev]

Hi @daniharo 👋🏻

Unfortunately, after investigating it and a short discussions we had, the problem reported can't be fixed right now. It requires proper testing and a lot of changes on our side. I created a feature request, so we won't lost it

Thank you for reporting the issue 🫶