Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Code of conduct

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

PixelSnap 2022-09-19 at 09 28 57

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?

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

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

Issue Analytics

State:
Created a year ago
Comments:6

Top GitHub Comments

1reaction

monkeyjabscommented, Nov 8, 2022

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

0reactions

Westbrookcommented, Nov 23, 2022

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.

Top Results From Across the Web

How to prevent sticky hover effects for buttons on touch devices

You can remove the hover state by temporarily removing the link from the DOM. ... We do not want to detect the presence...

How do I disable hover styles on mobile? #1739 - GitHub

Best way is to use media query to detect if a device supports hover and only disable it if it does not. This...

Building a Button Part 2: Hover Interactions

In the first post, we covered how React Spectrum and React Aria implement ... a hover state for a component is the :hover...

Dealing with hover on mobile - YouTube

We can't hover on mobile devices, so what can we do about hover animations and other things that we might need to have...

Accessibility and usability considerations for disabling buttons ...

We could add a hover-based tooltip to the disabled button. This isn't ideal though. Since the button doesn't focus, sighted keyboard users won't ......