Proximity of controls: Upload New Media multi-file uploader

[afercia]

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.

[afercia]

Unnecessary spacing between details and tools

[afercia]

Unnecessary spacing between details and uploading progress indicator

[afercia]

The copy button shifts to the left when copying

[afercia]

All other Copy buttons are aligned to the left

[joedolson]

This makes sense. Milestoning.

[rcreators]

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

[afercia]

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

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

[afercia]

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

[rcreators]

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

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

[afercia]

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

[audrasjb]

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

[audrasjb]

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.

committed in https://core.trac.wordpress.org/changeset/58279

[audrasjb]

In 59550:

Media: Fix margin issues on the Media file upload screen.

This changeset fixes an issue in the Media Library where icons or thumbnails of uploaded files were stuck to the border of their container after file upload.

Follow-up to [58279].

Props sukhendu2002, im3dabasia1, sainathpoojary, joedolson.
Fixes #62573.
See #60141.