Media: Add external icon to alt text links.

joedolson · joedolson · commit 8906a00409d5 · 2026-02-07T23:52:30.000Z
This link opens in a new tab, and needs a visual indicator to provide an affordance to sighted users that this will happen. Props burtrw, sabernhardt, audrasjb, westonruter, joedolson. Fixes #64374. git-svn-id: https://develop.svn.wordpress.org/trunk@61597 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
@@ -139,6 +139,7 @@
 .screen-reader-text + .dashicons-external {
 	margin-top: -1px;
 	margin-left: 2px;
+	text-decoration: none;
 }
 
 .screen-reader-shortcut {
diff --git a/src/wp-admin/includes/media.php b/src/wp-admin/includes/media.php
@@ -3245,7 +3245,7 @@ function edit_form_image_editor( $post ) {
 			esc_url( __( 'https://www.w3.org/WAI/tutorials/images/decision-tree/' ) ),
 			'target="_blank"',
 			sprintf(
-				'<span class="screen-reader-text"> %s</span>',
+				'<span class="screen-reader-text"> %s</span><span aria-hidden="true" class="dashicons dashicons-external"></span>',
 				/* translators: Hidden accessibility text. */
 				__( '(opens in a new tab)' )
 			)
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
@@ -503,6 +503,13 @@
 	float: right;
 }
 
+.attachment-details .setting + .description .dashicons {
+	width: 16px;
+	height: 16px;
+	font-size: 16px;
+	margin-top: 0px;
+}
+
 .media-sidebar .setting .value,
 .attachment-details .setting .value,
 .attachment-details .setting + .description {
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
@@ -163,7 +163,7 @@ function wp_print_media_templates() {
 		esc_url( __( 'https://www.w3.org/WAI/tutorials/images/decision-tree/' ) ),
 		'target="_blank"',
 		sprintf(
-			'<span class="screen-reader-text"> %s</span>',
+			'<span class="screen-reader-text"> %s</span><span aria-hidden="true" class="dashicons dashicons-external"></span>',
 			/* translators: Hidden accessibility text. */
 			__( '(opens in a new tab)' )
 		)

Original file line number	Diff line number	Diff line change
`@@ -139,6 +139,7 @@`
`139`	`139`	`.screen-reader-text + .dashicons-external {`
`140`	`140`	`margin-top: -1px;`
`141`	`141`	`margin-left: 2px;`
	`142`	`+ text-decoration: none;`
`142`	`143`	`}`
`143`	`144`
`144`	`145`	`.screen-reader-shortcut {`
Original file line number	Diff line number	Diff line change
`@@ -3245,7 +3245,7 @@ function edit_form_image_editor( $post ) {`
`3245`	`3245`	`esc_url( __( 'https://www.w3.org/WAI/tutorials/images/decision-tree/' ) ),`
`3246`	`3246`	`'target="_blank"',`
`3247`	`3247`	`sprintf(`
`3248`		`- '<span class="screen-reader-text"> %s</span>',`
	`3248`	`+ '<span class="screen-reader-text"> %s</span><span aria-hidden="true" class="dashicons dashicons-external"></span>',`
`3249`	`3249`	`/* translators: Hidden accessibility text. */`
`3250`	`3250`	`__( '(opens in a new tab)' )`
`3251`	`3251`	`)`
Original file line number	Diff line number	Diff line change
`@@ -163,7 +163,7 @@ function wp_print_media_templates() {`
`163`	`163`	`esc_url( __( 'https://www.w3.org/WAI/tutorials/images/decision-tree/' ) ),`
`164`	`164`	`'target="_blank"',`
`165`	`165`	`sprintf(`
`166`		`- '<span class="screen-reader-text"> %s</span>',`
	`166`	`+ '<span class="screen-reader-text"> %s</span><span aria-hidden="true" class="dashicons dashicons-external"></span>',`
`167`	`167`	`/* translators: Hidden accessibility text. */`
`168`	`168`	`__( '(opens in a new tab)' )`
`169`	`169`	`)`