Accessibility: Improve the password form buttons accessibility.

- makes the "Cancel" button always visible: this allows to generate a new password also on small screens
- moves focus back to the Generate Password button when closing the form
- changes the password reset show/hide button from a clickable `<span>` element to a real `<button>` element
- improves the CSS

Props janak007, afercia.
Fixes #42853.

Built from https://develop.svn.wordpress.org/trunk@44895


git-svn-id: http://core.svn.wordpress.org/trunk@44726 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/forms-rtl.css

@@ -427,11 +427,16 @@ input[type="number"].tiny-text {
 	margin-right: 1em;
 }
 
-button.wp-hide-pw > .dashicons {
+.wp-hide-pw > .dashicons,
+.wp-cancel-pw > .dashicons {
 	position: relative;
 	top: 3px;
 }
 
+.wp-cancel-pw .dashicons-no {
+	display: none;
+}
+
 label,
 #your-profile label + a {
 	vertical-align: middle;
@@ -459,7 +464,7 @@ fieldset label,
 	background-color: #eee;
 	border: 1px solid #ddd;
 	color: #23282d;
-	margin: -2px 1px 5px 5px;
+	margin: -1px 0 5px;
 	padding: 3px 5px;
 	text-align: center;
 	width: 25em;
@@ -515,13 +520,25 @@ fieldset label,
 	padding-top: 8px;
 }
 
+.wp-pwd [type="text"],
+.wp-pwd [type="password"] {
+	margin: 0;
+	/* Same height as the buttons */
+	line-height: 20px;
+	min-height: 28px;
+	max-height: 40px;
+}
+
 #pass1-text,
 .show-password #pass1 {
 	display: none;
 }
 
-.show-password #pass1-text
+#pass1-text::-ms-clear {
-{
+	display: none;
+}
+
+.show-password #pass1-text {
 	display: inline-block;
 }
 
@@ -1462,31 +1479,44 @@ table.form-table td .updated p {
 
 	.wp-pwd [type="text"],
 	.wp-pwd [type="password"] {
-		padding-left: 40px;
+		padding-left: 88px;
 	}
 
 	.wp-pwd button.button {
 		background: transparent;
-		border: none;
+		border: 1px solid transparent;
 		box-shadow: none;
 		line-height: 2;
 		margin: 0;
-		padding: 5px 10px;
+		padding: 5px 9px;
 		position: absolute;
 		left: 0;
 		top: 0;
 	}
 
+	.wp-pwd button.wp-hide-pw {
+		left: 40px;
+	}
+
 	.wp-pwd button.button:hover,
-	.wp-pwd button.button:focus,
+	.wp-pwd button.button:focus {
+		background: transparent;
+	}
+
 	.wp-pwd button.button:active {
 		background: transparent;
+		box-shadow: none;
+		transform: none;
 	}
 
 	.wp-pwd .button .text {
 		display: none;
 	}
 
+	.wp-cancel-pw .dashicons-no {
+		display: inline-block;
+	}
+
 	.options-general-php input[type="text"].small-text {
 		max-width: 6.25em;
 		margin: 0;
@@ -1533,12 +1563,6 @@ table.form-table td .updated p {
 	.form-wrap .form-field {
 		padding: 0;
 	}
-
-	/* users */
-	#profile-page .form-table textarea {
-		max-width: 400px;
-		width: auto;
-	}
 }
 
 @media only screen and (max-height: 480px), screen and (max-width: 450px) {

wp-admin/css/forms.css

@@ -427,11 +427,16 @@ input[type="number"].tiny-text {
 	margin-left: 1em;
 }
 
-button.wp-hide-pw > .dashicons {
+.wp-hide-pw > .dashicons,
+.wp-cancel-pw > .dashicons {
 	position: relative;
 	top: 3px;
 }
 
+.wp-cancel-pw .dashicons-no {
+	display: none;
+}
+
 label,
 #your-profile label + a {
 	vertical-align: middle;
@@ -459,7 +464,7 @@ fieldset label,
 	background-color: #eee;
 	border: 1px solid #ddd;
 	color: #23282d;
-	margin: -2px 5px 5px 1px;
+	margin: -1px 0 5px;
 	padding: 3px 5px;
 	text-align: center;
 	width: 25em;
@@ -515,13 +520,25 @@ fieldset label,
 	padding-top: 8px;
 }
 
+.wp-pwd [type="text"],
+.wp-pwd [type="password"] {
+	margin: 0;
+	/* Same height as the buttons */
+	line-height: 20px;
+	min-height: 28px;
+	max-height: 40px;
+}
+
 #pass1-text,
 .show-password #pass1 {
 	display: none;
 }
 
-.show-password #pass1-text
+#pass1-text::-ms-clear {
-{
+	display: none;
+}
+
+.show-password #pass1-text {
 	display: inline-block;
 }
 
