[wp-trac] [WordPress Trac] #30512: Improve media views accessibility

[WordPress Trac]

#30512: Improve media views accessibility
-------------------------------------------+-----------------------------
 Reporter:  afercia                        |      Owner:
     Type:  defect (bug)                   |     Status:  new
 Priority:  normal                         |  Milestone:  Awaiting Review
Component:  Media                          |    Version:  4.0
 Severity:  normal                         |   Keywords:
  Focuses:  ui, accessibility, javascript  |
-------------------------------------------+-----------------------------
 Splitting this out from #29371

 About the media grid:

 >Replying to [comment:4 bramd]:
 >> I had some thoughts about this and discussed it on the WP a11y
 mailinglist, where people seem to agree.
 >>
 >> Currently, we use aria to indicate the list as a group of checkboxes, I
 propose we make that a listbox with multiselection if applicable
 (role="listbox", aria-multiselect). Then it also makes sense to mark the
 whole thing with aria role application to indicate we handle focus inside.
 We can rely on the arrow key navigation and make the list focusable by
 tabbing to it. This means the individual items will get a tabindex of -1.
 As an added bonus, we get the screenreader reading indexes for freee (e.g.
 "Testfile" item 1 of 3).

 First try to apply @bramd idea, the attachment grid has now an ARIA role
 of "application" and seems it's working nicely. Added ARIA roles,
 attributes, improved keyboard accessibility and screen readers feedback.
 It's complex so please bear with me :) It's just a first try and there are
 still many things to refine.
 Any thoughts more than welcome, please test extensively.

 Basically, when in the attachment grid:
 - use arrows to navigate through attachments in any direction
 - use tab to navigate sequentially
 - once an attachment is selected, additional controls "Deselect" and "Edit
 details" will be announced, use tab to focus and activate them
 - arrows navigation will skip the additional controls so it's possible to
 navigate quickly through attachments even when many of them are selected

 Focus is no more automatically moved to the Details sidebar. The idea is
 to have a dedicated control to move to the Attachment Details that will be
 revealed just when the attachment is selected.

 Many other details, TL;DR

 Some things to improve:
 - labels refinements
 - add a control to go back from Attachment Details to the currently
 selected image
 - better "saved" feedback message after editing attachment details
 - inline help
 - visual: designers feedback welcome

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