![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
#60141 closed defect (bug) (fixed)
Proximity of controls: Upload New Media multi-file uploader
| Reported by: | afercia | Owned by: | audrasjb |
|---|---|---|---|
| Priority: | normal | Milestone: | 6.6 |
| Component: | Media | Version: | 5.8 |
| Severity: | normal | Keywords: | has-screenshots has-patch commit |
| Cc: | Focuses: | accessibility |
Description
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)
Change History (22)
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
2 years ago
#2
@
2 years ago
- Milestone Awaiting Review → 6.6
- Owner set to
- Status new → assigned
- Version → 5.8
This makes sense. Milestoning.
@
2 years ago
@afercia can you check this and give a feedback if this works or do you have any other idea.
#4
@
2 years 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.
#5
@
2 years 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.
2 years 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.
Trac ticket: https://core.trac.wordpress.org/ticket/60141
#8
@
2 years 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:
2 years ago
#9
@afercia All the changes are amended. Ready to commit. :-)
#10
@
2 years 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.
2 years ago
#12
@
2 years ago
- Owner changed from to
Thanks everyone for your work. Self assigning for commit as we're close to 6.6 beta 1.
@audrasjb commented on PR #6547:
2 years ago
#14
committed in https://core.trac.wordpress.org/changeset/58279
Unnecessary spacing between details and tools