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

[WordPress Trac]

#29958: collapse menu keyboard accessibility
----------------------------+--------------------------------------------
 Reporter:  afercia         |       Owner:  afercia
     Type:  defect (bug)    |      Status:  assigned
 Priority:  normal          |   Milestone:  4.7
Component:  Administration  |     Version:  4.0
 Severity:  normal          |  Resolution:
 Keywords:  has-patch       |     Focuses:  ui, accessibility, javascript
----------------------------+--------------------------------------------
Changes (by afercia):

 * keywords:  needs-testing has-patch needs-refresh => has-patch
 * owner:   => afercia
 * focuses:  ui, accessibility, administration => ui, accessibility,
     javascript
 * milestone:  Future Release => 4.7


Comment:

 [attachment:29958.diff] is a refresh with a first pass for a slightly
 different approach.

 Looking back at this, the JS approach makes more sense if used to simplify
 a bit other parts of `common.js`, for example to avoid some code
 repetition in `window.wpResponsive.trigger`. There is room for further
 improvements but that would require a broader refactoring so I've tried to
 don't introduce too many unrelated changes and keep the diff as clean as
 possible.

 I'd propose to simplify the accessibility part too. No more ARIA live
 region. When the menu is collapsed, the button text is hidden so instead
 of updating the button text it's better to use and update an `aria-label`
 and an `aria-expanded` attributes.

 - makes the collapse/expand control a `<button>`, so it's actionable with
 a keyboard
 - adds `aria-label` and `aria-expanded` attributes on the button,
 dynamically updated to give feedback to assistive technologies users
 - introduces new functions to get the viewport width, set the menu state,
 and update the button's ARIA attributes

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