[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:  (none)
     Type:  enhancement                          |      Status:  new
 Priority:  normal                               |   Milestone:  5.3
Component:  Administration                       |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  color-contrast needs-patch blessed   |     Focuses:  ui,
  wpcampus-report                                |  accessibility
-------------------------------------------------+-------------------------

Comment (by kjellr):

 I've just added [ ], which includes the buttons from @joen's mockup above.
 Those were missing active and disabled states, so I've approximated those.

 [[Image(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:

 [[Image(https://cldup.com/xkVkbMgnal.png)]]

 [[Image(https://cldup.com/6ZOeSZPcaT.png)]]

 [[Image(https://cldup.com/kg2qaEdX0b.png)]]

 [[Image(https://cldup.com/9Pm243XPcu.png)]]

 ... and here are the focus states:

 [[Image(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.

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