From bf4b384fd4386a6d0bb7a11452bb3e75881fc5f6 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Thu, 11 May 2017 22:46:59 +0000
Subject: [PATCH] Accessibility: Add "(opens in a new window)" screen reader
 text to the "News-Nearby Events" dashboard widget footer links.

- standardizes similar messages in core to always use `(opens in a new window)`
- adds translators comments
- hides the dashicons with `aria-hidden="true"`, see #40428

Fixes #40733.


git-svn-id: https://develop.svn.wordpress.org/trunk@40643 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/dashboard.css                |  6 +++
 src/wp-admin/includes/dashboard.php           | 38 ++++++++++++++-----
 src/wp-admin/includes/meta-boxes.php          |  2 +-
 .../class-wp-customize-manager.php            |  3 +-
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index 6a35594302..f7e6b0e39b 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -440,6 +440,12 @@
 	color: #ddd;
 }
 
+/* Safari 10 + VoiceOver specific: without this, the hidden text gets read out before the link. */
+.community-events-footer .screen-reader-text {
+	height: inherit;
+	white-space: nowrap;
+}
+
 /* Dashboard WordPress news */
 
 #dashboard_primary .inside {
diff --git a/src/wp-admin/includes/dashboard.php b/src/wp-admin/includes/dashboard.php
index de0eef3447..b25426e753 100644
--- a/src/wp-admin/includes/dashboard.php
+++ b/src/wp-admin/includes/dashboard.php
@@ -1125,22 +1125,40 @@ function wp_dashboard_events_news() {
 	</div>
 
 	<p class="community-events-footer">
-		<a href="https://make.wordpress.org/community/meetups-landing-page" target="_blank">
-			<?php _e( 'Meetups' ); ?> <span class="dashicons dashicons-external"></span>
-		</a>
+		<?php
+			printf(
+				'<a href="%1$s" target="_blank">%2$s <span class="screen-reader-text">%3$s</span><span aria-hidden="true" class="dashicons dashicons-external"></span></a>',
+				'https://make.wordpress.org/community/meetups-landing-page',
+				__( 'Meetups' ),
+				/* translators: accessibility text */
+				__( '(opens in a new window)' )
+			);
+		?>
 
 		|
 
-		<a href="https://central.wordcamp.org/schedule/" target="_blank">
-			<?php _e( 'WordCamps' ); ?> <span class="dashicons dashicons-external"></span>
-		</a>
+		<?php
+			printf(
+				'<a href="%1$s" target="_blank">%2$s <span class="screen-reader-text">%3$s</span><span aria-hidden="true" class="dashicons dashicons-external"></span></a>',
+				'https://central.wordcamp.org/schedule/',
+				__( 'WordCamps' ),
+				/* translators: accessibility text */
+				__( '(opens in a new window)' )
+			);
+		?>
 
 		|
 
-		<?php // translators: If a Rosetta site exists (e.g. https://es.wordpress.org/news/), then use that. Otherwise, leave untranslated. ?>
-		<a href="<?php _e( 'https://wordpress.org/news/' ); ?>" target="_blank">
-			<?php _e( 'News' ); ?> <span class="dashicons dashicons-external"></span>
-		</a>
+		<?php
+			printf(
+				'<a href="%1$s" target="_blank">%2$s <span class="screen-reader-text">%3$s</span><span aria-hidden="true" class="dashicons dashicons-external"></span></a>',
+				/* translators: If a Rosetta site exists (e.g. https://es.wordpress.org/news/), then use that. Otherwise, leave untranslated. */
+				esc_url( __( 'https://wordpress.org/news/' ) ),
+				__( 'News' ),
+				/* translators: accessibility text */
+				__( '(opens in a new window)' )
+			);
+		?>
 	</p>
 
 	<?php
diff --git a/src/wp-admin/includes/meta-boxes.php b/src/wp-admin/includes/meta-boxes.php
index ba43c7dbda..cf7b2d59da 100644
--- a/src/wp-admin/includes/meta-boxes.php
+++ b/src/wp-admin/includes/meta-boxes.php
@@ -58,7 +58,7 @@ if ( 'publish' == $post->post_status ) {
 $preview_button = sprintf( '%1$s<span class="screen-reader-text"> %2$s</span>',
 	$preview_button_text,
 	/* translators: accessibility text */
-	__( '(link opens in a new window)' )
+	__( '(opens in a new window)' )
 );
 ?>
 <a class="preview button" href="<?php echo $preview_link; ?>" target="wp-preview-<?php echo (int) $post->ID; ?>" id="post-preview"><?php echo $preview_button; ?></a>
diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php
index 5fb2d76e52..097be0cf5e 100644
--- a/src/wp-includes/class-wp-customize-manager.php
+++ b/src/wp-includes/class-wp-customize-manager.php
@@ -4144,7 +4144,8 @@ final class WP_Customize_Manager {
 				__( 'CSS allows you to customize the appearance and layout of your site with code. Separate CSS is saved for each of your themes. In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key.' ),
 				esc_url( __( 'https://codex.wordpress.org/CSS' ) ),
 				__( 'Learn more about CSS' ),
-				__( '(link opens in a new window)' )
+				/* translators: accessibility text */
+				__( '(opens in a new window)' )
 			),
 		) );