@@ -1462,31 +1479,44 @@ table.form-table td .updated p {
 
 	.wp-pwd [type="text"],
 	.wp-pwd [type="password"] {
-		padding-right: 40px;
+		padding-right: 88px;
 	}
 
 	.wp-pwd button.button {
 		background: transparent;
-		border: none;
+		border: 1px solid transparent;
 		box-shadow: none;
 		line-height: 2;
 		margin: 0;
-		padding: 5px 10px;
+		padding: 5px 9px;
 		position: absolute;
 		right: 0;
 		top: 0;
 	}
 
+	.wp-pwd button.wp-hide-pw {
+		right: 40px;
+	}
+
 	.wp-pwd button.button:hover,
-	.wp-pwd button.button:focus,
+	.wp-pwd button.button:focus {
+		background: transparent;
+	}
+
 	.wp-pwd button.button:active {
 		background: transparent;
+		box-shadow: none;
+		transform: none;
 	}
 
 	.wp-pwd .button .text {
 		display: none;
 	}
 
+	.wp-cancel-pw .dashicons-no {
+		display: inline-block;
+	}
+
 	.options-general-php input[type="text"].small-text {
 		max-width: 6.25em;
 		margin: 0;
@@ -1533,12 +1563,6 @@ table.form-table td .updated p {
 	.form-wrap .form-field {
 		padding: 0;
 	}
-
-	/* users */
-	#profile-page .form-table textarea {
-		max-width: 400px;
-		width: auto;
-	}
 }
 
 @media only screen and (max-height: 480px), screen and (max-width: 450px) {

wp-admin/css/login-rtl.css

@@ -79,22 +79,49 @@ p {
 }
 
 .login .password-input-wrapper {
-	display: table;
+	position: relative;
 }
 
 .login .input.password-input {
-	display: table-cell;
 	margin: 0;
 }
 
+.login .input::-ms-clear {
+	display: none;
+}
+
 .login .pw-weak {
 	margin-bottom: 15px;
 }
 
 .login .button.button-secondary {
-	display: table-cell;
+	background: transparent;
-	border-radius: 0;
+	border: 1px solid transparent;
-	vertical-align: middle;
+	box-shadow: none;
+	font-size: 14px;
+	line-height: 2;
+	height: auto;
+	margin: 0;
+	padding: 5px 9px;
+	position: absolute;
+	left: 0;
+	top: 0;
+}
+
+.login .button.button-secondary:hover {
+	background: transparent;
+}
+
+.login .button.button-secondary:focus {
+	background: transparent;
+	border-color: #5b9dd9;
+	box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
+}
+
+.login .button.button-secondary:active {
+	background: transparent;
+	box-shadow: none;
+	transform: none;
 }
 
 .login form {
@@ -127,7 +154,6 @@ p {
 }
 
 .login label {
-	color: #72777c;
 	font-size: 14px;
 }
 
@@ -209,7 +235,7 @@ p {
 .login input[type="text"] {
 	font-size: 24px;
 	width: 100%;
-	padding: 3px;
+	padding: 5px 5px 5px 45px;
 	margin: 2px 0 16px 6px;
 }
 

wp-admin/css/login.css

@@ -79,22 +79,49 @@ p {
 }
 
 .login .password-input-wrapper {
-	display: table;
+	position: relative;
 }
 
 .login .input.password-input {
-	display: table-cell;
 	margin: 0;
 }
 
+.login .input::-ms-clear {
+	display: none;
+}
+
 .login .pw-weak {
 	margin-bottom: 15px;
 }
 
 .login .button.button-secondary {
-	display: table-cell;
+	background: transparent;
-	border-radius: 0;
+	border: 1px solid transparent;
-	vertical-align: middle;
+	box-shadow: none;
+	font-size: 14px;
+	line-height: 2;
+	height: auto;
+	margin: 0;
+	padding: 5px 9px;
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+
+.login .button.button-secondary:hover {
+	background: transparent;
+}
+
+.login .button.button-secondary:focus {
+	background: transparent;
+	border-color: #5b9dd9;
+	box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
+}
+
+.login .button.button-secondary:active {
+	background: transparent;
+	box-shadow: none;
+	transform: none;
 }
 
 .login form {
@@ -127,7 +154,6 @@ p {
 }
 
 .login label {
-	color: #72777c;
 	font-size: 14px;
 }
 
@@ -209,7 +235,7 @@ p {
 .login input[type="text"] {
 	font-size: 24px;
 	width: 100%;
-	padding: 3px;
+	padding: 5px 45px 5px 5px;
 	margin: 2px 6px 16px 0;
 }
 

wp-admin/js/user-profile.js

@@ -238,7 +238,7 @@
 					$pass1.data( 'pw', data );
 				} );
 
-			$generateButton.show();
+			$generateButton.show().focus();
 			$passwordWrapper.hide();
 
 			$weakRow.hide( 0, function () {

wp-admin/user-edit.php

@@ -618,10 +618,11 @@ endif; //!IS_PROFILE_PAGE
 				<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" />
 			</span>
 			<button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
-				<span class="dashicons dashicons-hidden"></span>
+				<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
 				<span class="text"><?php _e( 'Hide' ); ?></span>
 			</button>
 			<button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
+				<span class="dashicons dashicons-no" aria-hidden="true"></span>
 				<span class="text"><?php _e( 'Cancel' ); ?></span>
 			</button>
 			<div style="display:none" id="pass-strength-result" aria-live="polite"></div>

wp-admin/user-new.php

@@ -498,10 +498,11 @@ if ( current_user_can( 'create_users' ) ) {
 					<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" />
 				</span>
 				<button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
-					<span class="dashicons dashicons-hidden"></span>
+					<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
 					<span class="text"><?php _e( 'Hide' ); ?></span>
 				</button>
 				<button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
+					<span class="dashicons dashicons-no" aria-hidden="true"></span>
 					<span class="text"><?php _e( 'Cancel' ); ?></span>
 				</button>
 				<div style="display:none" id="pass-strength-result" aria-live="polite"></div>

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.2-alpha-44894';
+$wp_version = '5.2-alpha-44895';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

wp-login.php

@@ -712,9 +712,9 @@ switch ( $action ) {
 		<div class="wp-pwd">
 			<div class="password-input-wrapper">
 				<input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="pass1" id="pass1" class="input password-input" size="24" value="" autocomplete="off" aria-describedby="pass-strength-result" />
-				<span class="button button-secondary wp-hide-pw hide-if-no-js">
+				<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js">
-					<span class="dashicons dashicons-hidden"></span>
+					<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
-				</span>
+				</button>
 			</div>
 			<div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
 		</div>