Changeset 44895

Timestamp:

03/13/2019 11:36:45 PM (6 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src

Files:

• js/_enqueues/admin/user-profile.js (modified) (1 diff)
• wp-admin/css/forms.css (modified) (7 diffs)
• wp-admin/css/login.css (modified) (4 diffs)
• wp-admin/user-edit.php (modified) (1 diff)
• wp-admin/user-new.php (modified) (1 diff)
• wp-login.php (modified) (1 diff)

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

@@ -239 +239 @@
                 } );
 
-            $generateButton.show();
+            $generateButton.show().focus();
             $passwordWrapper.hide();
 

trunk/src/wp-admin/css/forms.css

@@ -428 +428 @@
 }
 
-button.wp-hide-pw > .dashicons {
+.wp-hide-pw > .dashicons,
+.wp-cancel-pw > .dashicons {
     position: relative;
     top: 3px;
+}
+
+.wp-cancel-pw .dashicons-no {
+    display: none;
 }
 
@@ -460 +465 @@
     border: 1px solid #ddd;
     color: #23282d;
-    margin: -2px 5px 5px 1px;
+    margin: -1px 0 5px;
     padding: 3px 5px;
     text-align: center;
@@ -516 +521 @@
 }
 
+.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 {
@@ -521 +535 @@
 }
 
-.show-password #pass1-text
-{
+#pass1-text::-ms-clear {
+    display: none;
+}
+
+.show-password #pass1-text {
     display: inline-block;
 }
@@ -1463 +1480 @@
     .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;
@@ -1478 +1495 @@
     }
 
+    .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;
     }
 
@@ -1533 +1563 @@
     .form-wrap .form-field {
         padding: 0;
-    }
-
-    /* users */
-    #profile-page .form-table textarea {
-        max-width: 400px;
-        width: auto;
     }
 }

trunk/src/wp-admin/css/login.css

@@ -80 +80 @@
 
 .login .password-input-wrapper {
-    display: table;
+    position: relative;
 }
 
 .login .input.password-input {
-    display: table-cell;
-    margin: 0;
+    margin: 0;
+}
+
+.login .input::-ms-clear {
+    display: none;
 }
 
@@ -93 +96 @@
 
 .login .button.button-secondary {
-    display: table-cell;
-    border-radius: 0;
-    vertical-align: middle;
+    background: transparent;
+    border: 1px solid transparent;
+    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;
 }
 
@@ -128 +155 @@
 
 .login label {
-    color: #72777c;
     font-size: 14px;
 }
@@ -210 +236 @@
     font-size: 24px;
     width: 100%;
-    padding: 3px;
+    padding: 5px 45px 5px 5px;
     margin: 2px 6px 16px 0;
 }

trunk/src/wp-admin/user-edit.php

@@ -619 +619 @@
             </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>

trunk/src/wp-admin/user-new.php

@@ -499 +499 @@
                 </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>

trunk/src/wp-login.php

@@ -713 +713 @@
             <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">
-                    <span class="dashicons dashicons-hidden"></span>
-                </span>
+                <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js">
+                    <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
+                </button>
             </div>
             <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>