WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#32915 closed task (blessed) (fixed)

Buttons: focus style review

Reported by: afercia Owned by: helen
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.2
Component: Administration Keywords: has-patch has-screenshots
Focuses: ui, accessibility Cc:

Description

The focus style for standard buttons in the admin is slightly "heavier" than the style applied to other form elements. This is particularly noticeable when there are adjacent buttons and form elements, see for example the first part of the screenshot below:

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

The second part is just an example of how pairing the form elements and buttons focus style could be visually more appealing. I'm not saying that should be done exactly like in the example and this would need some accessibility consideration and review by the accessibility team but maybe worth considering for 4.4 :) Design proposal and patches welcome.

Attachments (2)

32915.patch (1.1 KB) - added by afercia 5 years ago.
32915.2.patch (1.1 KB) - added by afercia 4 years ago.

Download all attachments as: .zip

Change History (20)

#1 @melchoyce
5 years ago

The second part is just an example of how pairing the form elements and buttons focus style could be visually more appealing. I'm not saying that should be done exactly like in the example and this would need some accessibility consideration and review by the accessibility team but maybe worth considering for 4.4 :) Design proposal and patches welcome.

From a design perspective, I actually really like what you have here. Feels much more even.

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


5 years ago

#3 @joedolson
5 years ago

I agree with this; I can't see any advantage to having different focus states for these for any reason, and it's definitely seems cleaner to have everything better balanced.

#4 @afercia
5 years ago

Noticed (for the first time) that border-radius on the buttons seems to affect the rendering of box-shadows, at least in Chrome. Applying on the buttons the same exact border color and box-shadow value of the inputs won't result in the same, identical box-shadow. As soon as border-radius is removed, box-shadows are identical. So we may need to tweak the value a bit. Could someone confirm this? Thanks!

@afercia
5 years ago

#5 @afercia
5 years ago

Proposed patch is a first pass. Box shadows are slightly adjusted to make them match as much as possible the form elements ones because, as pointed out, looks like border-radius on buttons affects the way browsers paint box-shadows. At least on Windows. The effect could slightly vary depending on platforms and browsers, would need some visual testing.

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


5 years ago

#7 @helen
4 years ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 4.4

Let's look at this in conjunction with #31459, but we should do it either way.

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


4 years ago

#9 @SergeyBiryukov
4 years ago

  • Owner set to afercia
  • Status changed from new to assigned

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


4 years ago

#11 @helen
4 years ago

  • Keywords needs-patch needs-screenshots added; has-patch removed

Button updates = destruction of this patch. Let's refresh and get some screenshots of what it looks like with the updated button styles.

@afercia
4 years ago

#12 @afercia
4 years ago

  • Keywords has-patch has-screenshots added; needs-patch needs-screenshots removed

Refreshed patch. I've used the new box-shadow color rgba( 0, 115, 170, .8 ) but now when the buttons are close to other form elements (e.g. a select or an input field) their box shadow has different colors. Wondering if they should match. Even setting the exact same value, the box-shadow border-radius slightly changes the rendered colors. It would need some rgba value fine tuning.
Screenshots:

New buttons style, focused before and after the patch:

https://cldup.com/WGhkyg0Q0y.png

Button with the .active class, i.e. the one that looks "pressed":

https://cldup.com/tzgWKl0cFI.png

Not sure I like the "pressed" state, it just looks misaligned to me :) I can understand this while clicking the button but not so much in a persistent pressed state.

Last edited 4 years ago by afercia (previous) (diff)

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


4 years ago

#14 @wonderboymusic
4 years ago

  • Type changed from enhancement to task (blessed)

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


4 years ago

#16 @afercia
4 years ago

  • Owner changed from afercia to helen

#17 @hugobaeta
4 years ago

Finally took a serious look into this, and you did a phenomenal job at making them consistent @afercia. I'd love to try making them solid instead of a glow, but that's for another ticket I'm sure. I'd love to see this in 4.4 as it is an iterative step in consistency. :)

#18 @helen
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 35421:

Buttons: More consistent focus styling.

props afercia.
fixes #32915.

Note: See TracTickets for help on using tickets.