WordPress.org

Make WordPress Core

Opened 4 years ago

Last modified 44 hours ago

#34904 accepted enhancement

The design of the focus outline on buttons/elements could be improved

Reported by: michaelarestad Owned by: audrasjb
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: color-contrast needs-patch blessed wpcampus-report needs-testing
Focuses: ui, accessibility Cc:

Description

Currently, the focus styles for buttons and many elements use a gradient box shadow that can be pretty hard to spot in some instances including the primary button styles.

https://cldup.com/lwuCk0gUo5-3000x3000.png

I'd like to propose something more like what we use on WordPress.com:

https://cldup.com/On1XG_XlGY.png

CC @mor10

Attachments (11)

34904.diff (2.4 KB) - added by michaelarestad 4 years ago.
border.png (205.5 KB) - added by michaelarestad 4 years ago.
34904.2.diff (2.6 KB) - added by michaelarestad 4 years ago.
34904.3.diff (2.5 KB) - added by michaelarestad 4 years ago.
larger-border.png (6.8 KB) - added by michaelarestad 4 years ago.
01 primary.png (7.0 KB) - added by afercia 4 months ago.
Gutenberg primary button focus style
02 secondary.png (10.3 KB) - added by afercia 4 months ago.
Gutenberg secondary button focus style
34904.4.diff (1.5 KB) - added by truchot 4 months ago.
34904.5.diff (2.6 KB) - added by kjellr 4 months ago.
57212529-4f967d80-6fe4-11e9-8fb3-be618ee4c173.png (95.8 KB) - added by Joen 3 months ago.
mockup
34904.6.diff (6.3 KB) - added by kjellr 3 weeks ago.

Download all attachments as: .zip

Change History (57)

#1 @michaelarestad
4 years ago

  • Type changed from defect (bug) to enhancement

#2 @afercia
4 years ago

I'm all for improvements to the focus style, by the way I'd suggest to consider the focus style in real use scenarios, for example when buttons are close to other form elements, the focus style should be consistent. See what was done on #32915. Screenshot before and after the changes from #32915:

https://cldup.com/7cvBrscHAN.png

#3 follow-up: @michaelarestad
4 years ago

I totally agree. I want to make sure these focus styles are pretty dang consistent across the board. We might even have to work on links as well.

#4 in reply to: ↑ 3 @afercia
4 years ago

Replying to michaelarestad:

We might even have to work on links as well.

+1 Yep, focus styles should probably be as similar as possible everywhere.

#5 @mor10
4 years ago

This looks way cleaner to me. When the button is blue, I'm wondering if there is enough contrast between the button itself and the outline. Might want to create a stronger difference, either by making the focus state a dotted/dashed line, or by changing the outline color to be more distinctly different.

I may be overthinking this.

#6 @michaelarestad
4 years ago

@mor10 Maybe. The size difference in overall appearance works pretty well even though the colors are similar. We'll see what we can do.

#7 @mor10
4 years ago

Looking at Twitter, I noticed that they have added a 2px space between the button and the outline to clearly separate the focus state indicator from the button itself. This might be a solution here as well: Provide some whitespace to show this is a line drawn around the element to indicate it is currently in focus.

Easiest place to see it is in the "People to follow" area. I'll upload some images later.

#8 @michaelarestad
4 years ago

@mor10 Good find. Might make sense just for the primary buttons. Twitter mostly only uses it on the blue buttons. Gallery of uses: https://cloudup.com/ckMCQgaDLaw

#9 @kellychoffman
4 years ago

With a white border:

https://cldup.com/FpkU2IH_lu.png

    box-shadow: 0 0 0 .75px #fff, 0 0 0 2.5px #33b3db;
Last edited 4 years ago by kellychoffman (previous) (diff)

#10 @johnbillion
4 years ago

  • Version trunk deleted

@michaelarestad
4 years ago

#11 @michaelarestad
4 years ago

I added an initial quick patch to mess with a non-gradient style. @kellychoffman I tried yours, but it was doing something funky on my external monitor maybe because of the half pixel. Also, we'll need to account for the 3D effect of the bottom (the extra 1px bottom shadow). Will try again in a V2 because I like the idea of the gap for the primary button.

