WordPress.org

Make WordPress Core

Changeset 33353


Ignore:
Timestamp:
07/22/2015 12:14:37 AM (6 years ago)
Author:
obenland
Message:

Passwords: Add password strength meter feedback for screen readers.

Also gives context to the show/hide button.

Props rianrietveld, afercia.
Fixes #33032.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/install.php

    r33249 r33353  
    141141                <div class="wp-pwd hide-if-js">
    142142                    <?php $initial_password = wp_generate_password( 24 ); ?>
    143                     <input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" />
    144                     <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
     143                    <input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
     144                    <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
    145145                        <span class="dashicons dashicons-visibility"></span>
    146146                        <span class="text"><?php _e( 'Hide' ); ?></span>
    147147                    </button>
    148                     <div id="pass-strength-result"></div>
     148                    <div id="pass-strength-result" aria-live="polite"></div>
    149149                </div>
    150150                <p><span class="description hide-if-no-js"><?php _e( 'A password reset link will be sent to you via email.' ); ?></span></p>
  • trunk/src/wp-admin/js/user-profile.js

    r33249 r33353  
    9595            if ( show == 1 ) {
    9696                pw_field.attr( 'type', 'text' );
    97                 pw_togglebtn.attr( 'data-toggle', 0 )
    98                     .find( '.text' )
    99                         .text( userProfileL10n.hide )
     97                pw_togglebtn.attr({ 'data-toggle': 0, 'aria-label': userProfileL10n.ariaHide })
     98                    .find( '.text' ).text( userProfileL10n.hide )
    10099                ;
    101100            } else {
    102101                pw_field.attr( 'type', 'password' );
    103                 pw_togglebtn.attr( 'data-toggle', 1 )
    104                     .find( '.text' )
    105                         .text( userProfileL10n.show )
     102                pw_togglebtn.attr({ 'data-toggle': 1, 'aria-label': userProfileL10n.ariaShow })
     103                    .find( '.text' ).text( userProfileL10n.show )
    106104                ;
    107105            }
  • trunk/src/wp-admin/user-edit.php

    r33249 r33353  
    465465        <button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Generate new password' ); ?></button>
    466466        <div class="wp-pwd hide-if-js">
    467             <input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="off" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" />
    468             <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
     467            <input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="off" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" aria-describedby="pass-strength-result" />
     468            <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
    469469                <span class="dashicons dashicons-visibility"></span>
    470470                <span class="text"><?php _e( 'Hide' ); ?></span>
    471471            </button>
    472             <div style="display:none" id="pass-strength-result"></div>
     472            <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
    473473        </div>
    474474    </td>
  • trunk/src/wp-admin/user-new.php

    r33249 r33353  
    403403            <div class="wp-pwd hide-if-js">
    404404                <?php $initial_password = wp_generate_password( 24 ); ?>
    405                 <input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" />
    406                 <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
     405                <input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
     406                <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
    407407                    <span class="dashicons dashicons-visibility"></span>
    408408                    <span class="text"><?php _e( 'Hide' ); ?></span>
    409409                </button>
    410                 <div style="display:none" id="pass-strength-result"></div>
     410                <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
    411411            </div>
    412412            <p><span class="description"><?php _e( 'A password reset link will be sent to the user via email.' ); ?></span></p>
  • trunk/src/wp-includes/script-loader.php

    r33348 r33353  
    377377        'show' => __( 'Show' ),
    378378        'hide' => __( 'Hide' ),
     379        'ariaShow' => esc_attr__( 'Show password' ),
     380        'ariaHide' => esc_attr__( 'Hide password' ),
    379381    ) );
    380382
  • trunk/src/wp-login.php

    r33265 r33353  
    656656        <label for="pass1"><?php _e('New password') ?></label><br />
    657657        <div class="wp-pwd">
    658             <input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" />
    659             <div id="pass-strength-result" class="hide-if-no-js"><?php _e( 'Strength indicator' ); ?></div>
     658            <input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" aria-describedby="pass-strength-result" />
     659            <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
    660660        </div>
    661661    </p>
Note: See TracChangeset for help on using the changeset viewer.