Improve button focus styles

[melchoyce]

Input fields have a medium blue border that replaces the grey input border:

But buttons have light blue border outside of the button borders:

This is inconsistent, and the button focus styles need to have a minimum contrast ration of 3.1.

Prior idea from @jasmussen:

Some additional ideas:

The bottom color is #008EC2, which has a contrast ratio of 3.72. (We'll want to update the input focus styles to also be this color, but we can do that in a separate issue.) This is my preferred option of these three.

Related: #15325, #13900, and https://core.trac.wordpress.org/ticket/34904.

[afercia]

+1
See also #13267 for a bug that affects Firefox.

[jasmussen]

Thanks for taking a stab, Mel. Of your designs, these seem the most promising to me:

One thing I think is worth bringing up: those designs assume we can't redesign the buttons themselves. I'm not saying we absolutely have to do that, but rather opening that up as a "what if". What would buttons look like, redesigned from scratch, to be more legible, accessible, consistent?

Based on the existing tickets around this, I've dabbled with this for a while, and here's the most recent iteration:

One aspect I'd like to highlight with the above, is that this style affords us better contrast around the secondary button with the 1px border, where the old button relies on a drop shadow (which is removed in high contrast mode). Additionally, by leveraging that border to change the thickness on focus, we can keep the clear focus style change (contrast & shape), but without complicating the silhuette (double-borders). The double border is okay and necessary for the primary button given the similarity in colors, but given the primary button is a solid, the silhuette remains simple. Finally, changing the button border on focus gives a nice consistency callback to input fields:

[afercia]

Relevant core Trac tickets:

The design of the focus outline on buttons/elements could be improved
https://core.trac.wordpress.org/ticket/34904
With some design proposals from @MichaelArestad

a11y-focus: Standardizing the handling of :focus and :hover
https://core.trac.wordpress.org/ticket/34957

[truchot]

I ask a silly question: why some buttons have 1px spacing when focusing, but not all ? (like on secondary version or icons buttons)

[afercia]

Noting that this issue should cover also other similar cases reported in other issues, now closed in favor of this one. For example. the Calendar selected date, prev/next month buttons, some custom elements in the sidebar, etc.

See for example screenshot from the full WPCampus report (issue #15277:

[afercia]

@truchot I guess because without the 1 pixel spacing, the focus outline would just make the button bigger. The spacing allows to clearly see the additional shape on focus:

[melchoyce]

I guess because without the 1 pixel spacing, the focus outline would just make the button bigger. The spacing allows to clearly see the additional shape on focus:

Yup! That's exactly it. It distinguishes the outline from the button.

[melchoyce]

Based on the existing tickets around this, I've dabbled with this for a while, and here's the most recent iteration...

Let's get a PR up for this. Marking as needs-dev.

@jasmussen Do you want to try this pattern out on the select menus?

[truchot]

I guess because without the 1 pixel spacing, the focus outline would just make the button bigger. The spacing allows to clearly see the additional shape on focus:

Yup! That's exactly it. It distinguishes the outline from the button.

I visually prefer the 1px spacing that's the reason of my question, why not all ?
:)

[melchoyce]

Didn't feel necessary for the lighter buttons, but we could certainly try it out.

[truchot]

Should the button style be flattened or we keep the shadow style ?