[Bug]: We need a way to disable hover state for all spectrum buttons on mobile devices

[monkeyjabs]

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

ProjectX

Expected behavior

There's a lingering hover effect on the mobile browser with button-related components such as sp-menu-item, sp-action-button, and sp-button; this is causing confusion for users.

Actual behavior

SWC should have a way to detect on mobile devices and disabled the hover effects

Screenshots

https://user-images.githubusercontent.com/4380525/191066654-0b550d62-9ba3-4688-a2dd-c7c7f72e2d03.MP4

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

1. Go to ProjectX
2. Click on Plus menu
3. Scroll to through the list of menu items
4. Observe there are some items with linger hover states

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

[Westbrook]

Thanks @monkeyjabs! We just merged #2597, would you be able to checkout https://main--spectrum-web-components.netlify.app/ and let us know how if you're seeing this situation lessened?

[monkeyjabs]

@Westbrook It looks like this the fix in #2597 did improved a bit but I'm still seeing issue.

I tried with the sp-menu component here from: https://main--spectrum-web-components.netlify.app/components/menu/#managing-a-selection

If I tap on the menu item and scroll I sell see the hover state remain.

[najikahalsema]

To do: ask Spectrum css about hover state behaviour.

[Westbrook]

We've upstreamed an issue to Spectrum CSS to wrap :hover styles in @supports (hover: hover) as part of the work that would go into this...

[monkeyjabs]

@Westbrook is there a way to track that upstream issue?

[Westbrook]

You can track here: https://jira.corp.adobe.com/projects/CSS/issues/CSS-289

We'll be discussing https://github.com/saulhardman/postcss-hover-media-feature after the holidays and whether/were's the right place to inject that in the overall Spectrum universe.