Make WordPress Core

Changeset 31993


Ignore:
Timestamp:
04/03/2015 01:54:47 AM (10 years ago)
Author:
azaozz
Message:

Accessibility improvements for Options general screen: add missing labels and aria attributes.
Props DrewAPicture, afercia. Fixes #31144.

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

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/forms.css

    r31949 r31993  
    812812}
    813813
     814.options-general-php input.small-text {
     815    width: 56px;
     816}
     817
    814818.options-general-php .spinner {
    815819    float: none;
    816     margin: -3px 3px;
     820    margin: 0 3px;
     821    vertical-align: text-bottom;
    817822}
    818823
  • trunk/src/wp-admin/options-general.php

    r31862 r31993  
    4646        $("input[name='date_format']").click(function(){
    4747            if ( "date_format_custom_radio" != $(this).attr("id") )
    48                 $("input[name='date_format_custom']").val( $(this).val() ).siblings('.example').text( $(this).siblings('span').text() );
     48                $( "input[name='date_format_custom']" ).val( $( this ).val() ).siblings( '.example' ).text( $( this ).parent( 'label' ).text() );
    4949        });
    5050        $("input[name='date_format_custom']").focus(function(){
     
    5454        $("input[name='time_format']").click(function(){
    5555            if ( "time_format_custom_radio" != $(this).attr("id") )
    56                 $("input[name='time_format_custom']").val( $(this).val() ).siblings('.example').text( $(this).siblings('span').text() );
     56                $( "input[name='time_format_custom']" ).val( $( this ).val() ).siblings( '.example' ).text( $( this ).parent( 'label' ).text() );
    5757        });
    5858        $("input[name='time_format_custom']").focus(function(){
     
    122122<tr>
    123123<th scope="row"><label for="blogdescription"><?php _e('Tagline') ?></label></th>
    124 <td><input name="blogdescription" type="text" id="blogdescription" value="<?php form_option('blogdescription'); ?>" class="regular-text" />
    125 <p class="description"><?php _e('In a few words, explain what this site is about.') ?></p></td>
     124<td><input name="blogdescription" type="text" id="blogdescription" aria-describedby="tagline-description" value="<?php form_option('blogdescription'); ?>" class="regular-text" />
     125<p class="description" id="tagline-description"><?php _e( 'In a few words, explain what this site is about.' ) ?></p></td>
    126126</tr>
    127127<?php if ( !is_multisite() ) { ?>
     
    132132<tr>
    133133<th scope="row"><label for="home"><?php _e('Site Address (URL)') ?></label></th>
    134 <td><input name="home" type="url" id="home" value="<?php form_option( 'home' ); ?>"<?php disabled( defined( 'WP_HOME' ) ); ?> class="regular-text code<?php if ( defined( 'WP_HOME' ) ) echo ' disabled' ?>" />
    135 <p class="description"><?php _e('Enter the address here if you want your site homepage <a href="http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory">to be different from the directory</a> you installed WordPress.'); ?></p></td>
     134<td><input name="home" type="url" id="home" aria-describedby="home-description" value="<?php form_option( 'home' ); ?>"<?php disabled( defined( 'WP_HOME' ) ); ?> class="regular-text code<?php if ( defined( 'WP_HOME' ) ) echo ' disabled' ?>" />
     135<p class="description" id="home-description"><?php _e( 'Enter the address here if you <a href="http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory">want your site home page to be different from your WordPress installation directory.</a>' ); ?></p></td>
    136136</tr>
    137137<tr>
    138138<th scope="row"><label for="admin_email"><?php _e('E-mail Address') ?> </label></th>
    139 <td><input name="admin_email" type="email" id="admin_email" value="<?php form_option( 'admin_email' ); ?>" class="regular-text ltr" />
    140 <p class="description"><?php _e('This address is used for admin purposes, like new user notification.') ?></p></td>
     139<td><input name="admin_email" type="email" id="admin_email" aria-describedby="admin-email-description" value="<?php form_option( 'admin_email' ); ?>" class="regular-text ltr" />
     140<p class="description" id="admin-email-description"><?php _e( 'This address is used for admin purposes, like new user notification.' ) ?></p></td>
    141141</tr>
    142142<tr>
     
    156156<tr>
    157157<th scope="row"><label for="new_admin_email"><?php _e('E-mail Address') ?> </label></th>
    158 <td><input name="new_admin_email" type="email" id="new_admin_email" value="<?php form_option( 'admin_email' ); ?>" class="regular-text ltr" />
    159 <p class="description"><?php _e('This address is used for admin purposes. If you change this we will send you an e-mail at your new address to confirm it. <strong>The new address will not become active until confirmed.</strong>') ?></p>
     158<td><input name="new_admin_email" type="email" id="new_admin_email" aria-describedby="new-admin-email-description" value="<?php form_option( 'admin_email' ); ?>" class="regular-text ltr" />
     159<p class="description" id="new-admin-email-description"><?php _e( 'This address is used for admin purposes. If you change this we will send you an e-mail at your new address to confirm it. <strong>The new address will not become active until confirmed.</strong>' ) ?></p>
    160160<?php
    161161$new_admin_email = get_option( 'new_admin_email' );
     
    193193<td>
    194194
    195 <select id="timezone_string" name="timezone_string">
     195<select id="timezone_string" name="timezone_string" aria-describedby="timezone-description">
    196196<?php echo wp_timezone_choice($tzstring); ?>
    197197</select>
     
    201201    <span id="local-time"><?php printf(__('Local time is <code>%1$s</code>'), date_i18n($timezone_format)); ?></span>
    202202<?php endif; ?>
    203 <p class="description"><?php _e('Choose a city in the same timezone as you.'); ?></p>
     203<p class="description" id="timezone-description"><?php _e( 'Choose a city in the same timezone as you.' ); ?></p>
    204204<?php if ($check_zone_info && $tzstring) : ?>
    205205<br />
     
    272272            $custom = false;
    273273        }
    274         echo ' /> <span>' . date_i18n( $format ) . "</span></label><br />\n";
     274        echo ' /> ' . date_i18n( $format ) . "</label><br />\n";
    275275    }
    276276
    277277    echo '  <label><input type="radio" name="date_format" id="date_format_custom_radio" value="\c\u\s\t\o\m"';
    278278    checked( $custom );
    279     echo '/> ' . __('Custom:') . ' </label><input type="text" name="date_format_custom" value="' . esc_attr( get_option('date_format') ) . '" class="small-text" /> <span class="example"> ' . date_i18n( get_option('date_format') ) . "</span> <span class='spinner'></span>\n";
     279    echo '/> ' . __( 'Custom:' ) . '<span class="screen-reader-text"> ' . __( 'enter a custom date format in the following field' ) . "</span></label>\n";
     280    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";
    280281?>
    281282    </fieldset>
     
    304305            $custom = false;
    305306        }
    306         echo ' /> <span>' . date_i18n( $format ) . "</span></label><br />\n";
     307        echo ' /> ' . date_i18n( $format ) . "</label><br />\n";
    307308    }
    308309
    309310    echo '  <label><input type="radio" name="time_format" id="time_format_custom_radio" value="\c\u\s\t\o\m"';
    310311    checked( $custom );
    311     echo '/> ' . __('Custom:') . ' </label><input type="text" name="time_format_custom" value="' . esc_attr( get_option('time_format') ) . '" class="small-text" /> <span class="example"> ' . date_i18n( get_option('time_format') ) . "</span> <span class='spinner'></span>\n";
     312    echo '/> ' . __( 'Custom:' ) . '<span class="screen-reader-text"> ' . __( 'enter a custom time format in the following field' ) . "</span></label>\n";
     313    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";
    312314
    313315    echo "\t<p>" . __('<a href="http://codex.wordpress.org/Formatting_Date_and_Time">Documentation on date and time formatting</a>.') . "</p>\n";
Note: See TracChangeset for help on using the changeset viewer.