From e2aa3c5efeebd37511f218c98585c7ea87c594fb Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Wed, 27 Mar 2019 18:46:12 +0000
Subject: [PATCH] Accessibility: Improve the "Alt text" description.

Moves the word "Describe" within the link.

Amends [44900].
See #41612.


git-svn-id: https://develop.svn.wordpress.org/trunk@45038 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/media-template.php | 2 +-
 tests/qunit/index.html             | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 50ae65f744..e083ae8556 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -164,7 +164,7 @@ function wp_print_media_templates() {
 
 	$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.' ),
+		__( '%1$sDescribe the 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>',
diff --git a/tests/qunit/index.html b/tests/qunit/index.html
index a6a1aacb71..f59adb3c3c 100644
--- a/tests/qunit/index.html
+++ b/tests/qunit/index.html
@@ -1153,7 +1153,7 @@
 						<span class="name">Alternative Text</span>
 						<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
 					</label>
-					<p class="description" id="alt-text-description">Describe <a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
+					<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
 				<# } #>
 								<label class="setting" data-setting="title">
 					<span class="name">Title</span>
@@ -1318,7 +1318,7 @@
 				<span class="name">Alt Text</span>
 				<input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
 			</label>
-			<p class="description" id="alt-text-description">Describe <a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
+			<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
 		<# } #>
 				<label class="setting" data-setting="title">
 			<span class="name">Title</span>
@@ -1610,7 +1610,7 @@
 			<span>Alternative Text</span>
 			<input type="text" data-setting="alt" aria-describedby="alt-text-description" />
 		</label>
-		<p class="description" id="alt-text-description">Describe <a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
+		<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
 
 					<label class="setting caption">
 				<span>Caption</span>
@@ -1665,7 +1665,7 @@
 						<span>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">Describe <a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
+					<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">Describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
 
 											<label class="setting caption">
 							<span>Caption</span>