Changeset 49294 for trunk/src/wp-admin/user-edit.php

Timestamp:

10/24/2020 03:32:46 AM (4 years ago)

Author:

TimothyBlynJacobs

Message:

App Passwords: Improve accessibility.

• Make form inputs stacked instead of inline.
• Provide a visible label for the app name.
• Add screen reader text to dismiss button.
• Make "Revoke" button label more descriptive.
• Use aria-disabled instead of disabled to avoid focus loss.
• Display password in a readonly input to assist copy and paste.
• Remove large sections of italic text.
• Use .form-wrap and .form-field to give consistent form styling.
• Improve labeling and placeholder text.

Props alexstine, georgestephanis, afercia, TimothyBlynJacobs.
Fixes #51580.

File:

• trunk/src/wp-admin/user-edit.php (modified) (5 diffs)

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

@@ -740 +740 @@
             }
             ?>
-        <div class="create-application-password">
-            <label for="new_application_password_name" class="screen-reader-text"><?php _e( 'New Application Password Name' ); ?></label>
-            <input type="text" size="30" id="new_application_password_name" name="new_application_password_name" placeholder="<?php esc_attr_e( 'New Application Password Name' ); ?>" class="input" />
+        <div class="create-application-password form-wrap">
+            <div class="form-field">
+                <label for="new_application_password_name"><?php _e( 'New Application Password Name' ); ?></label>
+                <input type="text" size="30" id="new_application_password_name" name="new_application_password_name" placeholder="<?php esc_attr_e( 'WordPress App on My Phone' ); ?>" class="input" />
+            </div>
 
             <?php
@@ -755 +757 @@
             ?>
 
-            <?php submit_button( __( 'Add New' ), 'secondary', 'do_new_application_password', false ); ?>
+            <?php submit_button( __( 'Add New' ), 'secondary', 'do_new_application_password' ); ?>
         </div>
 
@@ -857 +859 @@
     <script type="text/html" id="tmpl-new-application-password">
         <div class="notice notice-success is-dismissible new-application-password-notice" role="alert" tabindex="0">
-            <p>
+            <p class="application-password-display">
                 <?php
                 printf(
@@ -863 +865 @@
                     esc_html__( 'Your new password for %1$s is: %2$s' ),
                     '<strong>{{ data.name }}</strong>',
-                    '<kbd>{{ data.password }}</kbd>'
+                    '<input type="text" class="code" readonly="readonly" value="{{ data.password }}" />'
                 );
                 ?>
@@ -869 +871 @@
             <p><?php esc_attr_e( 'Be sure to save this in a safe location. You will not be able to retrieve it.' ); ?></p>
             <button type="button" class="notice-dismiss">
-                <span class="screen-reader-text"><?php __( 'Dismiss this notice.' ); ?></span>
+                <span class="screen-reader-text"><?php _e( 'Dismiss this notice.' ); ?></span>
             </button>
         </div>