Make WordPress Core

Opened 4 years ago

Closed 3 years ago

#48403 closed defect (bug) (fixed)

Media modal: the inline uploader visual order doesn't match the source order

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 5.4 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots has-patch commit
Focuses: ui, accessibility, javascript Cc:

Description

In the Media modal dialog, when a search doesn't return results, the so called "inline uploader" appears with a message: "No items found. Drop files to upload" and the UI to upload new files.

The inline uploader UI appears after the toolbar with the search but it's actually placed before it in the source.

This is extremely confusing for keyboard users and assistive technologies users, as tabbing through the content happens with a illogical, counterintuitive order.

See attached screenshots.

To see the inline uploader:

  • from Gutenberg: insert an image block
  • click Media Library
  • within the modal, do a search that doesn't return results
  • see the inline uploader appears
  • use the Tab key to navigate through the modal elements
  • see the tab order is confusing

Same for the Classic editor: just click Add Media and do a search that doesn't return results.

Not sure there are technical reasons why the inline uploader is placed in the source out of a logical order. worth exploring and fixing the order.

Attachments (6)

media inline uploader 01.png (84.9 KB) - added by afercia 4 years ago.
media inline uploader 02.png (99.8 KB) - added by afercia 4 years ago.
48403.diff (1.2 KB) - added by syhc 4 years ago.
48403.1.diff (1.1 KB) - added by audrasjb 3 years ago.
Media: Accessibility: Move the inline uploader right after the toolbar to ensure the media modal visual order matches the source order.
5b149ca8f4f4e8528b29edbcbb18d2f1.gif (1.0 MB) - added by audrasjb 3 years ago.
48403.1.diff
48403.2.diff (1.5 KB) - added by afercia 3 years ago.

Download all attachments as: .zip

Change History (19)

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


4 years ago

#2 @afercia
4 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.4

#3 @afercia
4 years ago

  • Owner set to afercia
  • Status changed from new to assigned

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


4 years ago

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


4 years ago

@syhc
4 years ago

#6 @syhc
4 years ago

  • Keywords has-patch added; needs-patch removed

Here is a patch to solution, my solution is to reorder the two functions calls in browser.js

https://streamable.com/azg1j

Last edited 4 years ago by syhc (previous) (diff)

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


4 years ago

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


3 years ago

@audrasjb
3 years ago

Media: Accessibility: Move the inline uploader right after the toolbar to ensure the media modal visual order matches the source order.

#9 @audrasjb
3 years ago

  • Keywords commit added

In 48403.1.diff:

Media: Accessibility: Move the inline uploader right after the toolbar to ensure the media modal visual order matches the source order.

The patch also updates inline comments and adds a reference to this ticket.

It's good to go on my side (see animated screenshot above).

#10 @afercia
3 years ago

Reviewing 48403.1.diff.

While it fixes the issue in the media modal, it would revert back the change from #37188 thus re-introducing the original issue in the media library. That is, on the admin page /wp-admin/upload.php?mode=grid the "Add New" button should be immediately followed by the uploader.

A more proper fix should differentiate the two cases and place the uploader before in the media modal, and keep it after in the media grid.

#11 @afercia
3 years ago

  • Keywords needs-patch added; has-patch commit removed

@afercia
3 years ago

#12 @afercia
3 years ago

  • Keywords has-patch commit added; needs-patch removed

48403.2.diff checks for the grid mode (the Media Library) and swaps the Toolbar / Uploader order conditionally.

#13 @afercia
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 47217:

Accessibility: Media: Make the toolbar and inline uploader visual order always match the DOM order.

Depending on the specific media view, the media UI elements are placed in a
different visual order. This change makes sure their visual order always
matches the DOM order.

Propos syhc, audrasjb, afercia.
See #37188.
Fixes #48403.

Note: See TracTickets for help on using tickets.