[wp-trac] [WordPress Trac] #32346: Admin menu: improve accessibility when collapsed

[WordPress Trac]

#32346: Admin menu: improve accessibility when collapsed
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Administration     |    Version:  4.2
 Severity:  normal             |   Keywords:
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 Screen reader users may activate the "Collapse menu" item maybe without
 knowing for sure what that does but that control is announced by screen
 readers and can be activated, so there's always the chance someone will
 give it a try. While the menu visual change won't make any difference for
 totally blind users (though screen readers are used also by low vision
 users), the information available for Assistive Technologies will change.

 Turns out that when the menu is collapsed, the first level menu item is
 hidden with `display: none` and so it's hidden from Assistive Technologies
 too. At this point there's only a dashicon, no text to be read out.

 Here's how NVDA with Firefox reads out the menu, example limited to the
 "Posts" menu group:

 Expanded menu:
 {{{
 Posts subMenu  link
 list with 4 items
 All Posts link
 Add New link
 Categories link
 Tags link
 out of list
 }}}

 Collapsed menu:
 {{{
 subMenu  link <-- the first level item is now just a dashicon, no text to
 be read out
 list with 5 items <-- but only 4 are focusable
 All Posts link
 Add New link
 Categories link
 Tags link
 out of list
 }}}

 To keep it simple, I'd propose to avoid any JavaScript and change the CSS
 part. No more `display: none` but a very simple off-left rule, as far as I
 see there's no reason to use the full `screen-reader-text` rule here.
 Additionally, the first not-focusable item in the fly-out menu should be
 hidden from AT with an `aria-hidden=true` attribute.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32346>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform