Accessibility: Media: Add a "Copy URL" button to the attachment File URL fields.

For a number of years, various screens in the WordPress admin provided users with a readonly input field to copy the attachment file URL. Manually copying from a readonly field is an annoying task at best even for mouser users. It's a usability and accessibility issue at the same time. 
These fields now have a new "Copy URL" button that is easy to use and accessible to everyone.

Props theolg, markdubois, vabrashev, sajjad67, xkon, nrqsnchz, melchoyce, audrasjb, afercia.
See #41612, #50322, #50335.
Fixes #48463.


git-svn-id: https://develop.svn.wordpress.org/trunk@48232 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/css/buttons.css

@@ -354,6 +354,11 @@ TABLE OF CONTENTS:
 		margin-bottom: 4px;
 	}
 
+	/* Copy attachment URL button in the legacy edit media page. */
+	.wp-core-ui .copy-to-clipboard-container .copy-attachment-url {
+		margin-bottom: 0;
+	}
+
 	#media-upload.wp-core-ui .button {
 		padding: 0 10px 1px;
 		min-height: 24px;

src/wp-includes/css/media-views.css

@@ -457,6 +457,26 @@
 	font-size: 12px;
 }
 
+.media-sidebar .copy-to-clipboard-container,
+.attachment-details .copy-to-clipboard-container {
+	flex-wrap: wrap;
+	margin-top: 10px;
+	margin-left: calc( 35% - 1px );
+	padding-top: 10px;
+}
+
+/* Needs high specificity. */
+.attachment-details .attachment-info .copy-to-clipboard-container {
+	float: none;
+}
+
+.media-sidebar .copy-to-clipboard-container .success,
+.attachment-details .copy-to-clipboard-container .success {
+	padding: 0;
+	min-height: 0;
+	text-align: left;
+}
+
 .compat-item label span {
 	text-align: right;
 }
@@ -2539,6 +2559,18 @@
 		padding: 8px 2px 2px;
 	}
 
+	/* Needs high specificity. */
+	.media-sidebar .setting .copy-to-clipboard-container,
+	.attachment-details .attachment-info .copy-to-clipboard-container {
+		margin-left: 0;
+		padding-top: 0;
+	}
+
+	.media-sidebar .setting .copy-attachment-url,
+	.attachment-details .attachment-info .copy-attachment-url {
+		margin: 0 1px;
+	}
+
 	.media-sidebar .setting .value,
 	.attachment-details .setting .value {
 		float: none;
@@ -2712,12 +2744,16 @@
 	.media-frame-toolbar .media-toolbar {
 		bottom: -54px;
 	}
-}
 
-@media screen and (max-width: 782px) {
 	.mode-grid .attachments-browser .media-toolbar-primary {
 		display: block;
 	}
+
+	.media-sidebar .copy-to-clipboard-container .success,
+	.attachment-details .copy-to-clipboard-container .success {
+		font-size: 14px;
+		line-height: 2.71428571;
+	}
 }
 
 /* Responsive on portrait and landscape */

src/wp-includes/media-template.php

@@ -500,8 +500,12 @@ function wp_print_media_templates() {
 					</span>
 				<# } #>
 				<span class="setting" data-setting="url">
-					<label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
-					<input type="text" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
+					<label for="attachment-details-two-column-copy-link" class="name"><?php _e( 'File URL:' ); ?></label>
+					<input type="text" class="attachment-details-copy-link" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
+					<span class="copy-to-clipboard-container">
+						<button type="button" class="button button-small copy-attachment-url" data-clipboard-target="#attachment-details-two-column-copy-link"><?php _e( 'Copy URL' ); ?></button>
+						<span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
+					</span>
 				</span>
 				<div class="attachment-compat"></div>
 			</div>
@@ -687,8 +691,12 @@ function wp_print_media_templates() {
 			<textarea id="attachment-details-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
 		</span>
 		<span class="setting" data-setting="url">
-			<label for="attachment-details-copy-link" class="name"><?php _e( 'Copy Link' ); ?></label>
-			<input type="text" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
+			<label for="attachment-details-copy-link" class="name"><?php _e( 'File URL:' ); ?></label>
+			<input type="text" class="attachment-details-copy-link" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
+			<div class="copy-to-clipboard-container">
+				<button type="button" class="button button-small copy-attachment-url" data-clipboard-target="#attachment-details-copy-link"><?php _e( 'Copy URL' ); ?></button>
+				<span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
+			</div>
 		</span>
 	</script>
 

src/wp-includes/script-loader.php

@@ -1232,7 +1232,7 @@ function wp_default_scripts( $scripts ) {
 
 	// To enqueue media-views or media-editor, call wp_enqueue_media().
 	// Both rely on numerous settings, styles, and templates to operate correctly.
-	$scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request', 'wp-a11y', 'wp-i18n' ), false, 1 );
+	$scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request', 'wp-a11y', 'wp-i18n', 'clipboard' ), false, 1 );
 	$scripts->set_translations( 'media-views' );
 	$scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
 	$scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor' ), false, 1 );
@@ -1294,7 +1294,7 @@ function wp_default_scripts( $scripts ) {
 			)
 		);
 
-		$scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'underscore', 'word-count', 'wp-a11y', 'wp-sanitize' ), false, 1 );
+		$scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'underscore', 'word-count', 'wp-a11y', 'wp-sanitize', 'clipboard', 'wp-i18n' ), false, 1 );
 		did_action( 'init' ) && $scripts->localize(
 			'post',
 			'postL10n',