WordPress.org
Get WordPress

Make WordPress Core

Changeset 36263


Ignore:
Timestamp:
01/11/2016 10:53:10 PM (9 years ago)
Author:
afercia
Message:

Accessibility: Remove title attributes from the General Settings screen.

Date and time formats are now displayed in plain text and available for all
users. Also, lines up them with the "custom" date and time format fields to
help reinforce what these fields do.

Props afercia, perezlabs.
Fixes #35064.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/forms.css

    r35831 r36263  
    656656}
    657657
     658.form-table .date-time-doc {
     659    margin-top: 1em;
     660}
     661
     662.form-table p.timezone-info {
     663    margin: 1em 0;
     664}
     665
    658666.form-table td fieldset label {
    659667    margin: 0.25em 0 0.5em !important;
    … …  
    894902------------------------------------------------------------------------------*/
    895903
    896 #utc-time, #local-time {
    897     padding-left: 25px;
    898     font-style: italic;
     904.timezone-info code {
     905    white-space: nowrap;
    899906}
    900907
    … …  
    902909    margin: 2px 0;
    903910    vertical-align: middle;
     911}
     912
     913.options-general-php .date-time-text {
     914    display: inline-block;
     915    min-width: 10em;
    904916}
    905917
    … …  
    12691281    }
    12701282
    1271     #utc-time {
    1272         margin-top: 10px;
    1273     }
    1274 
    12751283    #utc-time,
    12761284    #local-time {
    12771285        display: block;
    12781286        float: none;
    1279         padding: 0;
    1280         line-height: 2;
     1287        margin-top: 0.5em;
    12811288    }
    12821289
    … …  
    13171324        display: none;
    13181325    }
     1326
     1327    .options-general-php input[type="text"].small-text {
     1328        max-width: 60px;
     1329        margin: 0;
     1330    }
    13191331}
    13201332
    … …  
    13591371    }
    13601372}
     1373
     1374@media only screen and (max-width: 320px) {
     1375    .options-general-php .date-time-text.date-time-custom-text {
     1376        min-width: 0;
     1377        margin-right: 0.5em;
     1378    }
     1379}

  • trunk/src/wp-admin/includes/options.php

    r35685 r36263  
    5252        $("input[name='date_format']").click(function(){
    5353            if ( "date_format_custom_radio" != $(this).attr("id") )
    54                 $( "input[name='date_format_custom']" ).val( $( this ).val() ).siblings( '.example' ).text( $( this ).parent( 'label' ).text() );
     54                $( "input[name='date_format_custom']" ).val( $( this ).val() ).siblings( '.example' ).text( $( this ).parent( 'label' ).children( '.format-i18n' ).text() );
    5555        });
    5656        $("input[name='date_format_custom']").focus(function(){
    … …  
    6060        $("input[name='time_format']").click(function(){
    6161            if ( "time_format_custom_radio" != $(this).attr("id") )
    62                 $( "input[name='time_format_custom']" ).val( $( this ).val() ).siblings( '.example' ).text( $( this ).parent( 'label' ).text() );
     62                $( "input[name='time_format_custom']" ).val( $( this ).val() ).siblings( '.example' ).text( $( this ).parent( 'label' ).children( '.format-i18n' ).text() );
    6363        });
    6464        $("input[name='time_format_custom']").focus(function(){

  • trunk/src/wp-admin/options-general.php

    r35811 r36263  
    146146</select>
    147147
     148<p class="description" id="timezone-description"><?php _e( 'Choose a city in the same timezone as you.' ); ?></p>
     149<?php if ( $check_zone_info && $tzstring ) : ?>
     150
     151<p class="timezone-info">
    148152    <span id="utc-time"><?php
    149         /* translators: %s: UTC time */
    150         printf( __( '<abbr title="Coordinated Universal Time">UTC</abbr> time is %s' ),
     153        /* translators: 1: UTC abbreviation, 2: UTC time */
     154        printf( __( 'Universal time (%1$s) is %2$s.' ),
     155            '<abbr>' . __( 'UTC' ) . '</abbr>',
    151156            '<code>' . date_i18n( $timezone_format, false, 'gmt' ) . '</code>'
    152157        );
    153158    ?></span>
    154 <?php if ( get_option('timezone_string') || !empty($current_offset) ) : ?>
     159<?php if ( get_option( 'timezone_string' ) || ! empty( $current_offset ) ) : ?>
    155160    <span id="local-time"><?php
    156161        /* translators: %s: local time */
    157         printf( __( 'Local time is %s' ),
     162        printf( __( 'Local time is %s.' ),
    158163            '<code>' . date_i18n( $timezone_format ) . '</code>'
    159164        );
    160165    ?></span>
    161166<?php endif; ?>
    162 <p class="description" id="timezone-description"><?php _e( 'Choose a city in the same timezone as you.' ); ?></p>
    163 <?php if ($check_zone_info && $tzstring) : ?>
    164 <br />
     167</p>
     168
     169<p class="timezone-info">
    165170<span>
    166171    <?php
    … …  
    212217    </span>
    213218<?php endif; ?>
     219</p>
    214220</td>
    215221
    … …  
    233239
    234240    foreach ( $date_formats as $format ) {
    235         echo "\t<label title='" . esc_attr($format) . "'><input type='radio' name='date_format' value='" . esc_attr($format) . "'";
     241        echo "\t<label><input type='radio' name='date_format' value='" . esc_attr( $format ) . "'";
    236242        if ( get_option('date_format') === $format ) { // checked() uses "==" rather than "==="
    237243            echo " checked='checked'";
    238244            $custom = false;
    239245        }
    240         echo ' /> ' . date_i18n( $format ) . "</label><br />\n";
     246        echo ' /> <span class="date-time-text format-i18n">' . date_i18n( $format ) . '</span><code>' . $format . "</code></label><br />\n";
    241247    }
    242248
    243     echo '  <label><input type="radio" name="date_format" id="date_format_custom_radio" value="\c\u\s\t\o\m"';
     249    echo '<label><input type="radio" name="date_format" id="date_format_custom_radio" value="\c\u\s\t\o\m"';
    244250    checked( $custom );
    245     echo '/> ' . __( 'Custom:' ) . '<span class="screen-reader-text"> ' . __( 'enter a custom date format in the following field' ) . "</span></label>\n";
    246     echo '<label for="date_format_custom" class="screen-reader-text">' . __( 'Custom date format:' ) . '</label><input type="text" name="date_format_custom" id="date_format_custom" value="' . esc_attr( get_option('date_format') ) . '" class="small-text" /> <span class="screen-reader-text">' . __( 'example:' ) . ' </span><span class="example"> ' . date_i18n( get_option('date_format') ) . "</span> <span class='spinner'></span>\n";
     251    echo '/> <span class="date-time-text date-time-custom-text">' . __( 'Custom:' ) . '<span class="screen-reader-text"> ' . __( 'enter a custom date format in the following field' ) . '</span></label>' .
     252        '<label for="date_format_custom" class="screen-reader-text">' . __( 'Custom date format:' ) . '</label>' .
     253        '<input type="text" name="date_format_custom" id="date_format_custom" value="' . esc_attr( get_option( 'date_format' ) ) . '" class="small-text" /></span>' .
     254        '<span class="screen-reader-text">' . __( 'example:' ) . ' </span> <span class="example">' . date_i18n( get_option( 'date_format' ) ) . '</span>' .
     255        "<span class='spinner'></span>\n";
    247256?>
    248257    </fieldset>
    … …  
    266275
    267276    foreach ( $time_formats as $format ) {
    268         echo "\t<label title='" . esc_attr($format) . "'><input type='radio' name='time_format' value='" . esc_attr($format) . "'";
     277        echo "\t<label><input type='radio' name='time_format' value='" . esc_attr( $format ) . "'";
    269278        if ( get_option('time_format') === $format ) { // checked() uses "==" rather than "==="
    270279            echo " checked='checked'";
    271280            $custom = false;
    272281        }
    273         echo ' /> ' . date_i18n( $format ) . "</label><br />\n";
     282        echo ' /> <span class="date-time-text format-i18n">' . date_i18n( $format ) . '</span><code>' . $format . "</code></label><br />\n";
    274283    }
    275284
    276     echo '  <label><input type="radio" name="time_format" id="time_format_custom_radio" value="\c\u\s\t\o\m"';
     285    echo '<label><input type="radio" name="time_format" id="time_format_custom_radio" value="\c\u\s\t\o\m"';
    277286    checked( $custom );
    278     echo '/> ' . __( 'Custom:' ) . '<span class="screen-reader-text"> ' . __( 'enter a custom time format in the following field' ) . "</span></label>\n";
    279     echo '<label for="time_format_custom" class="screen-reader-text">' . __( 'Custom time format:' ) . '</label><input type="text" name="time_format_custom" id="time_format_custom" value="' . esc_attr( get_option('time_format') ) . '" class="small-text" /> <span class="screen-reader-text">' . __( 'example:' ) . ' </span><span class="example"> ' . date_i18n( get_option('time_format') ) . "</span> <span class='spinner'></span>\n";
    280 
    281     echo "\t<p>" . __('<a href="https://codex.wordpress.org/Formatting_Date_and_Time">Documentation on date and time formatting</a>.') . "</p>\n";
     287    echo '/> <span class="date-time-text date-time-custom-text">' . __( 'Custom:' ) . '<span class="screen-reader-text"> ' . __( 'enter a custom time format in the following field' ) . '</span></label>' .
     288        '<label for="time_format_custom" class="screen-reader-text">' . __( 'Custom time format:' ) . '</label>' .
     289        '<input type="text" name="time_format_custom" id="time_format_custom" value="' . esc_attr( get_option( 'time_format' ) ) . '" class="small-text" /></span>' .
     290        '<span class="screen-reader-text">' . __( 'example:' ) . ' </span> <span class="example">' . date_i18n( get_option( 'time_format' ) ) . '</span>' .
     291        "<span class='spinner'></span>\n";
     292
     293    echo "\t<p class='date-time-doc'>" . __('<a href="https://codex.wordpress.org/Formatting_Date_and_Time">Documentation on date and time formatting</a>.') . "</p>\n";
    282294?>
    283295    </fieldset>
Note: See TracChangeset for help on using the changeset viewer.