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.



Built from https://develop.svn.wordpress.org/trunk@58279


git-svn-id: https://core.svn.wordpress.org/trunk@57739 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Author: audrasjb

wp-admin/async-upload.php

@@ -65,21 +65,21 @@
 					<div class="filename new">
 						<span class="media-list-title"><strong><?php echo esc_html( wp_html_excerpt( $title, 60, '&hellip;' ) ); ?></strong></span>
 						<span class="media-list-subtitle"><?php echo esc_html( wp_basename( $file ) ); ?></span>
+						<div class="attachment-tools">
+							<?php
+							if ( current_user_can( 'edit_post', $id ) ) {
+								echo '<a class="edit-attachment" href="' . esc_url( get_edit_post_link( $id ) ) . '">' . _x( 'Edit', 'media item' ) . '</a>';
+							} else {
+								echo '<span class="edit-attachment">' . _x( 'Success', 'media item' ) . '</span>';
+							}
+							?>
+							<span class="media-item-copy-container copy-to-clipboard-container edit-attachment">
+								<button type="button" class="button button-small copy-attachment-url" data-clipboard-text="<?php echo $file_url; ?>"><?php _e( 'Copy URL to clipboard' ); ?></button>
+								<span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
+							</span>
+						</div>
 					</div>
 				</div>
-				<div class="attachment-tools">
-					<span class="media-item-copy-container copy-to-clipboard-container edit-attachment">
-						<button type="button" class="button button-small copy-attachment-url" data-clipboard-text="<?php echo esc_url( $file_url ); ?>"><?php _e( 'Copy URL to clipboard' ); ?></button>
-						<span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
-					</span>
-					<?php
-					if ( current_user_can( 'edit_post', $id ) ) {
-						echo '<a class="edit-attachment" href="' . esc_url( get_edit_post_link( $id ) ) . '">' . _x( 'Edit', 'media item' ) . '</a>';
-					} else {
-						echo '<span class="edit-attachment">' . _x( 'Success', 'media item' ) . '</span>';
-					}
-					?>
-				</div>
 			</div>
 			<?php
 			break;

wp-admin/css/media-rtl.css

@@ -113,14 +113,8 @@
 	margin-left: 10px;
 }
 
-.media-item-wrapper {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-}
-
 .media-item .attachment-tools {
 	display: flex;
-	justify-content: flex-end;
 	align-items: center;
 }
 
@@ -191,15 +185,10 @@
 	display: none;
 }
 
-.media-item .original {
-	position: relative;
-	min-height: 34px;
-}
-
 .media-item .progress {
-	float: left;
+	display: inline-block;
 	height: 22px;
-	margin: 7px 6px;
+	margin: 0 6px 7px;
 	width: 200px;
 	line-height: 2em;
 	padding: 0;
@@ -1437,3 +1426,17 @@ audio, video {
 		max-width: 100%;
 	}
 }
+
+@media only screen and (max-width: 375px) {
+	.media-item .attachment-tools {
+		align-items: baseline;
+	}
+	.media-item .edit-attachment.copy-to-clipboard-container {
+		flex-direction: column;
+	}
+
+	.copy-to-clipboard-container .success {
+		line-height: normal;
+		margin-top: 10px;
+	}
+}

wp-admin/css/media-rtl.min.css

@@ -112,14 +112,8 @@
 	margin-right: 10px;
 }
 
-.media-item-wrapper {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-}
-
 .media-item .attachment-tools {
 	display: flex;
-	justify-content: flex-end;
 	align-items: center;
 }
 
@@ -190,15 +184,10 @@
 	display: none;
 }
 
-.media-item .original {
-	position: relative;
-	min-height: 34px;
-}
-
 .media-item .progress {
-	float: right;
+	display: inline-block;
 	height: 22px;
-	margin: 7px 6px;
+	margin: 0 6px 7px;
 	width: 200px;
 	line-height: 2em;
 	padding: 0;
@@ -1436,3 +1425,17 @@ audio, video {
 		max-width: 100%;
 	}
 }
+
+@media only screen and (max-width: 375px) {
+	.media-item .attachment-tools {
+		align-items: baseline;
+	}
+	.media-item .edit-attachment.copy-to-clipboard-container {
+		flex-direction: column;
+	}
+
+	.copy-to-clipboard-container .success {
+		line-height: normal;
+		margin-top: 10px;
+	}
+}

wp-admin/css/media.css

@@ -16,8 +16,8 @@ function fileQueued( fileObj ) {
 	jQuery( '<div class="media-item">' )
 		.attr( 'id', 'media-item-' + fileObj.id )
 		.addClass( 'child-of-' + postid )
-		.append( '<div class="progress"><div class="percent">0%</div><div class="bar"></div></div>',
-			jQuery( '<div class="filename original">' ).text( ' ' + fileObj.name ) )
+		.append( jQuery( '<div class="filename original">' ).text( ' ' + fileObj.name ),
+			'<div class="progress"><div class="percent">0%</div><div class="bar"></div></div>' )
 		.appendTo( jQuery( '#media-items' ) );
 
 	// Disable submit.

wp-admin/css/media.min.css

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.6-alpha-58278';
+$wp_version = '6.6-alpha-58279';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.