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

@@ -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 {

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
-			<?php _e( 'Meetups' ); ?> <span class="dashicons dashicons-external"></span>
+			printf(
-		</a>
+				'<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
-			<?php _e( 'WordCamps' ); ?> <span class="dashicons dashicons-external"></span>
+			printf(
-		</a>
+				'<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. ?>
+		<?php
-		<a href="<?php _e( 'https://wordpress.org/news/' ); ?>" target="_blank">
+			printf(
-			<?php _e( 'News' ); ?> <span class="dashicons dashicons-external"></span>
+				'<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>',
-		</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

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>

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)' )
 			),
 		) );