[wp-trac] [WordPress Trac] #27173: Better visual indication of focus on elements in the Admin

[WordPress Trac]

#27173: Better visual indication of focus on elements in the Admin
-------------------------------------+--------------------------------
 Reporter:  rianrietveld             |       Owner:
     Type:  task (blessed)           |      Status:  new
 Priority:  normal                   |   Milestone:  3.9
Component:  Administration           |     Version:  3.8.1
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |     Focuses:  ui, accessibility
-------------------------------------+--------------------------------

Comment (by celloexpressions):

 Replying to [comment:18 joedolson]:
 > Movement can also be very helpful in drawing focus, so adding a
 transition to the change would also help; if it flashed dark and then
 faded, for example. The shift can be very helpful in drawing attention.
 Since introducing color seems to be problematic (I'm sure we can figure it
 out, but it does complicate things), I've added [attachment:27173.5.diff]
 for discussion.

 In this patch, I've kept the current colors and shadows for focus styles.
 The only change is the addition of a "bouncing" animation, via CSS3
 transitions with custom timing functions (supported by latest few versions
 of all major browsers, falls back to non-bouncing animation otherwise).
 This causes the border color to flash to somewhere around `#555`
 (approximating the math) for a split second before fading back to `#999`
 (the current value). The movement definitely helps draw attention to the
 focus, although it could be more effective in conjunction with the
 addition of a colored glow.

 We could apply this effect to any focus indicator we end up picking
 (darkening, colored glow, thicker border, background color, outline, etc.)
 to achieve greater focus without impacting the design too heavily.

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