search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.49k stars 4.19k forks source link

Active menu item resembles a primary button #66554

Open jameskoster opened 4 days ago

jameskoster commented 4 days ago

One of these blue elements is not like the others :)

Let's explore alternative ways to indicate the active menu item that do not visually overlap with the primary button component.

jasmussen commented 3 days ago

The simplest option that comes to mind, and perhaps worth trying in a PR, is gray active-state color. In principle, the pure white color exceeds the needed 3:1 contrast ratio of active vs. inactive states, but if additional emphasis is desired, making the active-state text semibold (same font-weight as "A new draft" title), that would add a shape change in addition to the color contrast.

jameskoster commented 3 days ago

Yup I don't mind that, but ideally the hover/active states have clear visual distinction. It's a bit tricky given the grays we have to work with at the darker end of the scale. We might have to remove the background on hover?

danielvann777 commented 2 days ago

If we remove the background on hover does that mean for someone with limited vision the hover/regular states have no distinction? (except for the cursor change)

jameskoster commented 23 hours ago

Good question. My instinct is that it doesn't make any difference because the contrast between the sidebar and menu item backgrounds is minimal. And like you say, the cursor (and focus ring) is an additional affordance.

However, the difference between hover / active may not be adequate; an additional 'shape change' may be required. Options could be; increased font weight on the active item, or an additional shape (similar to wp-admin).

Increased weight Additional shape
Image Image
danielvann777 commented 23 hours ago

I kinda like the second one better. I'm usually not a big fan of weight change on hover, although this is a very personal preference. We could also just move a few px to the right on hover to indicate it's been engaged. This is probably something best decided with the wider system context though.

jameskoster commented 21 hours ago

The weight would only change for the selected state, agree that can be trick to get right though.

Subtle indentation on hover sounds like a good idea to explore too, with animation for folks who don't prefer reduced motion.

Edit: quick mockup: