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

WordPress Trac noreply at wordpress.org
Fri Sep 20 16:25:10 UTC 2019


#34904: The design of the focus outline on buttons/elements could be improved
-------------------------------------------------+-------------------------
 Reporter:  michaelarestad                       |       Owner:  audrasjb
     Type:  enhancement                          |      Status:  accepted
 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                                    |
-------------------------------------------------+-------------------------

Comment (by kjellr):

 Replying to [comment:54 kjellr]:
 > Also, some elements (like standard links) still have the "glow" effect
 on focus:
 >
 > [[Image(https://cldup.com/3jgdK8X9C2-3000x3000.png)]]
 >
 > This ticket seems broad enough to refresh those too — should we replace
 those with the solid line used in Gutenberg?:
 >
 > [[Image(https://cldup.com/LJxz7pTk-A-2000x2000.png)]]

 I've added [attachment:"34904.10.diff"], which removes that glow hover
 state wherever I could find it. After some sleuthing, I actually believe
 that solid color hover state in Gutenberg actually only applies to
 buttons, so I'm not even sure it's supposed to be applied to buttons that
 look like links in the first place.

 Instead of adopting that, I've brought in the dotted line border that
 Gutenberg applies to most other focusable, non-button elements:

 [[Image(https://cldup.com/WOQlbXMM1M-3000x3000.png)]]

 Happy to reassess that treatment if we decide, but I think it works pretty
 well, and helps align with what you'd usually see in Gutenberg.

 I'm going to dig into the alternate color scheme buttons next and make
 sure those work nicely.

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


More information about the wp-trac mailing list