WordPress.org

Make WordPress Core

Opened 4 years ago

Last modified 10 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 blessed wpcampus-report has-patch has-screenshots needs-dev-note commit
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 (19)

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.
34904.7.diff (6.4 KB) - added by kjellr 34 hours ago.
34904.8.diff (6.4 KB) - added by audrasjb 33 hours ago.
fix errors on 34904.7.diff: line 258 and caps on hex values
34904.9.diff (6.3 KB) - added by audrasjb 33 hours ago.
fix errors on 34904.7.diff: line 258 and caps on hex values
778f5cb6f003fe43bd0e08a12fb221a9.gif (38.4 KB) - added by audrasjb 27 hours ago.
Keyboard navigation example - Works fine!
a18a527f0124b9fecc9a7f5e20291d07.gif (528.9 KB) - added by audrasjb 27 hours ago.
Keyboard navigation example - Works fine!
d5f70a20cd45fd7e843f3b8e028bd765.gif (2.6 MB) - added by audrasjb 27 hours ago.
Keyboard navigation example - Works fine!
34904.10.diff (8.6 KB) - added by kjellr 14 hours ago.
34904.11.diff (12.2 KB) - added by kjellr 12 hours ago.

Change History (80)

#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.


3 weeks ago

#42 @audrasjb
3 weeks ago

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

#43 @audrasjb
3 weeks ago

  • Keywords needs-testing added

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


2 weeks ago

#45 @kjellr
12 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.


4 days ago

@kjellr
34 hours ago

#47 @kjellr
34 hours ago

Just added 34904.7.diff, which includes the button styles in the followup iteration described here:

https://make.wordpress.org/design/2019/09/06/discussion-higher-contrast-form-fields-and-buttons/#comment-25971

The colors use:

  • #fff text on a #007cba background for the primary buttons (Contrast ratio 4.57:1)
  • #555 text on a #f1f1f1 background for the secondary buttons (Contrast ratio 6.6:1)

Screenshots:

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

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

https://cldup.com/u5hl-9XPkg-3000x3000.png

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

@audrasjb
33 hours ago

fix errors on 34904.7.diff: line 258 and caps on hex values

#48 @audrasjb
33 hours ago

  • Keywords has-patch added; needs-patch removed

Thanks for the refresh @kjellr ❤
In 34904.8.diff I fixed some small errors:

  • double semi-colon ;;
  • caps on hexadecimal value

Otherwise, all is looking good to me. Thanks again, you rock :)

@audrasjb
33 hours ago

fix errors on 34904.7.diff: line 258 and caps on hex values

#49 @audrasjb
33 hours ago

34904.9.diff is the good patch, sorry I uploaded it twice :s

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


33 hours ago

#51 @karmatosed
33 hours ago

From design perspective looks great to me so adding a +1 for feedback. Thanks for all your work everyone on this. I have tested it so removing testing keyword.

Last edited 33 hours ago by karmatosed (previous) (diff)

#52 @karmatosed
33 hours ago

  • Keywords needs-testing removed

@audrasjb
27 hours ago

Keyboard navigation example - Works fine!

@audrasjb
27 hours ago

Keyboard navigation example - Works fine!

@audrasjb
27 hours ago

Keyboard navigation example - Works fine!

#53 @audrasjb
26 hours ago

  • Keywords has-screenshots needs-dev-note commit added

34904.9.diff is looking great on my side too (see screenshots).
Maybe there is some room for disabled state color contrast enhancements in a next commit but it's a really great enhancement as it :)

#54 follow-up: @kjellr
18 hours ago

Great, thanks for testing! We also need to make sure this works alright with alternate color schemes. If nobody else gets there first, I'll take a look later today.

Also, some elements (like standard links) still have the "glow" effect on focus:

https://cldup.com/3jgdK8X9C2-3000x3000.png

This ticket seems broad enough to refresh those too — should we replace those with the solid line used in Gutenberg?:

https://cldup.com/LJxz7pTk-A-2000x2000.png

#55 @karmatosed
17 hours ago

I noted this when testing within Slack, so changing the flow effect seems good to me.

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


16 hours ago

#57 @afercia
16 hours ago

  • Type changed from enhancement to defect (bug)

Discussed during today's accessibility bug-scrub. This ticket is related to other tickets marked as "bug" aiming to improve contrast and focus indication. It's best to change it from "enhancement" to "bug" so that all these related tickets can be handled together.

#58 @anevins
15 hours ago

  • Type changed from defect (bug) to enhancement

Sorry commented on wrong ticket

Last edited 15 hours ago by anevins (previous) (diff)

@kjellr
14 hours ago

#59 in reply to: ↑ 54 @kjellr
14 hours ago

Replying to kjellr:

Also, some elements (like standard links) still have the "glow" effect on focus:

https://cldup.com/3jgdK8X9C2-3000x3000.png

This ticket seems broad enough to refresh those too — should we replace those with the solid line used in Gutenberg?:

https://cldup.com/LJxz7pTk-A-2000x2000.png

I've added 34904.10.diff, which removes that glow hover state wherever I could find it. After some sleuthing, I actually believe that solid color hover state in Gutenberg actually only applies to buttons, so I'm not even sure it's supposed to be applied to buttons that look like links in the first place.

Instead of adopting that, I've brought in the dotted line border that Gutenberg applies to most other focusable, non-button elements:

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

Happy to reassess that treatment if we decide, but I think it works pretty well, and helps align with what you'd usually see in Gutenberg.

I'm going to dig into the alternate color scheme buttons next and make sure those work nicely.

@kjellr
12 hours ago

#60 @kjellr
12 hours ago

Uploaded a fresh version: 34904.11.diff

This one makes sure the alternate color schemes follow these new button styles focus borders:

https://cldup.com/HRCTIWkq9U.gif

A note about that: Not all of the alternate button styles pass contrast tests. But they didn't before, so I think we're fine? Seems like a separate issue, and one that should be considered separately.

This also fixes an issue where the active toggle button wasn't very noticeable. Should be a bit better now:

https://cldup.com/V2FGDIE28i-1200x1200.png

This patch is getting pretty large, but I think it covers everything it needs to.

The buttons.css file header suggests to edit editor.css as well. I see that file contains some TinyMCE buttons, but I can't find any of them in use, so I'm hesitant to make any changes. I checked the classic editor and it seems to be fine as is. If anyone knows where those are, and can fix them, that would be excellent. Otherwise, I think this is just ready for some solid, thorough testing.

That's probably my last patch in this thread for the day, so feel free to update and build on the patch if anyone finds bugs! Thanks.

Last edited 12 hours ago by kjellr (previous) (diff)

#61 @karmatosed
10 hours ago

@kjellr in testing this it feels as good as I think we can get for beta 1. I would note there needs to be some thorough stress testing of this during beta.

Note: See TracTickets for help on using tickets.