I did maybe get a little overreaching with the focus style on links by adding a border radius. There's another fancy trick I want to try on links, but not quite yet.

Results of the first patch:

https://cldup.com/MjKKJiYHtb.png

#12 @adamsoucie
4 years ago

It works great except for the primary buttons. The contrast between the primary button background color and the border is really low (1.91). We'll need some kind of alternate color so that it is clear there is a :focus being placed on the primary button. Otherwise, a great step forward!

Contrast score: http://snook.ca/technical/colour_contrast/colour.html#fg=008EC0,bg=5EC7E3

#13 @kellychoffman
4 years ago

@michaelarestad Right, the half pixel isn't necessary. A full pixel gap would probably make more sense anyways.

The contrast between the primary button background color and the border is really low.

This could be improved using the (white) pixel gap.

@michaelarestad
4 years ago

#14 @michaelarestad
4 years ago

@kellychoffman I agree. I just took another stab at it. I added the white gap to just the primary button and kept the shadows from the previous patch elsewhere. The box shadow is nasty, but works. The alternative would be to switch to using a border for the shadows and such which is a bit nastier.

It should look like this:

https://core.trac.wordpress.org/raw-attachment/ticket/34904/border.png

#15 @michaelarestad
4 years ago

The latest patch, 34904.3.diff, has a simpler box shadow (never drink while box shadowing) than what I cam up with last time. I did, however bump the size of the shadow on the primary button slightly. It now has a single pixel white border and a 3 pixel blue border for a combined 4 pixels total.

It should look like this:

https://core.trac.wordpress.org/raw-attachment/ticket/34904/larger-border.png

This ticket was mentioned in Slack in #design by michaelarestad. View the logs.


4 years ago

This ticket was mentioned in Slack in #accessibility by michaelarestad. View the logs.


4 years ago

This ticket was mentioned in Slack in #core by ocean90. View the logs.


4 years ago

#19 @afercia
4 years ago

Related: #34957.

#20 @kellychoffman
4 years ago

It now has a single pixel white border and a 3 pixel blue border for a combined 4 pixels total.

Do you think 3 pixels is too much? What about only 2?

This ticket was mentioned in Slack in #design by michaelarestad. View the logs.


3 years ago

#22 @paaljoachim
3 years ago

I just want to say that outlining is an subtile effect meaning having a white border and then the blue creates a double effect white and blue. I think that is too much as it goes from subtile over to its own effect which I believe is too strong and takes too much visual space. Perhaps less pixels will help. I think posting some pixels variations can help as well.

I went looking for the pattern library as I would like to test this out but can not find it online. Where can I get a hold of the pattern library?

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 years ago

#24 @afercia
3 years ago

  • Milestone changed from Awaiting Review to Future Release

Moving to future release as it is something that should be done and there are some initial proposals here. Hoping there will be some more traction in the next releases.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 years ago

This ticket was mentioned in Slack in #design by afercia. View the logs.


3 years ago

#27 @afercia
5 months ago

  • Keywords color-contrast added

#28 @afercia
4 months ago

Noting that Gutenberg just implemented a new focus style for the buttons, which is better for accessibility and design-approved. See https://github.com/WordPress/gutenberg/pull/15544

Would be great to use the same style in core as well, for better accessibility and consistency.

@afercia
4 months ago

Gutenberg primary button focus style

@afercia
4 months ago

Gutenberg secondary button focus style

@truchot
4 months ago

#29 @truchot
4 months ago

As I do in Gutenberg, I try to fix button focusing color contrast.
It seems screen options button focus are altered it's not yet perfect…

@kjellr
4 months ago

#30 @kjellr
4 months ago

Thanks, @truchot. This is a great start. I added an updated version (34904.5.diff) that adds a couple missing buttons, and also tries this out on form fields for consistency:

https://cldup.com/TAqKBNhj33-2000x2000.png

I'm not sure if we'd want the state for those to be exactly this, or if we'd want to use the slightly different state from Gutenberg:

https://cldup.com/Yq8D-Of_qW-2000x2000.png

(Whatever we choose, I figure we should make the treatments consistent here and in Gutenberg)

