Adjust and redesign neutral, hover, active and focus states

[jasmussen]

Given recent developments in design (see #2983, #2984, #2980), it seems like now would be a good time to revisit how our buttons and controls could be unified and simplified in this context.

As such, this ticket builds on the past work in #127. It also subsumes #904.

Challenge:

We have some new UI components and widgets in Gutenberg, compared to the rest of WordPress. These need to be accessible (see #127 again for lots of context), and have distinct focus styles.

Proposed design:

Please open the above screenshot in a new tab to see the pixels.

• All clickable items get a gray, button-shaped background color
• Active and focus states are the same

By using background shapes instead of borders, we can unify the styles across all the widgets we use in Gutenberg toolbars and menus.

Penny for your thoughts?

[jasmussen]

CC: @afercia, if you have a moment, to make sure styles haven't regressed here. Contrast has been checked with this tool: https://www.joedolson.com/tools/color-contrast.php

[afercia]

@jasmussen if I get it correctly, the focus state is given just by the light gray background? If so, we've already discussed this point several times on other GitHub issues. That's not sufficient.

The focus indication can't use color alone (unless it's a complete inversion of colors). A light background is not sufficient. It needs a shape.

Furthermore, background and box-shadows get removed in Windows high contrast mode. This was discussed and partially addressed at least for the switch toggles, that's the reason why they currently use a border. Outline and border are the only things Windows high contrast mode doesn't remove. See #1562 and #1988

For a11y reasons, it's better to use a border for the focus style, see the discussion on the issue about Windows High Contrast mode.

On a side note: I'm not a designer but this looks very similar to material design to me.

[jasmussen]

Thanks for your patience. The disparate threads were a bit hard to follow the intricacies of, so thanks for repeating.

The focus indication can't use color alone (unless it's a complete inversion of colors). A light background is not sufficient. It needs a shape.

So something like this, perhaps?

The key issue I'm trying to solve with the above, is indicating the button shape, even if the neutral state has a transparent button background.

On a side note: I'm not a designer but this looks very similar to material design to me.

Material design is absolutely an inspiration for some of this.

Edit: also, I forgot about the difficulties of the switch. I'm blaming my baby delerium, sorry about that! Once we get the focus state right again, I'll revisit that one.

[afercia]

Just as a note 🙂 we've started discussing the focus style on February/March, see #127. I thought it was clear a shape is necessary.

The shape in this second mockup is better. From a design perspective, I'm not sure Gutenberg should deviate from what WordPress does. I see a general trend in this project to consider Gutenberg as something "separated" from WordPress and as something that doesn't necessarily need to follow the WordPress best practices. I'm not sure I agree with this trend.

That said, back to a11y: ideally, the best thing to do for focus indication would be: do nothing. Remove all the outline: none and just use the browsers default.

The WCAG recommend techniques to only enhance the browsers default, not to make it less perceivable. See for example https://www.w3.org/TR/WCAG20-TECHS/G195.html

The objective of this technique is enhance the focus indicator in the browser ...

see also:

In this technique, when the user places focus on an element, using the mouse, tab key, arrow keys, keyboard shortcuts, or any other method, the application makes that focus more visible, using a combination of a highly contrasting color, a thick line, and other visual indicators such as a glow.

This should help clarify our past discussions about focus indication, if it should be for keyboard only or also mouse and other devices.

When the native browsers focus style is not desired for some design needs, an author-supplied focus indicator can be used but that shouldn't make it less perceivable.

Preferably, it should be implemented with outline or border because these are the only two CSS properties that are not removed when using Windows high contrast mode.

A mix of techniques can also be used. See the examples in the page linked above. They suggest a 3 pixels or 5 pixels wide outlines. Yep, I understand this would be a very thick line, in fact we're already making a trade off in WordPress using a thinner line.

See also the 3rd example (menus), which is basically an inversion of colors:

A Web page includes an interactive menu with sub-menus. A user can move focus in the menu using the arrow keys. As focus moves, the currently focused menu item changes its background to a different color, which has a 3:1 contrast ratio with the surrounding items and a 4.5:1 contrast ratio with its own text.

[jasmussen]

I thought it was clear a shape is necessary.

Oh absolutely. Where I misunderstood this was believing that the gray background counted as a shape, since it changes the silhuette.

From a design perspective, I'm not sure Gutenberg should deviate from what WordPress does. I see a general trend in this project to consider Gutenberg as something "separated" from WordPress and as something that doesn't necessarily need to follow the WordPress best practices.

I understand your concern. I think of these designs as being in the same category as using the new gray colors that Hugo have provided — that is, if we get this right, it should be trac'ed as an improvement for the rest of the admin. It might get rejected there, in which case we'll revisit for Gutenberg.

In order to design the best possible Gutenberg, which fundamentally does many things different to how WordPress has done it in the past, it is important to look at the design holistically, and revisit if necessary decisions that made sense in the past but perhaps don't as much in the new context. If we find a better design, we should let that influence WordPress, and vice versa.

A Web page includes an interactive menu with sub-menus. A user can move focus in the menu using the arrow keys. As focus moves, the currently focused menu item changes its background to a different color, which has a 3:1 contrast ratio with the surrounding items and a 4.5:1 contrast ratio with its own text.

👍 👍 will revisit.

[afercia]

as using the new gray colors that Hugo have provided

Yep it would be nice to have the new colors finished, see a proposal for usage in WordPress, and see them replace the current official colors on https://make.wordpress.org/design/handbook/design-guide/foundations/colors/ 🙂

[jasmussen]

Also related, #2331