From 2ab769b1b9eb9bac40617fce5efcd140465dd927 Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@git.wordpress.org>
Date: Wed, 22 Jul 2015 00:14:37 +0000
Subject: [PATCH] Passwords: Add password strength meter feedback for screen
 readers.

Also gives context to the show/hide button.

Props rianrietveld, afercia.
Fixes #33032.



git-svn-id: https://develop.svn.wordpress.org/trunk@33353 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/install.php          |  6 +++---
 src/wp-admin/js/user-profile.js   | 10 ++++------
 src/wp-admin/user-edit.php        |  6 +++---
 src/wp-admin/user-new.php         |  6 +++---
 src/wp-includes/script-loader.php |  2 ++
 src/wp-login.php                  |  4 ++--
 6 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/wp-admin/install.php b/src/wp-admin/install.php
index 006b55a183..aef4c269e3 100644
--- a/src/wp-admin/install.php
+++ b/src/wp-admin/install.php
@@ -140,12 +140,12 @@ function display_setup_form( $error = null ) {
 				<button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
 				<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>
 			</td>
diff --git a/src/wp-admin/js/user-profile.js b/src/wp-admin/js/user-profile.js
index d689d9a026..71ac46df4c 100644
--- a/src/wp-admin/js/user-profile.js
+++ b/src/wp-admin/js/user-profile.js
@@ -94,15 +94,13 @@
 			var show = pw_togglebtn.attr( 'data-toggle' );
 			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 )
 				;
 			}
 			pw_field.focus();
diff --git a/src/wp-admin/user-edit.php b/src/wp-admin/user-edit.php
index 9eec86cb87..16ed1aab0c 100644
--- a/src/wp-admin/user-edit.php
+++ b/src/wp-admin/user-edit.php
@@ -464,12 +464,12 @@ if ( $show_password_fields ) :
 		<input class="hidden" value=" " /><!-- #24364 workaround -->
 		<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>
 </tr>
diff --git a/src/wp-admin/user-new.php b/src/wp-admin/user-new.php
index da97a25184..55911ca252 100644
--- a/src/wp-admin/user-new.php
+++ b/src/wp-admin/user-new.php
@@ -402,12 +402,12 @@ if ( apply_filters( 'show_password_fields', true ) ) : ?>
 			<button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
 			<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>
 		</td>
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
index 1fdb8993b3..370a4b8d2a 100644
--- a/src/wp-includes/script-loader.php
+++ b/src/wp-includes/script-loader.php
@@ -376,6 +376,8 @@ function wp_default_scripts( &$scripts ) {
 	did_action( 'init' ) && $scripts->localize( 'user-profile', 'userProfileL10n', array(
 		'show' => __( 'Show' ),
 		'hide' => __( 'Hide' ),
+		'ariaShow' => esc_attr__( 'Show password' ),
+		'ariaHide' => esc_attr__( 'Hide password' ),
 	) );
 
 	$scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 );
diff --git a/src/wp-login.php b/src/wp-login.php
index bbd787462d..8354e96928 100644
--- a/src/wp-login.php
+++ b/src/wp-login.php
@@ -655,8 +655,8 @@ case 'rp' :
 	<p class="user-pass1-wrap">
 		<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>
 	<p class="user-pass2-wrap">