Changeset 44929 for trunk/src/wp-content/plugins/hello.php

Timestamp:

03/18/2019 05:18:46 PM (6 years ago)

Author:

afercia

Message:

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.

File:

• trunk/src/wp-content/plugins/hello.php (modified) (5 diffs)

trunk/src/wp-content/plugins/hello.php

@@ -2 +2 @@
 /**
  * @package Hello_Dolly
- * @version 1.7.1
+ * @version 1.7.2
  */
 /*
@@ -9 +9 @@
 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/
 */
@@ -26 +26 @@
 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
@@ -43 +43 @@
 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>
@@ -81 +99 @@
 
 add_action( 'admin_head', 'dolly_css' );
-
-