Last edited 4 months ago by kjellr (previous) (diff)

#31 @truchot
4 months ago

Great ! It works well.
Maybe input radio and checkbox don't need 1px spacing like secondary button proposed here

#32 @afercia
4 months ago

Worth noting there are other pending tickets for the various checkboxes, radio buttons, select, and inputs. From the oldest to the latest one:

Color contrast: checkboxes and radio buttons
https://core.trac.wordpress.org/ticket/35596

Color contrast: input fields, textareas, select elements etc.
https://core.trac.wordpress.org/ticket/44606

Redesign input fields, checkboxes and other form components for contrast and consistency
https://core.trac.wordpress.org/ticket/44749

Definitely in favor of improving contrast for the form fields but I'd recommend to keep things separated and dedicate this ticket only to the buttons. Any help to make the above pending tickets move on is greatly welcome :)

This ticket was mentioned in Slack in #design by kjell. View the logs.


4 months ago

#34 @Joen
3 months ago

☝️

Added a mockup from a related block editor ticket (https://github.com/WordPress/gutenberg/issues/15432#issuecomment-489536288), worth throwing into the mix for consideration. The key design constraint that inspired the mockup was a reliance on borders instead of drop shadows, both to create consistency between input styles, dropdown widgets and button styles, but to be able to allow the same high contrast focus style for all of them.

Worth also noting that drop shadows alone are removed in Windows high contrast mode, so a focus style made up of only a drop shadow won't show up there. We can hack around that — show a transparent outline, it will be made opaque in that mode — but it would be nice to simplify things and have the same bordered focus style across modes.

Last edited 3 months ago by Joen (previous) (diff)

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


4 weeks ago

#36 @melchoyce
4 weeks ago

#47151 was marked as a duplicate.

#37 @afercia
4 weeks ago

  • Keywords wpcampus-report added

Adding the wpcampus-report keyword because #47151 (ticket from the WPCampus report) was closed in favor of this ticket.

#38 @melchoyce
4 weeks ago

  • Keywords needs-patch blessed added; wpcampus-report removed
  • Milestone changed from Future Release to 5.3

Let's implement @Joen's mockups for 5.3. We'll need someone to write a patch that covers all buttons in wp-admin.

#39 @melchoyce
4 weeks ago

  • Keywords wpcampus-report added

Oops, Trac overlap. Re-adding wpcampus-report.

@kjellr
3 weeks ago

#40 @kjellr
3 weeks ago

I've just added 34904.6.diff, which includes the buttons from @joen's mockup above. Those were missing active and disabled states, so I've approximated those.

https://cldup.com/mhoigjfYz9.png
(You can try those live on CodePen: https://codepen.io/kjellr/full/bGbrqyq)

Here are some screenshots with those buttons in the UI:

https://cldup.com/xkVkbMgnal.png

https://cldup.com/6ZOeSZPcaT.png

https://cldup.com/kg2qaEdX0b.png

https://cldup.com/9Pm243XPcu.png

... and here are the focus states:

https://cldup.com/S6rruL5pfZ.png

In general, this seems positive to me. My hesitancy is around the default buttons — having them appear on a white background gives them an "outline-only" sort of appearance if the end up on a white background (like in Gutenberg), and I wonder if we should pull them forward visually a little more than that?

Also noted above, there area some other tickets in the works. We should consider how new treatments here align to the work being done in #47153 for example.

Last edited 3 weeks ago by kjellr (previous) (diff)

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


2 weeks ago

#42 @audrasjb
2 weeks ago

  • Owner set to audrasjb
  • Status changed from new to accepted

#43 @audrasjb
2 weeks ago

  • Keywords needs-testing added

This ticket was mentioned in Slack in #design by kjell. View the logs.


2 weeks ago

#45 @kjellr
10 days ago

As noted, this issue is deeply related to a couple other tickets. The design team is discussing these holistically over here:
https://make.wordpress.org/design/2019/09/06/discussion-higher-contrast-form-fields-and-buttons/

Feel free to weigh in there if anyone else has thoughts. Once we have alignment there, we'll bring any related design changes back into this ticket. 👍

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


44 hours ago

Note: See TracTickets for help on using tickets.