Accessibility: improve the "URL" and "Alt text" fields in the media modals.

Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into.
Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized.

- changes the URL field label to "Copy link"
- moves the alt text field to the top as first field 
- avoids to set initial focus on the alt text field 
- adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial 
- adds `aria-describedby` to target the explanatory text
- adjusts the CSS accordingly
- updates the QUnit index.html file

Props melchoyce, audrasjb, afercia.
Fixes #41612.

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


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

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

@@ -431,7 +431,8 @@
 .attachment-details .setting input[type="tel"],
 .attachment-details .setting input[type="url"],
 .attachment-details .setting textarea,
-.attachment-details .setting .value {
+.attachment-details .setting .value,
+.attachment-details .setting + .description {
 	box-sizing: border-box;
 	margin: 1px;
 	width: 65%;
@@ -439,11 +440,18 @@
 }
 
 .media-sidebar .setting .value,
-.attachment-details .setting .value {
+.attachment-details .setting .value,
+.attachment-details .setting + .description {
 	margin: 0 1px;
 	text-align: right;
 }
 
+.attachment-details .setting + .description {
+	font-size: 12px;
+	font-style: normal;
+	margin-bottom: 0.5em;
+}
+
 .media-sidebar .setting textarea,
 .attachment-details .setting textarea,
 .compat-item .field textarea {
@@ -2040,6 +2048,15 @@
 	clear: both;
 }
 
+.media-embed .setting.has-description {
+	margin-bottom: 5px;
+}
+
+.media-embed .description {
+	clear: both;
+	font-style: normal;
+}
+
 .image-details .embed-media-settings .setting {
 	float: none;
 	width: auto;
@@ -2069,11 +2086,17 @@
 
 .image-details .embed-media-settings .setting input.link-to-custom,
 .image-details .embed-media-settings .link-target,
-.image-details .embed-media-settings .custom-size {
+.image-details .embed-media-settings .custom-size,
+.image-details .description {
 	margin-right: 27%;
 	width: 70%;
 }
 
+.image-details .description {
+	font-style: normal;
+	margin-top: 0;
+}
+
 .image-details .embed-media-settings .link-target {
 	margin-top: 24px;
 }

wp-includes/css/media-views.css

@@ -431,7 +431,8 @@
 .attachment-details .setting input[type="tel"],
 .attachment-details .setting input[type="url"],
 .attachment-details .setting textarea,
-.attachment-details .setting .value {
+.attachment-details .setting .value,
+.attachment-details .setting + .description {
 	box-sizing: border-box;
 	margin: 1px;
 	width: 65%;
@@ -439,11 +440,18 @@
 }
 
 .media-sidebar .setting .value,
-.attachment-details .setting .value {
+.attachment-details .setting .value,
+.attachment-details .setting + .description {
 	margin: 0 1px;
 	text-align: left;
 }
 
+.attachment-details .setting + .description {
+	font-size: 12px;
+	font-style: normal;
+	margin-bottom: 0.5em;
+}
+
 .media-sidebar .setting textarea,
 .attachment-details .setting textarea,
 .compat-item .field textarea {
@@ -2040,6 +2048,15 @@
 	clear: both;
 }
 
+.media-embed .setting.has-description {
+	margin-bottom: 5px;
+}
+
+.media-embed .description {
+	clear: both;
+	font-style: normal;
+}
+
 .image-details .embed-media-settings .setting {
 	float: none;
 	width: auto;
@@ -2069,11 +2086,17 @@
 
 .image-details .embed-media-settings .setting input.link-to-custom,
 .image-details .embed-media-settings .link-target,
-.image-details .embed-media-settings .custom-size {
+.image-details .embed-media-settings .custom-size,
+.image-details .description {
 	margin-left: 27%;
 	width: 70%;
 }
 
+.image-details .description {
+	font-style: normal;
+	margin-top: 0;
+}
+
 .image-details .embed-media-settings .link-target {
 	margin-top: 24px;
 }

wp-includes/js/media-views.js

@@ -8470,23 +8470,10 @@ Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp
 			rerenderOnModelChange: false
 		});
 
-		this.on( 'ready', this.initialFocus );
 		// Call 'initialize' directly on the parent class.
 		Attachment.prototype.initialize.apply( this, arguments );
 	},
 
-	initialFocus: function() {
-		if ( ! wp.media.isTouchDevice ) {
-			/*
-			Previously focused the first ':input' (the readonly URL text field).
-			Since the first ':input' is now a button (delete/trash): when pressing
-			spacebar on an attachment, Firefox fires deleteAttachment/trashAttachment
-			as soon as focus is moved. Explicitly target the first text field for now.
-			@todo change initial focus logic, also for accessibility.
-			*/
-			this.$( 'input[type="text"]' ).eq( 0 ).focus();
-		}
-	},
 	/**
 	 * @param {Object} event
 	 */

wp-includes/media-template.php

@@ -161,6 +161,18 @@ function wp_print_media_templates() {
 	if ( $is_IE && strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE 7' ) !== false ) {
 		$class .= ' ie7';
 	}
+
+	$alt_text_description = sprintf(
+		/* translators: 1: link start tag, 2: accessibility text, 3: link end tag */
+		__( 'Describe %1$sthe purpose of the image%2$s%3$s. Leave empty if the image is purely decorative.' ),
+		'<a href="' . esc_url( 'https://www.w3.org/WAI/tutorials/images/decision-tree' ) . '" target="_blank" rel="noopener noreferrer">',
+		sprintf(
+			'<span class="screen-reader-text"> %s</span>',
+			/* translators: accessibility text */
+			__( '(opens in a new tab)' )
+		),
+		'</a>'
+	);
 	?>
 	<!--[if lte IE 8]>
 	<style>
@@ -404,11 +416,14 @@ function wp_print_media_templates() {
 			</div>
 
 			<div class="settings">
-				<label class="setting" data-setting="url">
-					<span class="name"><?php _e( 'URL' ); ?></span>
-					<input type="text" value="{{ data.url }}" readonly />
-				</label>
 				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
+				<# if ( 'image' === data.type ) { #>
+					<label class="setting" data-setting="alt">
+						<span class="name"><?php _e( 'Alternative Text' ); ?></span>
+						<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
+					</label>
+					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
+				<# } #>
 				<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
 				<label class="setting" data-setting="title">
 					<span class="name"><?php _e( 'Title' ); ?></span>
@@ -432,12 +447,6 @@ function wp_print_media_templates() {
 					<span class="name"><?php _e( 'Caption' ); ?></span>
 					<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
 				</label>
-				<# if ( 'image' === data.type ) { #>
-					<label class="setting" data-setting="alt">
-						<span class="name"><?php _e( 'Alt Text' ); ?></span>
-						<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
-					</label>
-				<# } #>
 				<label class="setting" data-setting="description">
 					<span class="name"><?php _e( 'Description' ); ?></span>
 					<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
@@ -456,6 +465,10 @@ function wp_print_media_templates() {
 						<# } #>
 					</div>
 				<# } #>
+				<label class="setting" data-setting="url">
+					<span class="name"><?php _e( 'Copy Link' ); ?></span>
+					<input type="text" value="{{ data.url }}" readonly />
+				</label>
 				<div class="attachment-compat"></div>
 			</div>
 
@@ -595,11 +608,14 @@ function wp_print_media_templates() {
 			</div>
 		</div>
 
-		<label class="setting" data-setting="url">
-			<span class="name"><?php _e( 'URL' ); ?></span>
-			<input type="text" value="{{ data.url }}" readonly />
-		</label>
 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
+		<# if ( 'image' === data.type ) { #>
+			<label class="setting" data-setting="alt">
+				<span class="name"><?php _e( 'Alt Text' ); ?></span>
+				<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
+			</label>
+			<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
+		<# } #>
 		<?php if ( post_type_supports( 'attachment', 'title' ) ) : ?>
 		<label class="setting" data-setting="title">
 			<span class="name"><?php _e( 'Title' ); ?></span>
@@ -623,16 +639,14 @@ function wp_print_media_templates() {
 			<span class="name"><?php _e( 'Caption' ); ?></span>
 			<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
 		</label>
-		<# if ( 'image' === data.type ) { #>
-			<label class="setting" data-setting="alt">
-				<span class="name"><?php _e( 'Alt Text' ); ?></span>
-				<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
-			</label>
-		<# } #>
 		<label class="setting" data-setting="description">
 			<span class="name"><?php _e( 'Description' ); ?></span>
 			<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
 		</label>
+		<label class="setting" data-setting="url">
+			<span class="name"><?php _e( 'Copy Link' ); ?></span>
+			<input type="text" value="{{ data.url }}" readonly />
+		</label>
 	</script>
 
 	<script type="text/html" id="tmpl-media-selection">
@@ -882,6 +896,12 @@ function wp_print_media_templates() {
 			<img src="{{ data.model.url }}" draggable="false" alt="" />
 		</div>
 
+		<label class="setting alt-text has-description">
+			<span><?php _e( 'Alternative Text' ); ?></span>
+			<input type="text" data-setting="alt" aria-describedby="alt-text-description" />
+		</label>
+		<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
+
 		<?php
 		/** This filter is documented in wp-admin/includes/media.php */
 		if ( ! apply_filters( 'disable_captions', '' ) ) :
@@ -892,11 +912,6 @@ function wp_print_media_templates() {
 			</label>
 		<?php endif; ?>
 
-		<label class="setting alt-text">
-			<span><?php _e( 'Alt Text' ); ?></span>
-			<input type="text" data-setting="alt" />
-		</label>
-
 		<div class="setting align">
 			<span><?php _e( 'Align' ); ?></span>
 			<div class="button-group button-large" data-setting="align">
@@ -948,6 +963,12 @@ function wp_print_media_templates() {
 					</div>
 				</div>
 				<div class="column-settings">
+					<label class="setting alt-text has-description">
+						<span><?php _e( 'Alternative Text' ); ?></span>
+						<input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
+					</label>
+					<p class="description" id="alt-text-description"><?php echo $alt_text_description; ?></p>
+
 					<?php
 					/** This filter is documented in wp-admin/includes/media.php */
 					if ( ! apply_filters( 'disable_captions', '' ) ) :
@@ -958,11 +979,6 @@ function wp_print_media_templates() {
 						</label>
 					<?php endif; ?>
 
-					<label class="setting alt-text">
-						<span><?php _e( 'Alternative Text' ); ?></span>
-						<input type="text" data-setting="alt" value="{{ data.model.alt }}" />
-					</label>
-
 					<h2><?php _e( 'Display Settings' ); ?></h2>
 					<div class="setting align">
 						<span><?php _e( 'Align' ); ?></span>

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.2-alpha-44899';
+$wp_version = '5.2-alpha-44900';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.