-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Menu hover state missing, or impossibly hard to see #12262
Comments
From designer point of view, this is probably not an issue, though I would like to hear other designer's opinions on this as it might change the overall appearance for hover effects :) |
Tested and confirmed with 4.5.1
|
I'd also like to know if this is an a11y problem. @LukePettway can you provide some insight here? |
Discussed during today's accessibility bug scrub. Worth considering a clear indication of the hover state is important for some users and the cursor shape is not sufficient. One of the most obvious options would be to make the focus and hover styles the same. Worth considering the Customizer does that, as it introduced some releases ago a new pattern with a "left border": This is also what we (as accessibility team) are recommending for the admin menu in the (long pending) Trac ticket https://core.trac.wordpress.org/ticket/28599 Some consistent pattern across WordPress would be nice :) |
From what I can tell, there currently is a hover effect on medium+ size screens. For some reason this is wrapped in a media query...
I guess this is the reason #10333 |
So I'm thinking, at some point after this gh issue, the hover effect was implemented without knowing about this gh issue?
That probably is why the hover was removed for screens smaller than There are a couple media queries we can use to cover some of those "smaller screen + mouse" users. The safest I think would be something like this:
That would cover screens larger than the medium breakpoint and then also screens that might be smaller but whose primary input method is capable of hovering. The browser support is surprisingly solid for how little known these MQs are. Some others that might also work: What are your thoughts on this @jasmussen ? |
Worth noting that assuming a CSS media breakpoint triggers exclusively on mobile devices is misleading. For example, users with vision impairments may use high zoom levels in the browser. Depending also on the screen, at a 200% zoom level (or slightly more) the "responsive view" may kick in. In this scenario, users still need hover states. |
Based on Andrea's comment, can we just include the hover state... always? Are there any arguments against going this route? |
#10333 is why it was originally removed for mobile. Just reading that issue, I don't think it justifies removing the hover state. But I've never actually seen the issue on iOS so I don't know how bad it is. I'll try to play around with it tomorrow. |
Describe the bug
There is a severe lack of contrast on the hover state of the vertical ellipsis menu.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
I expect some visual indication that a menu item is being hovered over with a mouse.
Screenshots
Desktop (please complete the following information):
Additional context
The text was updated successfully, but these errors were encountered: