[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 5-3-admin-css-changes                     |
-------------------------------------------------+-------------------------
Changes (by afercia):

 * keywords:
     color-contrast blessed wpcampus-report has-patch has-screenshots
     needs-dev-note commit 5-3-admin-css-changes
     =>
     color-contrast blessed wpcampus-report has-patch has-screenshots
     needs-dev-note 5-3-admin-css-changes


Comment:

 @mapks thanks for your feedback.

 Noting that this ticket is about focus style and contrast :) #47477 is the
 ticket related to sizes. Saying this just to try to keep things in order.

 On your points: whether or not all these changes will stay or will be
 postponed to next releases, here's some notes that can be good for present
 or future work:

 > 1 Border radii are all over the place.
 I noticed that as well, though the "Add New" button is a pre-existing
 issue and does have a border-radius of 2px on all previous versions
 against the 3px of the core-ui buttons. I vaguely remember when it was
 implemented that was a design choice. I may be wrong, would need some
 software archeology on Trac.

 Can certainly be improved but needs a design decision. I'd tend to think
 deciding if the radius must be 2, 3, or 4 pixels would need just a few
 minutes.

 > 2 The default button height does not match the input field height.
 On 5.2 and all previous versions:
 - The default input field height is the one in the settings pages. About
 25px on macOS Chrome. Can vary across operating systems and browsers.
 - Some admin pages (e.g. the posts page) use a different input/select
 height to match with buttons so currently there's not a real "standard"
 - On 5.2 and previous: normal buttons have a height of 28px plus a bottom
 box-shadow that makes them look 1 pixel taller so even in this case form
 controls and buttons aren't visually aligned:

 [[Image(http://cldup.com/vTzFrzhuI1.png)]]

 - On 5.2 and previous: on mobile the small, normal, and large button sizes
 become all 31px (with various exceptions). Form controls change to a wide
 range of different heights with no apparent sense.

 With the new CSS:
 - form controls heights are way more standardized and have way less
 exceptions
 - just needs a decision on the default height of all controls: inputs,
 selects, buttons. To recap, on desktop - normal size:
   - buttons were not changed, they're still 28px
   - the inputs are now 30px
   - the new select is 28px
 We could make it all 28px or all 30px. And on mobile all 40px.

 However, @Joen made a very good point on establishing a grid base. I'd
 totally second that and I'd lean towards a base8. Thus, on desktop the
 normal size would be 32px and on mobile 40px. This needs a design
 decision.

 Given all heights are now much more standardized, these adjustments would
 be a matter of very few changes in the CSS.

 Lastly: I'd like to note this ticket is not about pixel perfection :)

 The main goal here is to remove all the fixed heights and allow all the UI
 controls to scale with zoom text. Otherwise, text within controls is cut
 off or overflows, making the controls barely usable.

 See for example what happens in Firefox with "Zoom Only Text":

 [[Image(http://cldup.com/KcnKs6nwAQ.png)]]

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