Ticket #48222: 48222.7.diff

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

@@ -71 +71 @@
                                 '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: -15px 0 0 auto;
+        padding: 0;
+        position: relative;
+        z-index: 10;
 }
 
 .login .button.wp-hide-pw:hover {
         background: transparent;
 }
 
-.login .button.wp-hide-pw:focus {
-        background: transparent;
-        border-color: #3582c4;
-        box-shadow: 0 0 0 1px #3582c4;
-        /* Only visible in Windows High Contrast mode */
-        outline: 2px solid transparent;
-}
-
 .login .button.wp-hide-pw:active {
         background: transparent;
         box-shadow: none;
@@ -115 +104 @@
 }
 
 .login .button.wp-hide-pw .dashicons {
-        width: 1.25rem;
+        width: 1rem;
         height: 1.25rem;
         top: 0.25rem;
+        font-size: 16px;
 }
 
 .login .wp-pwd {
         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;
 }

src/wp-login.php

@@ -882 +882 @@
 
                                         <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-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>
@@ -1325 +1326 @@
                                         <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' ); ?>">
                                                 <span class="dashicons dashicons-visibility" aria-hidden="true"></span>
+                                                <span class="text"><?php _e( 'Show password' ); ?></span>
                                         </button>
                                 </div>
                         </div>