Changeset 49549

Timestamp:

11/09/2020 06:03:57 PM (5 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.

Location:

trunk/src

Files:

• js/_enqueues/admin/application-passwords.js (modified) (6 diffs)
• js/_enqueues/admin/auth-app.js (modified) (1 diff)
• wp-admin/authorize-application.php (modified) (2 diffs)
• wp-admin/css/forms.css (modified) (2 diffs)
• wp-admin/includes/class-wp-application-passwords-list-table.php (modified) (2 diffs)
• wp-admin/user-edit.php (modified) (3 diffs)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/js/_enqueues/admin/application-passwords.js

@@ -30 +30 @@
         }
 
-        clearErrors();
+        clearNotices();
         $newAppPassButton.prop( 'aria-disabled', true ).addClass( 'disabled' );
 
@@ -91 +91 @@
             uuid = $tr.data( 'uuid' );
 
-        clearErrors();
+        clearNotices();
         $submitButton.prop( 'disabled', true );
 
@@ -106 +106 @@
                 $tr.remove();
 
-                wp.a11y.speak( wp.i18n.__( 'Application password revoked.' ) );
+                addNotice( wp.i18n.__( 'Application password revoked.' ), 'success' ).focus();
             }
         } ).fail( handleErrorResponse );
@@ -120 +120 @@
         var $submitButton = $( this );
 
-        clearErrors();
+        clearNotices();
         $submitButton.prop( 'disabled', true );
 
@@ -134 +134 @@
                 $appPassTwrapper.hide();
 
-                wp.a11y.speak( wp.i18n.__( 'All application passwords revoked.' ) );
+                addNotice( wp.i18n.__( 'All application passwords revoked.' ), 'success' ).focus();
             }
         } ).fail( handleErrorResponse );
     } );
 
