WordPress.org

Make WordPress Core

Changeset 49549


Ignore:
Timestamp:
11/09/2020 06:03:57 PM (2 months 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:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/admin/application-passwords.js

    r49294 r49549  
    3030        }
    3131
    32         clearErrors();
     32        clearNotices();
    3333        $newAppPassButton.prop( 'aria-disabled', true ).addClass( 'disabled' );
    3434
     
    9191            uuid = $tr.data( 'uuid' );
    9292
    93         clearErrors();
     93        clearNotices();
    9494        $submitButton.prop( 'disabled', true );
    9595
     
    106106                $tr.remove();
    107107
    108                 wp.a11y.speak( wp.i18n.__( 'Application password revoked.' ) );
     108                addNotice( wp.i18n.__( 'Application password revoked.' ), 'success' ).focus();
    109109            }
    110110        } ).fail( handleErrorResponse );
     
    120120        var $submitButton = $( this );
    121121
    122         clearErrors();
     122        clearNotices();
    123123        $submitButton.prop( 'disabled', true );
    124124
     
    134134                $appPassTwrapper.hide();
    135135
    136                 wp.a11y.speak( wp.i18n.__( 'All application passwords revoked.' ) );
     136                addNotice( wp.i18n.__( 'All application passwords revoked.' ), 'success' ).focus();
    137137            }
    138138        } ).fail( handleErrorResponse );
    139139    } );
    140140
    141     $( document ).on( 'click', '.new-application-password-notice .notice-dismiss', function( e ) {
     141    $appPassSection.on( 'click', '.notice-dismiss', function( e ) {
    142142        e.preventDefault();
    143143        var $el = $( this ).parent();
     144        $el.removeAttr( 'role' );
    144145        $el.fadeTo( 100, 0, function () {
    145146            $el.slideUp( 100, function () {
    146147                $el.remove();
     148                $newAppPassField.focus();
    147149            } );
    148150        } );
     
    170172        }
    171173
    172         addError( errorMessage );
     174        addNotice( errorMessage, 'error' );
    173175    }
    174176
    175177    /**
    176      * Displays an error message in the Application Passwords section.
     178     * Displays a message in the Application Passwords section.
    177179     *
    178180     * @since 5.6.0
    179181     *
    180      * @param {string} message The error message to display.
     182     * @param {string} message The message to display.
     183     * @param {string} type    The notice type. Either 'success' or 'error'.
     184     * @returns {jQuery} The notice element.
    181185     */
    182     function addError( message ) {
     186    function addNotice( message, type ) {
    183187        var $notice = $( '<div></div>' )
    184188            .attr( 'role', 'alert' )
    185             .addClass( 'notice notice-error' )
    186             .append( $( '<p></p>' ).text( message ) );
     189            .attr( 'tabindex', '-1' )
     190            .addClass( 'is-dismissible notice notice-' + type )
     191            .append( $( '<p></p>' ).text( message ) )
     192            .append(
     193                $( '<button></button>' )
     194                    .attr( 'type', 'button' )
     195                    .addClass( 'notice-dismiss' )
     196                    .append( $( '<span></span>' ).addClass( 'screen-reader-text' ).text( wp.i18n.__( 'Dismiss this notice.' ) ) )
     197            );
    187198
    188199        $newAppPassForm.after( $notice );
     200
     201        return $notice;
    189202    }
    190203
    191204    /**
    192      * Clears error messages from the Application Passwords section.
     205     * Clears notice messages from the Application Passwords section.
    193206     *
    194207     * @since 5.6.0
    195208     */
    196     function clearErrors() {
     209    function clearNotices() {
    197210        $( '.notice', $appPassSection ).remove();
    198211    }
  • trunk/src/js/_enqueues/admin/auth-app.js

    r49294 r49549  
    8484            } else {
    8585                message = wp.i18n.sprintf(
    86                     wp.i18n.__( 'Your new password for %1$s is: %2$s.' ),
    87                     '<strong></strong>',
    88                     '<input type="text" class="code" readonly="readonly" value="" />'
    89                 );
     86                    /* translators: %s: Application name */
     87                    '<label for="new-application-password-value">' + wp.i18n.__( 'Your new password for %s is:' ) + '</label>',
     88                    '<strong></strong>'
     89                ) + ' <input id="new-application-password-value" type="text" class="code" readonly="readonly" value="" />';
    9090                $notice = $( '<div></div>' )
    9191                    .attr( 'role', 'alert' )
    92                     .attr( 'tabindex', 0 )
     92                    .attr( 'tabindex', -1 )
    9393                    .addClass( 'notice notice-success notice-alt' )
    94                     .append( $( '<p></p>' ).addClass( 'application-password-display' ).html( message ) );
     94                    .append( $( '<p></p>' ).addClass( 'application-password-display' ).html( message ) )
     95                    .append( '<p>' + wp.i18n.__( 'Be sure to save this in a safe location. You will not be able to retrieve it.' ) + '</p>' );
    9596
    9697                // We're using .text() to write the variables to avoid any chance of XSS.
  • trunk/src/wp-admin/authorize-application.php

    r49294 r49549  
    172172            <div class="notice notice-success notice-alt below-h2">
    173173                <p class="application-password-display">
    174                     <?php
    175                     printf(
    176                         /* translators: 1: Application name, 2: Generated password. */
    177                         __( 'Your new password for %1$s is %2$s.' ),
    178                         '<strong>' . esc_html( $app_name ) . '</strong>',
    179                         sprintf( '<input type="text" class="code" readonly="readonly" value="%s" />', esc_attr( WP_Application_Passwords::chunk_password( $new_password ) ) )
    180                     );
    181                     ?>
    182                 </p>
     174                    <label for="new-application-password-value">
     175                        <?php
     176                        printf(
     177                            /* translators: %s: Application name */
     178                            esc_html__( 'Your new password for %s is:' ),
     179                            '<strong>' . esc_html( $app_name ) . '</strong>'
     180                        );
     181                        ?>
     182                    </label>
     183                    <input id="new-application-password-value" type="text" class="code" readonly="readonly" value="<?php esc_attr( WP_Application_Passwords::chunk_password( $new_password ) ); ?>" />
     184                </p>
     185                <p><?php _e( 'Be sure to save this in a safe location. You will not be able to retrieve it.' ); ?></p>
    183186            </div>
    184187
     
    205208                <div class="form-field">
    206209                    <label for="app_name"><?php _e( 'New Application Password Name' ); ?></label>
    207                     <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" />
     210                    <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 />
    208211                </div>
    209212
  • trunk/src/wp-admin/css/forms.css

    r49309 r49549  
    865865}
    866866
    867 .new-application-password-notice.notice {
     867#application-passwords-section .notice {
    868868    margin-top: 20px;
    869869    margin-bottom: 0;
     
    872872.application-password-display input.code {
    873873    width: 19em;
     874}
     875
     876.auth-app-card.card {
     877    max-width: 768px;
    874878}
    875879
  • trunk/src/wp-admin/includes/class-wp-application-passwords-list-table.php

    r49321 r49549  
    118118            array(
    119119                /* translators: %s: the application password's given name. */
    120                 'title' => sprintf( __( 'Revoke "%s"' ), $item['name'] ),
     120                'aria-label' => sprintf( __( 'Revoke "%s"' ), $item['name'] ),
    121121            )
    122122        );
     
    235235                case 'revoke':
    236236                    printf(
    237                         '<input type="submit" class="button delete" value="%1$s" title="%2$s">',
     237                        '<input type="submit" class="button delete" value="%1$s" aria-label="%2$s">',
    238238                        esc_attr( __( 'Revoke' ) ),
    239239                        /* translators: %s: the application password's given name. */
  • trunk/src/wp-admin/user-edit.php

    r49539 r49549  
    743743            <div class="form-field">
    744744                <label for="new_application_password_name"><?php _e( 'New Application Password Name' ); ?></label>
    745                 <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" />
     745                <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.' ); ?>" />
    746746            </div>
    747747
     
    757757            ?>
    758758
    759             <?php submit_button( __( 'Add New' ), 'secondary', 'do_new_application_password' ); ?>
     759            <?php submit_button( __( 'Add New Application Password' ), 'secondary', 'do_new_application_password' ); ?>
    760760        </div>
    761761
     
    858858<?php if ( isset( $application_passwords_list_table ) ) : ?>
    859859    <script type="text/html" id="tmpl-new-application-password">
    860         <div class="notice notice-success is-dismissible new-application-password-notice" role="alert" tabindex="0">
     860        <div class="notice notice-success is-dismissible new-application-password-notice" role="alert" tabindex="-1">
    861861            <p class="application-password-display">
    862                 <?php
    863                 printf(
    864                     /* translators: 1: Application name, 2: Generated password. */
    865                     esc_html__( 'Your new password for %1$s is: %2$s' ),
    866                     '<strong>{{ data.name }}</strong>',
    867                     '<input type="text" class="code" readonly="readonly" value="{{ data.password }}" />'
    868                 );
    869                 ?>
     862                <label for="new-application-password-value">
     863                    <?php
     864                    printf(
     865                        /* translators: %s: Application name */
     866                        __( 'Your new password for %s is:' ),
     867                        '<strong>{{ data.name }}</strong>'
     868                    );
     869                    ?>
     870                </label>
     871                <input id="new-application-password-value" type="text" class="code" readonly="readonly" value="{{ data.password }}" />
    870872            </p>
    871             <p><?php esc_attr_e( 'Be sure to save this in a safe location. You will not be able to retrieve it.' ); ?></p>
     873            <p><?php _e( 'Be sure to save this in a safe location. You will not be able to retrieve it.' ); ?></p>
    872874            <button type="button" class="notice-dismiss">
    873875                <span class="screen-reader-text"><?php _e( 'Dismiss this notice.' ); ?></span>
  • trunk/src/wp-includes/script-loader.php

    r49165 r49549  
    10681068    $scripts->set_translations( 'password-strength-meter' );
    10691069
    1070     $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 );
     1070    $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 );
    10711071    $scripts->set_translations( 'application-passwords' );
    10721072
Note: See TracChangeset for help on using the changeset viewer.