[wp-trac] [WordPress Trac] #34904: The design of the focus outline on buttons/elements could be improved

[WordPress Trac]

#34904: The design of the focus outline on buttons/elements could be improved
-------------------------------------------------+-------------------------
 Reporter:  michaelarestad                       |       Owner:  audrasjb
     Type:  task (blessed)                       |      Status:  reopened
 Priority:  normal                               |   Milestone:  5.3
Component:  Administration                       |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  color-contrast blessed wpcampus-     |     Focuses:  ui,
  report has-patch has-screenshots needs-dev-    |  accessibility
  note commit 5-3-admin-css-changes              |
-------------------------------------------------+-------------------------

Comment (by Joen):

 Just attached a patch that does two things:

 1. It removes the 1px pixel shift on button :active. Given the flat style
 of the new buttons, this jog is visually incompatible. Additionally it
 hasn't even been on the buttons in Gutenberg, so it adds consistency.

 2. It adds a 0.1 second transition to the focus outline. This transition
 is already applied to the form fields, so this is another bit of
 consistency.

 In https://cloudup.com/ckHvhDJjyNI there are some before and after GIFs to
 see the difference.

 In terms of consistency and contrast, this trac ticket is a welcome step
 forward. I hope we can take additional steps in subsequent versions,
 inspired by this change. Many of these have already been mentioned, so
 take this as an endorsement for additional enhancements, such as:

 - Bigger buttons, consistent paddings that are perhaps harmonized to a
 standard grid.
 - More consistent font size across all buttons, perhaps bump to 14px.
 - Perhaps add some vibrancy to the blue color, by pushing it towards the
 purple side of the spectrun.

 Not suggesting buttons be purple, but one of the curious properties of the
 purple side of the spectrum (as opposed to the green side, which the
 WordPress brand color is leaning towards at the moment), is that contrast
 to white overlay text skyrockets: https://cloudup.com/cJXNAsoKWyM

 In other words, even very subtle shift towards ultramarine/purple can add
 a ton of color vibrancy without reducing brightness.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/34904#comment:94>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform