[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:
     Type:  defect (bug)             |      Status:  new
 Priority:  normal                   |   Milestone:  Future Release
Component:  General                  |     Version:  3.8
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch dev-feedback   |     Focuses:  ui, accessibility,
  ui-feedback                        |  administration
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  has-patch reporter-feedback dev-feedback needs-testing => has-
     patch dev-feedback ui-feedback


Comment:

 Hi everyone, followed meetings and discussion on Slack and this ticket,
 I'm currently working on an alternate patch.
 Before going ahead though, I'd like to involve everyone in the discussion,
 including lead devs and contributors and listen to any thoughts and
 feedback.
 It makes no sense to spend a lot of time on the patch without a wide
 consensus :) especially because we're going to propose to (slightly)
 change the default blue color scheme.

 So, the screenshots below are not mockups: they're screenshots of a
 working patch, that means what you see it's doable and already working but
 not ready to be attached here for now.

 Following [https://make.wordpress.org/accessibility/2014/06/25/visual-
 focus-indication-in-left-navigation/ the border idea proposed in the Make
 Accessible blog] by @accessiblejoe and others, it would be nice to have
 the border just on focus, not on hover (technically, it's not a CSS border
 but it's a box-shadow so it's not supported by IE 8). That's because I
 would try to respect the current design as much as possible and at the
 same time have a better level of accessibility.

 For now, I would recommend to focus on the general idea, not the technical
 details. Hope the screenshots are clear enough, let me know.

 Focus: 1 - 2 - 3 before the patch, 4 - 5 - 6 after the patch
 Please notice the icon and the arrow, now they work consistently on focus
 too.

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

 Hover: 1 - 2 - 3 before the patch, 4 - 5 - 6 after the patch

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

 Things to consider:
 1. focus arrow alternate version (maybe nicer?)
 2. focus on fly-out sub item when it's near the arrow (ugly?)
 3. focus on the current parent (looks ok to me)

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

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