Ticket #48222: 48222.9.diff

src/js/_enqueues/admin/user-profile.js

@@ -67 +67 @@
 
         function resetToggle( show ) {
                 $toggleButton
-                        .attr({
-                                'aria-label': show ? __( 'Show password' ) : __( 'Hide password' )
-                        })
                         .find( '.text' )
-                                .text( show ? __( 'Show' ) : __( 'Hide' ) )
+                                .text( show ? __( 'Show password' ) : __( 'Hide password' ) )
                         .end()
                         .find( '.dashicons' )
                                 .removeClass( show ? 'dashicons-hidden' : 'dashicons-visibility' )

src/wp-admin/css/login.css

@@ -80 +80 @@
 }
 
 .login .button.wp-hide-pw {
+        display: block;
         background: transparent;
         border: 1px solid transparent;
         box-shadow: none;
-        font-size: 14px;
         line-height: 2;
-        width: 2.5rem;
-        height: 2.5rem;
-        min-width: 40px;
-        min-height: 40px;
-        margin: 0;
-        padding: 5px 9px;
-        position: absolute;
-        right: 0;
-        top: 0;
+        font-size: 12px;
+        height: 1.25rem;
+        margin: -12px 0 12px auto;
+        padding: 0 2px;
+        position: relative;
+        z-index: 10;
 }
 
 .login .button.wp-hide-pw:hover {
@@ -115 +112 @@
 }
 
 .login .button.wp-hide-pw .dashicons {
-        width: 1.25rem;
+        width: 1rem;
         height: 1.25rem;
         top: 0.25rem;
+        font-size: 16px;
 }
 
 .login .wp-pwd {
@@ -124 +122 @@
         position: relative;
 }
 
+@media screen and (max-width: 782px) {
+        .login .button.wp-hide-pw {
+                right: auto;
+                width: auto;
+        }
+
+        .login .button.wp-hide-pw .text {
+                display: inline;
+        }
+}
+
 .no-js .hide-if-no-js {
         display: none;
 }
@@ -341 +350 @@
         font-family: Consolas, Monaco, monospace;
 }
 
-.js.login input.password-input,
-.js.login-action-rp form .input,
-.js.login-action-rp input[type="text"] {
-        padding-right: 2.5rem;
-}
-
 .login form .input,
 .login input[type="text"],
 .login form input[type="checkbox"] {

src/wp-login.php

@@ -937 +937 @@
                                 <div class="wp-pwd">
                                         <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" />
 
-                                        <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' ); ?>">
+                                        <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
+                                        <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
                                                 <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
+                                                <span class="text"><?php _e( 'Hide password' ); ?></span>
                                         </button>
-                                        <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
                                 </div>
                                 <div class="pw-weak">
                                         <input type="checkbox" name="pw_weak" id="pw-weak" class="pw-checkbox" />
@@ -1386 +1387 @@
                                 <label for="user_pass"><?php _e( 'Password' ); ?></label>
                                 <div class="wp-pwd">
                                         <input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input password-input" value="" size="20" />
-                                        <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Show password' ); ?>">
+                                        <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
                                                 <span class="dashicons dashicons-visibility" aria-hidden="true"></span>
+                                                <span class="text"><?php _e( 'Show password' ); ?></span>
                                         </button>
                                 </div>
                         </div>