[wp-trac] [WordPress Trac] #31575: Press This: post options toggle accessibility improvements

[WordPress Trac]

#31575: Press This: post options toggle accessibility improvements
-------------------------------------------+-----------------------------
 Reporter:  afercia                        |      Owner:
     Type:  defect (bug)                   |     Status:  new
 Priority:  normal                         |  Milestone:  Awaiting Review
Component:  Press This                     |    Version:  trunk
 Severity:  normal                         |   Keywords:
  Focuses:  ui, accessibility, javascript  |
-------------------------------------------+-----------------------------
 Currently, there are 2 buttons to toggle the post options panel,
 1. button with "tag icon" + "Show post options" hidden text
 2. button with "Done" text
 and their visibility is toggled depending on the panel visibility.

 For screen reader users, having controls that "appear and disappear" is
 confusing, I would propose to simplify and use just one button. Worth
 noting the "add category" button is a very similar case and uses just one
 button.

 The proposed patch tries to:

 - use just one button to toggle the post options panel
 - one button, one JS function: toggleSidebar() instead of openSidebar()
 and closeSidebar()
 - add aria attributes and screen-reader-text
 - minor CSS tweak to make the add category button clickable area a bit
 bigger, see before/after screenshot

 Feedback about the JavaScript part would be greatly appreciated :)

 Outstanding issues:
 - the "aria-expanded" attribute should probably be used on the options
 panel, not on the button
 - the options panel should use a proper ARIA role and have a label
 Would like to discuss these points with the accessibility team, not sure
 about what to do here.

 add category clickable area:

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

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