[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:  trunk
 Severity:  normal             |  Resolution:
 Keywords:  reporter-feedback  |     Focuses:  accessibility
-------------------------------+------------------------------

Comment (by bramd):

 Replying to [comment:3 helen]:
 > I wonder if it would make sense to have tab take you to the sidebar
 after selecting an item, but leaving focus in the list of items so you can
 still use arrow keys to get around. Not sure how feasible that is, given
 how things work. We may need to tackle that in 4.1 as opposed to 4.0,
 though.

 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).

 I also suggest adding a label and probably a bit of help (through aria-
 description?) to indicate to the user that it's possible to use
 left/right/up/down arrows to navigate and explain the selection hotkeys.

 I totally agree we should push this to 4.1. I already implemented a first
 try to see if the idea might work in practice. However, I broke keyboard
 navigation in the process. So the changes don't seem that big, they need
 proper testing and I don't want to rush that.

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