[wp-trac] [WordPress Trac] #29958: collapse menu keyboard accessibility

[WordPress Trac]

#29958: collapse menu keyboard accessibility
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Menus              |    Version:  4.0
 Severity:  normal             |   Keywords:
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 See also related #29955 point 1.

 The "Collapse menu" item is not focusable and keyboard users can't
 collapse/expand the admin menu.

 Some screen readers (tested with Firefox + NVDA) may announce it as
 "clickable" and you can activate it but it's still not focusable: you
 can't get to it using the Tab key, but only using the Arrow up and Arrow
 down keys.
 Regardless, please consider that this issue is not just for screen reader
 users, they may found useless to collapse/expand the menu, but it's for
 all keyboard users: all the people who can't or don't want to use a
 pointing device. It would be nice to offer them a little improvement.

 The best option here is to use a `button` element which
 [http://www.456bereastreet.com/archive/201302/making_elements_keyboard_focusable_and_clickable/
 natively supports mouse and keyboard interaction]

 Quoting @joedolson at WordCamp Chicago 2014:
 > "If it's supposed to act like a button, it should be a button."
 :) Buttons are mentioned also in the
 [https://make.wordpress.org/accessibility/draft-theme-review-
 accessibility-guidelines/ accessibility guidelines for themes]

 - proposed patch also adds a hidden text "Expand menu" that is available
 just for screen readers when the menu is folded or auto-folded.
 - about colors on hover and focus, tries to take into account the
 alternative color schemes which currently are a bit inconsistent, but this
 part is optional; which color should be used?

 In the screenshot below, see the current color on hover/focus in different
 color schemes: should use the submenu items color or its own color?

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

 Needs testing, especially in IE9+.
 Any thoughts welcome, especially from the accessibility team and mailing
 list.

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