Media Library: Focus keeps jumping to URL field

[bramd]

When selecting/deselecting files using the keyboard, the focus jumps to the URL field after every selection change.

Now users have to press tab a lot to get back to the list. I propose focus just stays on the file when it is selected/deselected.

[helen]

This was done for accessibility in #23560, or else you cannot get into the sidebar without tabbing to the very end of the whole list. What would you suggest for getting into the sidebar otherwise?

[joedolson]

This is one of those ugly problems; I'm not sure what else to propose. Both solutions have major disadvantages - either it's difficult to get to the sidebar, or it's difficult to select multiple files. If there was an alternate control for selecting multiple files vs. selecting a single file that might be a good solution.

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

[bramd]

Replying to 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.

[afercia]

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

[joedolson]

@afercia's patch is a great start on this; we will really need active screen reader feedback on the usability for this. I'd like to see this a patch ready to go in early in 4.2 so that we can start iterating and testing.

This patch is much more comprehensive than the initial issue raised; it might need to be moved to a new ticket for clarity.

[joedolson]

This ticket has been superseded by #30512, which solves this issue but also takes into consideration the value of converting the add media interface into an ARIA application so that the entire navigation process can be made much easier for users with assistive technology.

Closing this ticket in favor of #30512.