Changeset 33353

Timestamp:

07/22/2015 12:14:37 AM (10 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:

• wp-admin/install.php (modified) (1 diff)
• wp-admin/js/user-profile.js (modified) (1 diff)
• wp-admin/user-edit.php (modified) (1 diff)
• wp-admin/user-new.php (modified) (1 diff)
• wp-includes/script-loader.php (modified) (1 diff)
• wp-login.php (modified) (1 diff)

trunk/src/wp-admin/install.php

@@ -141 +141 @@
                 <div class="wp-pwd hide-if-js">
                     <?php $initial_password = wp_generate_password( 24 ); ?>
-                    <input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" />
-                    <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
+                    <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" />
+                    <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' ); ?>">
                         <span class="dashicons dashicons-visibility"></span>
                         <span class="text"><?php _e( 'Hide' ); ?></span>
                     </button>
-                    <div id="pass-strength-result"></div>
+                    <div id="pass-strength-result" aria-live="polite"></div>
                 </div>
                 <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

@@ -95 +95 @@
             if ( show == 1 ) {
                 pw_field.attr( 'type', 'text' );
-                pw_togglebtn.attr( 'data-toggle', 0 )
-                    .find( '.text' )
-                        .text( userProfileL10n.hide )
+                pw_togglebtn.attr({ 'data-toggle': 0, 'aria-label': userProfileL10n.ariaHide })
+                    .find( '.text' ).text( userProfileL10n.hide )
                 ;
             } else {
                 pw_field.attr( 'type', 'password' );
-                pw_togglebtn.attr( 'data-toggle', 1 )
-                    .find( '.text' )
-                        .text( userProfileL10n.show )
+                pw_togglebtn.attr({ 'data-toggle': 1, 'aria-label': userProfileL10n.ariaShow })
+                    .find( '.text' ).text( userProfileL10n.show )
                 ;
             }

trunk/src/wp-admin/user-edit.php

@@ -465 +465 @@
         <button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Generate new password' ); ?></button>
         <div class="wp-pwd hide-if-js">
-            <input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="off" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" />
-            <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
+            <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" />
+            <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' ); ?>">
                 <span class="dashicons dashicons-visibility"></span>
                 <span class="text"><?php _e( 'Hide' ); ?></span>
             </button>
-            <div style="display:none" id="pass-strength-result"></div>
+            <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
         </div>
     </td>

trunk/src/wp-admin/user-new.php

@@ -403 +403 @@
             <div class="wp-pwd hide-if-js">
                 <?php $initial_password = wp_generate_password( 24 ); ?>
-                <input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" />
-                <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
+                <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" />
+                <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' ); ?>">
                     <span class="dashicons dashicons-visibility"></span>
                     <span class="text"><?php _e( 'Hide' ); ?></span>
                 </button>
-                <div style="display:none" id="pass-strength-result"></div>
+                <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
             </div>
             <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

@@ -377 +377 @@
         'show' => __( 'Show' ),
         'hide' => __( 'Hide' ),
+        'ariaShow' => esc_attr__( 'Show password' ),
+        'ariaHide' => esc_attr__( 'Hide password' ),
     ) );
 

trunk/src/wp-login.php

@@ -656 +656 @@
         <label for="pass1"><?php _e('New password') ?></label><br />
         <div class="wp-pwd">
-            <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" />
-            <div id="pass-strength-result" class="hide-if-no-js"><?php _e( 'Strength indicator' ); ?></div>
+            <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" />
+            <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
         </div>
     </p>