Accessibility: Improve the "Hello Dolly" accessibility.

- adds a visually hidden text to give context to the lyrics
- the text is `Quote from Hello Dolly song, by Jerry Herman:`
- adds a `lang` HTML attribute (when the admin language is not English) to better support assistive technologies 
- adds a `dir` HTML attribute to better support the LTR English lyrics with RTL languages 
- CSS adjustments

Props audrasjb, SergeyBiryukov, danieltj, birgire, karmatosed, desrosj, afercia.
Fixes #43632.


git-svn-id: https://develop.svn.wordpress.org/trunk@44929 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-content/plugins/hello.php

@@ -1,14 +1,14 @@
 <?php
 /**
  * @package Hello_Dolly
- * @version 1.7.1
+ * @version 1.7.2
  */
 /*
 Plugin Name: Hello Dolly
 Plugin URI: http://wordpress.org/plugins/hello-dolly/
 Description: This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of your admin screen on every page.
 Author: Matt Mullenweg
-Version: 1.7.1
+Version: 1.7.2
 Author URI: http://ma.tt/
 */
 
@@ -25,7 +25,7 @@ I feel the room swayin'
 While the band's playin'
 One of our old favorite songs from way back when
 So, take her wrap, fellas
-Dolly, never go away again 
+Dolly, never go away again
 Hello, Dolly
 Well, hello, Dolly
 It's so nice to have you back where you belong
@@ -42,43 +42,59 @@ Dolly, never go away
 Promise, you'll never go away
 Dolly'll never go away again";
 
-	// Here we split it into lines
+	// Here we split it into lines.
 	$lyrics = explode( "\n", $lyrics );
 
-	// And then randomly choose a line
+	// And then randomly choose a line.
 	return wptexturize( $lyrics[ mt_rand( 0, count( $lyrics ) - 1 ) ] );
 }
 
-// This just echoes the chosen line, we'll position it later
+// This just echoes the chosen line, we'll position it later.
 function hello_dolly() {
 	$chosen = hello_dolly_get_lyric();
-	echo "<p id='dolly'>$chosen</p>";
+	$lang   = '';
+	if ( 'en_' !== substr( get_user_locale(), 0, 3 ) ) {
+		$lang = ' lang="en"';
+	}
+
+	printf(
+		'<p id="dolly"><span class="screen-reader-text">%s </span><span dir="ltr"%s>%s</span></p>',
+		__( 'Quote from Hello Dolly song, by Jerry Herman:' ),
+		$lang,
+		$chosen
+	);
 }
 
-// Now we set that function up to execute when the admin_notices action is called
+// Now we set that function up to execute when the admin_notices action is called.
 add_action( 'admin_notices', 'hello_dolly' );
 
-// We need some CSS to position the paragraph
+// We need some CSS to position the paragraph.
 function dolly_css() {
-	// This makes sure that the positioning is also good for right-to-left languages
-	$x = is_rtl() ? 'left' : 'right';
-
 	echo "
 	<style type='text/css'>
 	#dolly {
-		float: $x;
-		padding-$x: 15px;
-		padding-top: 5px;		
+		float: right;
+		padding: 5px 10px;
 		margin: 0;
-		font-size: 11px;
+		font-size: 12px;
+		line-height: 1.6666;
+	}
+	.rtl #dolly {
+		float: left;
 	}
 	.block-editor-page #dolly {
 		display: none;
 	}
+	@media screen and (max-width: 782px) {
+		#dolly,
+		.rtl #dolly {
+			float: none;
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
 	</style>
 	";
 }
 
 add_action( 'admin_head', 'dolly_css' );
-
-

tests/phpunit/tests/ajax/UpdatePlugin.php

@@ -158,7 +158,7 @@ class Tests_Ajax_Update_Plugin extends WP_Ajax_UnitTestCase {
 				'plugin'       => 'hello.php',
 				'pluginName'   => 'Hello Dolly',
 				'errorMessage' => 'Plugin update failed.',
-				'oldVersion'   => 'Version 1.7.1',
+				'oldVersion'   => 'Version 1.7.2',
 				'newVersion'   => '',
 				'debug'        => array( 'The plugin is at the latest version.' ),
 			),