Make WordPress Core

Opened 9 months ago

Closed 4 months ago

Last modified 4 months ago

#60141 closed defect (bug) (fixed)

Proximity of controls: Upload New Media multi-file uploader

Reported by: afercia's profile afercia Owned by: audrasjb's profile audrasjb
Milestone: 6.6 Priority: normal
Severity: normal Version: 5.8
Component: Media Keywords: has-screenshots has-patch commit
Focuses: accessibility Cc:

Description

See #40822
See #51754

When uploading media files in the Upload New Media > multi-file uploader page, newly added files are listed within rows after the uploader.

The rows contain:

  • The attachment details, on the left.
  • Additional tools, on the right.

There's a couple problems with that.

Proximity of controls

The tools are displayed too far to the right, way far from the details. This is a problem, for example, for low vision users and users who use screen magnifiers, as the tools may be out of their vision field.
Controls should be displayed visually grouped so that they can be easily discovered by all users. I'm not sure there's a good reason to have all that spacing between details and tools in the first place.

The Copy button shifts to the left when copying

There's a few Copy buttons in use in the admin pages. Most of them are aligned to the left and there's a good reason for that: The UI must provide space for the 'Copied!' confirmation text.
However, on this page the Copy button is aligned to the right. After a copy operation, the 'Copied!' text appears on the right of the button thus making the button itself shift to the left. I'm not sure having moving interactive controls on the screen is a good user experience. Instead, the Copy button should be placed in a way to reserve some space for the 'Copied!' text to appear without triggering a shift of other content.

See screenshots and animated GIF below.

Attachments (7)

01 Screenshot 2023-12-22 at 14.06.28.png (172.3 KB) - added by afercia 9 months ago.
Unnecessary spacing between details and tools
02 Screenshot 2023-12-22 at 14.01.39.png (118.6 KB) - added by afercia 9 months ago.
Unnecessary spacing between details and uploading progress indicator
03 copy shift.gif (33.1 KB) - added by afercia 9 months ago.
The copy button shifts to the left when copying
04 Screenshot 2023-12-22 at 13.59.48.png (430.9 KB) - added by afercia 9 months ago.
All other Copy buttons are aligned to the left
60141_DesignInput.png (19.3 KB) - added by rcreators 4 months ago.
@afercia can you check this and give a feedback if this works or do you have any other idea.
uploader media-item.png (146.2 KB) - added by afercia 4 months ago.
60141_DesignInput_v2.png (154.5 KB) - added by rcreators 4 months ago.
@afercia check this one. I find this one better in different screen size.

Download all attachments as: .zip

Change History (21)

@afercia
9 months ago

Unnecessary spacing between details and tools

@afercia
9 months ago

Unnecessary spacing between details and uploading progress indicator

@afercia
9 months ago

The copy button shifts to the left when copying

@afercia
9 months ago

All other Copy buttons are aligned to the left

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


6 months ago

#2 @joedolson
6 months ago

  • Milestone changed from Awaiting Review to 6.6
  • Owner set to rcreators
  • Status changed from new to assigned
  • Version set to 5.8

This makes sense. Milestoning.

@rcreators
4 months ago

@afercia can you check this and give a feedback if this works or do you have any other idea.

#3 @rcreators
4 months ago

  • Keywords needs-design-feedback added

#4 @afercia
4 months ago

@rcreators thanks for the ping and the screenshot.

To me, your proposal would work.

An alternative approach could be keeping the horizontal alignment but aligning the 'attachment-tools' to the left. However, the filenames of the attachments may have different length. In this case, the problem would be keeping the 'attachment-tools' with the Edit and Copy aligned. See attached screenshot. Overeall, I'd vote for your proposal because it's simpler.

@rcreators
4 months ago

@afercia check this one. I find this one better in different screen size.

#5 @afercia
4 months ago

@rcreators a grid layout is an interesting exploration. Personally, I'd rather keep it simple and minimize changes by keeping the current layout and just fixing the proximity problem.

This ticket was mentioned in PR #6547 on WordPress/wordpress-develop by @rcreators.


4 months ago
#6

  • Keywords has-patch added

This patch is updating the design of the upload-new.php file. So if the user uploads the files, the progress bar is now stacked below the file name. After the upload completes, Action buttons also stack below the file name.

https://github.com/WordPress/wordpress-develop/assets/8544795/f47a25f2-83ba-45f7-933a-b1ee5a5b15db

https://github.com/WordPress/wordpress-develop/assets/8544795/ce158a5f-6e74-4c39-b281-80c238a1b7dd

https://github.com/WordPress/wordpress-develop/assets/8544795/c473f684-7588-472e-86b8-97c9bce61f7e

Trac ticket: https://core.trac.wordpress.org/ticket/60141

#7 @rcreators
4 months ago

  • Keywords has-testing-info added; needs-design-feedback removed

#8 @rcreators
4 months ago

  • Keywords has-testing-info removed

@afercia Changes amended to PR. Please test it and let me know if needed any changes else we can put it to commit.

@rcreators commented on PR #6547:


4 months ago
#9

@afercia All the changes are amended. Ready to commit. :-)

#10 @afercia
4 months ago

  • Keywords commit added

https://github.com/WordPress/wordpress-develop/pull/6547 looks good to me. Marking for commit.

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


4 months ago

#12 @audrasjb
4 months ago

  • Owner changed from rcreators to audrasjb

Thanks everyone for your work. Self assigning for commit as we're close to 6.6 beta 1.

#13 @audrasjb
4 months ago

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

In 58279:

Media: Follow the "proximity of controls" accessibility guidelines in the multi-file uploader.

This changeset updates the design of the Upload Media screen to stack progress bars below the file name. After the upload completes, Action buttons also stack below the file name.

Props afercia, rcreators.
Fixes #60141.

Note: See TracTickets for help on using tickets.