WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#29371 closed defect (bug) (maybelater)

Media Library: Focus keeps jumping to URL field

Reported by: bramd Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.0
Component: Media Keywords: reporter-feedback has-patch needs-testing
Focuses: ui, accessibility, javascript Cc:

Description

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.

Attachments (1)

29371.patch (24.2 KB) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (11)

#1 @helen
5 years ago

  • Keywords reporter-feedback added

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?

#2 @joedolson
5 years ago

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.

#3 follow-up: @helen
5 years ago

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.

#4 in reply to: ↑ 3 @bramd
5 years ago

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.

This ticket was mentioned in IRC in #wordpress-ui by RianRietveld. View the logs.


5 years ago

#6 @afercia
5 years ago

  • Focuses ui javascript added
  • Keywords has-patch needs-testing added

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

@afercia
5 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 years ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


5 years ago

#9 @joedolson
5 years ago

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

#10 @joedolson
5 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.