WordPress.org

Make WordPress Core


Ignore:
Timestamp:
03/18/2019 05:18:46 PM (5 months 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/plugins/hello.php

    r44229 r44929  
    22/**
    33 * @package Hello_Dolly
    4  * @version 1.7.1
     4 * @version 1.7.2
    55 */
    66/*
     
    99Description: 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.
    1010Author: Matt Mullenweg
    11 Version: 1.7.1
     11Version: 1.7.2
    1212Author URI: http://ma.tt/
    1313*/
     
    2626One of our old favorite songs from way back when
    2727So, take her wrap, fellas
    28 Dolly, never go away again 
     28Dolly, never go away again
    2929Hello, Dolly
    3030Well, hello, Dolly
     
    4343Dolly'll never go away again";
    4444
    45     // Here we split it into lines
     45    // Here we split it into lines.
    4646    $lyrics = explode( "\n", $lyrics );
    4747
    48     // And then randomly choose a line
     48    // And then randomly choose a line.
    4949    return wptexturize( $lyrics[ mt_rand( 0, count( $lyrics ) - 1 ) ] );
    5050}
    5151
    52 // This just echoes the chosen line, we'll position it later
     52// This just echoes the chosen line, we'll position it later.
    5353function hello_dolly() {
    5454    $chosen = hello_dolly_get_lyric();
    55     echo "<p id='dolly'>$chosen</p>";
     55    $lang   = '';
     56    if ( 'en_' !== substr( get_user_locale(), 0, 3 ) ) {
     57        $lang = ' lang="en"';
     58    }
     59
     60    printf(
     61        '<p id="dolly"><span class="screen-reader-text">%s </span><span dir="ltr"%s>%s</span></p>',
     62        __( 'Quote from Hello Dolly song, by Jerry Herman:' ),
     63        $lang,
     64        $chosen
     65    );
    5666}
    5767
    58 // Now we set that function up to execute when the admin_notices action is called
     68// Now we set that function up to execute when the admin_notices action is called.
    5969add_action( 'admin_notices', 'hello_dolly' );
    6070
    61 // We need some CSS to position the paragraph
     71// We need some CSS to position the paragraph.
    6272function dolly_css() {
    63     // This makes sure that the positioning is also good for right-to-left languages
    64     $x = is_rtl() ? 'left' : 'right';
    65 
    6673    echo "
    6774    <style type='text/css'>
    6875    #dolly {
    69         float: $x;
    70         padding-$x: 15px;
    71         padding-top: 5px;       
     76        float: right;
     77        padding: 5px 10px;
    7278        margin: 0;
    73         font-size: 11px;
     79        font-size: 12px;
     80        line-height: 1.6666;
     81    }
     82    .rtl #dolly {
     83        float: left;
    7484    }
    7585    .block-editor-page #dolly {
    7686        display: none;
     87    }
     88    @media screen and (max-width: 782px) {
     89        #dolly,
     90        .rtl #dolly {
     91            float: none;
     92            padding-left: 0;
     93            padding-right: 0;
     94        }
    7795    }
    7896    </style>
     
    8199
    82100add_action( 'admin_head', 'dolly_css' );
    83 
    84 
Note: See TracChangeset for help on using the changeset viewer.