[wp-trac] [WordPress Trac] #29371: Media Library: Focus keeps jumping to URL field

[WordPress Trac]

#29371: Media Library: Focus keeps jumping to URL field
-------------------------------------+-------------------------------------
 Reporter:  bramd                    |       Owner:
     Type:  defect (bug)             |      Status:  new
 Priority:  normal                   |   Milestone:  Awaiting Review
Component:  Media                    |     Version:  4.0
 Severity:  normal                   |  Resolution:
 Keywords:  reporter-feedback has-   |     Focuses:  ui, accessibility,
  patch needs-testing                |  javascript
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  reporter-feedback => reporter-feedback has-patch needs-testing
 * focuses:  accessibility => ui, accessibility, javascript


Comment:

 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/29371#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform