Ticket #48222: 48222.6.diff

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

@@ -63 +63 @@
 
         function resetToggle( show ) {
                 $toggleButton
-                        .attr({
-                                'aria-label': show ? userProfileL10n.ariaShow : userProfileL10n.ariaHide
-                        })
                         .find( '.text' )
-                                .text( show ? userProfileL10n.show : userProfileL10n.hide )
+                                .text( show ? userProfileL10n.showPass : userProfileL10n.hidePass )
                         .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;
+        font-size: 12px;
         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;
+        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: #007cba;
-        box-shadow: 0 0 0 1px #007cba;
-        /* 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-includes/script-loader.php

@@ -1156 +1156 @@
                         'show'     => __( 'Show' ),
                         'hide'     => __( 'Hide' ),
                         'cancel'   => __( 'Cancel' ),
-                        'ariaShow' => esc_attr__( 'Show password' ),
-                        'ariaHide' => esc_attr__( 'Hide password' ),
+                        'showPass' => esc_attr__( 'Show password' ),
+                        'hidePass' => esc_attr__( 'Hide password' ),
                 )
         );
 

src/wp-login.php

@@ -969 +969 @@
                                 <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" />
@@ -1371 +1373 @@
                                 <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' ); ?>">
-                                                <span class="dashicons dashicons-visibility" aria-hidden="true"></span>
-                                        </button>
                                 </div>
+                                <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>
                         <?php