[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 afercia):

 @Joen thanks for the patch!

 Removing the active state shift makes totally sense.

 Regarding the focus transition, in core things are a bit different. Some
 elements have a transition, other elements don't. When tabbing through (or
 clicking on) adjacent elements, seeing the inconsistency produced by the
 presence or lack of transition is not that great and feels sluggish. See
 conversation on #47153 starting from
 https://core.trac.wordpress.org/ticket/47153#comment:50

 Also, I'd tend to think that at the very least the transition should obey
 the `prefers-reduced-motion` setting.

 For these reasons in
 https://core.trac.wordpress.org/attachment/ticket/47477/47477.7.diff I'm
 removing the transition entirely for now and I'd suggest to re-evaluate
 later. If no objections. I'd commit only the removal of the active
 transition.

 > Bigger buttons, consistent paddings that are perhaps harmonized to a
 standard grid.

 I'd totally second this. Having now spent some time on the core CSS I
 refreshed my memory on all the various core inconsistencies :) Setting and
 harmonizing new default buttons and input field sizes is something that
 need to happen sooner or later. I'd start by defining simple values for
 the normal size heights for example 30px on desktop / 40px on mobile and
 then elaborate a scale for small and large starting from there. #47477 is
 the ticket related to sizes. However, this would need some iterations and
 in depth testing, not sure it can be done now.

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