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;
 }