Changeset 49549 for trunk/src/wp-admin/authorize-application.php

Timestamp:

11/09/2020 06:03:57 PM (4 years ago)

Author:

TimothyBlynJacobs

Message:

App Passwords: Further accessibility improvements.

• Add a label to the readonly password input.
• Handle focus loss after revoking app passwords.
• Handle focus loss after dismissing notices.
• Mark app name as aria-required.
• Use aria-label for detailed revoke button text instead of title.
• Use -1 for tabindex instead of 0.

Props alexstine, afercia, sabernhardt, audrasjb, joedolson, TimothyBlynJacobs.
Fixes #51580.

File:

• trunk/src/wp-admin/authorize-application.php (modified) (2 diffs)

trunk/src/wp-admin/authorize-application.php

@@ -172 +172 @@
             <div class="notice notice-success notice-alt below-h2">
                 <p class="application-password-display">
-                    <?php
-                    printf(
-                        /* translators: 1: Application name, 2: Generated password. */
-                        __( 'Your new password for %1$s is %2$s.' ),
-                        '<strong>' . esc_html( $app_name ) . '</strong>',
-                        sprintf( '<input type="text" class="code" readonly="readonly" value="%s" />', esc_attr( WP_Application_Passwords::chunk_password( $new_password ) ) )
-                    );
-                    ?>
-                </p>
+                    <label for="new-application-password-value">
+                        <?php
+                        printf(
+                            /* translators: %s: Application name */
+                            esc_html__( 'Your new password for %s is:' ),
+                            '<strong>' . esc_html( $app_name ) . '</strong>'
+                        );
+                        ?>
+                    </label>
+                    <input id="new-application-password-value" type="text" class="code" readonly="readonly" value="<?php esc_attr( WP_Application_Passwords::chunk_password( $new_password ) ); ?>" />
+                </p>
+                <p><?php _e( 'Be sure to save this in a safe location. You will not be able to retrieve it.' ); ?></p>
             </div>
 
@@ -205 +208 @@
                 <div class="form-field">
                     <label for="app_name"><?php _e( 'New Application Password Name' ); ?></label>
-                    <input type="text" id="app_name" name="app_name" value="<?php echo esc_attr( $app_name ); ?>" placeholder="<?php esc_attr_e( 'WordPress App on My Phone' ); ?>" required aria-required="true" />
+                    <input type="text" id="app_name" name="app_name" value="<?php echo esc_attr( $app_name ); ?>" placeholder="<?php esc_attr_e( 'WordPress App on My Phone' ); ?>" required />
                 </div>