-    $( document ).on( 'click', '.new-application-password-notice .notice-dismiss', function( e ) {
+    $appPassSection.on( 'click', '.notice-dismiss', function( e ) {
         e.preventDefault();
         var $el = $( this ).parent();
+        $el.removeAttr( 'role' );
         $el.fadeTo( 100, 0, function () {
             $el.slideUp( 100, function () {
                 $el.remove();
+                $newAppPassField.focus();
             } );
         } );
@@ -170 +172 @@
         }
 
-        addError( errorMessage );
+        addNotice( errorMessage, 'error' );
     }
 
     /**
-     * Displays an error message in the Application Passwords section.
+     * Displays a message in the Application Passwords section.
      *
      * @since 5.6.0
      *
-     * @param {string} message The error message to display.
+     * @param {string} message The message to display.
+     * @param {string} type    The notice type. Either 'success' or 'error'.
+     * @returns {jQuery} The notice element.
      */
-    function addError( message ) {
+    function addNotice( message, type ) {
         var $notice = $( '<div></div>' )
             .attr( 'role', 'alert' )
-            .addClass( 'notice notice-error' )
-            .append( $( '<p></p>' ).text( message ) );
+            .attr( 'tabindex', '-1' )
+            .addClass( 'is-dismissible notice notice-' + type )
+            .append( $( '<p></p>' ).text( message ) )
+            .append(
+                $( '<button></button>' )
+                    .attr( 'type', 'button' )
+                    .addClass( 'notice-dismiss' )
+                    .append( $( '<span></span>' ).addClass( 'screen-reader-text' ).text( wp.i18n.__( 'Dismiss this notice.' ) ) )
+            );
 
         $newAppPassForm.after( $notice );
+
+        return $notice;
     }
 
     /**
-     * Clears error messages from the Application Passwords section.
+     * Clears notice messages from the Application Passwords section.
      *
      * @since 5.6.0
      */
-    function clearErrors() {
+    function clearNotices() {
         $( '.notice', $appPassSection ).remove();
     }

trunk/src/js/_enqueues/admin/auth-app.js

@@ -84 +84 @@
             } else {
                 message = wp.i18n.sprintf(
-                    wp.i18n.__( 'Your new password for %1$s is: %2$s.' ),
-                    '<strong></strong>',
-                    '<input type="text" class="code" readonly="readonly" value="" />'
-                );
+                    /* translators: %s: Application name */
+                    '<label for="new-application-password-value">' + wp.i18n.__( 'Your new password for %s is:' ) + '</label>',
+                    '<strong></strong>'
+                ) + ' <input id="new-application-password-value" type="text" class="code" readonly="readonly" value="" />';
                 $notice = $( '<div></div>' )
                     .attr( 'role', 'alert' )
-                    .attr( 'tabindex', 0 )
+                    .attr( 'tabindex', -1 )
                     .addClass( 'notice notice-success notice-alt' )
-                    .append( $( '<p></p>' ).addClass( 'application-password-display' ).html( message ) );
+                    .append( $( '<p></p>' ).addClass( 'application-password-display' ).html( message ) )
+                    .append( '<p>' + wp.i18n.__( 'Be sure to save this in a safe location. You will not be able to retrieve it.' ) + '</p>' );
 
                 // We're using .text() to write the variables to avoid any chance of XSS.

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>
 

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

@@ -865 +865 @@
 }
 
-.new-application-password-notice.notice {
+#application-passwords-section .notice {
     margin-top: 20px;
     margin-bottom: 0;
@@ -872 +872 @@
 .application-password-display input.code {
     width: 19em;
+}
+
+.auth-app-card.card {
+    max-width: 768px;
 }
 

trunk/src/wp-admin/includes/class-wp-application-passwords-list-table.php

@@ -118 +118 @@
             array(
                 /* translators: %s: the application password's given name. */
-                'title' => sprintf( __( 'Revoke "%s"' ), $item['name'] ),
+                'aria-label' => sprintf( __( 'Revoke "%s"' ), $item['name'] ),
             )
         );
@@ -235 +235 @@
                 case 'revoke':
                     printf(
-                        '<input type="submit" class="button delete" value="%1$s" title="%2$s">',
+                        '<input type="submit" class="button delete" value="%1$s" aria-label="%2$s">',
                         esc_attr( __( 'Revoke' ) ),
                         /* translators: %s: the application password's given name. */

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

@@ -743 +743 @@
             <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" />
+                <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" aria-required="true" aria-describedby="<?php esc_attr_e( 'Required to create an Application Password, but not to update the user.' ); ?>" />
             </div>
 
@@ -757 +757 @@
             ?>
 
-            <?php submit_button( __( 'Add New' ), 'secondary', 'do_new_application_password' ); ?>
+            <?php submit_button( __( 'Add New Application Password' ), 'secondary', 'do_new_application_password' ); ?>
         </div>
 
@@ -858 +858 @@
 <?php if ( isset( $application_passwords_list_table ) ) : ?>
     <script type="text/html" id="tmpl-new-application-password">
-        <div class="notice notice-success is-dismissible new-application-password-notice" role="alert" tabindex="0">
+        <div class="notice notice-success is-dismissible new-application-password-notice" role="alert" tabindex="-1">
             <p class="application-password-display">
-                <?php
-                printf(
-                    /* translators: 1: Application name, 2: Generated password. */
-                    esc_html__( 'Your new password for %1$s is: %2$s' ),
-                    '<strong>{{ data.name }}</strong>',
-                    '<input type="text" class="code" readonly="readonly" value="{{ data.password }}" />'
-                );
-                ?>
+                <label for="new-application-password-value">
+                    <?php
+                    printf(
+                        /* translators: %s: Application name */
+                        __( 'Your new password for %s is:' ),
+                        '<strong>{{ data.name }}</strong>'
+                    );
+                    ?>
+                </label>
+                <input id="new-application-password-value" type="text" class="code" readonly="readonly" value="{{ data.password }}" />
             </p>
-            <p><?php esc_attr_e( 'Be sure to save this in a safe location. You will not be able to retrieve it.' ); ?></p>
+            <p><?php _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 _e( 'Dismiss this notice.' ); ?></span>

trunk/src/wp-includes/script-loader.php

@@ -1068 +1068 @@
     $scripts->set_translations( 'password-strength-meter' );
 
-    $scripts->add( 'application-passwords', "/wp-admin/js/application-passwords$suffix.js", array( 'jquery', 'wp-util', 'wp-api-request', 'wp-date', 'wp-i18n', 'wp-hooks', 'wp-a11y' ), false, 1 );
+    $scripts->add( 'application-passwords', "/wp-admin/js/application-passwords$suffix.js", array( 'jquery', 'wp-util', 'wp-api-request', 'wp-date', 'wp-i18n', 'wp-hooks' ), false, 1 );
     $scripts->set_translations( 'application-passwords' );