[wp-trac] [WordPress Trac] #28599: Better Visual Focus Indication in Admin Menu

[WordPress Trac]

#28599: Better Visual Focus Indication in Admin Menu
-------------------------------------------------+-------------------------
 Reporter:  AccessibleJoe                        |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  Future
                                                 |  Release
Component:  Administration                       |     Version:  3.8
 Severity:  normal                               |  Resolution:
 Keywords:  needs-design-feedback has-           |     Focuses:  ui,
  screenshots has-patch                          |  accessibility
-------------------------------------------------+-------------------------
Changes (by ryelle):

 * keywords:  needs-design needs-patch => needs-design-feedback has-
     screenshots has-patch


Comment:

 Resurrecting this old ticket, since as far as I can tell the approach is
 still valid, but it stalled out from lack of screenshots. The patch
 doesn't apply anymore, so I grabbed the basic idea of it and made
 [attachment:"28599.diff" a new patch]. This new patch adds a 4px box
 shadow to hover and focus, plus adding a spacer between the side of the
 submenu "flyout". Thanks to `currentColor` and transparent borders, we
 don't actually need to change the color scheme sass base, it behaves
 correctly in all schemes.

 So, screenshots. I have plenty of those: https://cloudup.com/cdWzjq0yvuq

 There are a handful of focus and hover states across every color scheme -
 top level menu items, submenu items, with default desktop menu, collapsed
 menu, and on a small screen. Those are all labelled. Then I took a few
 across different languages, including RTL. Lastly, some Windows high
 contrast screenshots. The hover state is invisible here, but there already
 was an outline focus state. A surprise benefit (IMO) is that the
 transparent border now highlights where the submenu is, though I wish we
 had a media query to fix the awkward arrow-box.

 Tagging for design feedback 🙂

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