WordPress.org
Get WordPress

Make WordPress Core

Changeset 49294


Ignore:
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.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r49109 r49294  
    1818    $newAppPassButton.click( function( e ) {
    1919        e.preventDefault();
     20
     21        if ( $newAppPassButton.prop( 'aria-disabled' ) ) {
     22            return;
     23        }
     24
    2025        var name = $newAppPassField.val();
    2126
    … …  
    2631
    2732        clearErrors();
    28         $newAppPassField.prop( 'disabled', true );
    29         $newAppPassButton.prop( 'disabled', true );
     33        $newAppPassButton.prop( 'aria-disabled', true ).addClass( 'disabled' );
    3034
    3135        var request = {
    … …  
    4852            data: request
    4953        } ).always( function() {
    50             $newAppPassField.prop( 'disabled', false );
    51             $newAppPassButton.prop( 'disabled', false );
     54            $newAppPassButton.removeProp( 'aria-disabled' ).removeClass( 'disabled' );
    5255        } ).done( function( response ) {
    5356            $newAppPassField.val( '' );

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

    r49291 r49294  
    2222        e.preventDefault();
    2323
     24        if ( $approveBtn.prop( 'aria-disabled' ) ) {
     25            return;
     26        }
     27
    2428        if ( 0 === name.length ) {
    2529            $appNameField.focus();
    … …  
    2731        }
    2832
    29         $appNameField.prop( 'disabled', true );
    30         $approveBtn.prop( 'disabled', true );
     33        $approveBtn.prop( 'aria-disabled', true ).addClass( 'disabled' );
    3134
    3235        var request = {
    … …  
    8386                    wp.i18n.__( 'Your new password for %1$s is: %2$s.' ),
    8487                    '<strong></strong>',
    85                     '<kbd></kbd>'
     88                    '<input type="text" class="code" readonly="readonly" value="" />'
    8689                );
    8790                $notice = $( '<div></div>' )
    … …  
    8992                    .attr( 'tabindex', 0 )
    9093                    .addClass( 'notice notice-success notice-alt' )
    91                     .append( $( '<p></p>' ).html( message ) );
     94                    .append( $( '<p></p>' ).addClass( 'application-password-display' ).html( message ) );
    9295
    9396                // We're using .text() to write the variables to avoid any chance of XSS.
    9497                $( 'strong', $notice ).text( name );
    95                 $( 'kbd', $notice ).text( response.password );
     98                $( 'input', $notice ).val( response.password );
    9699
    97100                $form.replaceWith( $notice );
    … …  
    117120            $( 'h1' ).after( $notice );
    118121
    119             $appNameField.prop( 'disabled', false );
    120             $approveBtn.prop( 'disabled', false );
     122            $approveBtn.removeProp( 'aria-disabled', false ).removeClass( 'disabled' );
    121123
    122124            /**

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

    r49291 r49294  
    128128    <?php endif; ?>
    129129
    130     <div class="card js-auth-app-card">
     130    <div class="card auth-app-card">
    131131        <h2 class="title"><?php __( 'An application would like to connect to your account.' ); ?></h2>
    132132        <?php if ( $app_name ) : ?>
    … …  
    171171        <?php if ( $new_password ) : ?>
    172172            <div class="notice notice-success notice-alt below-h2">
    173                 <p class="password-display">
     173                <p class="application-password-display">
    174174                    <?php
    175175                    printf(
    … …  
    177177                        __( 'Your new password for %1$s is %2$s.' ),
    178178                        '<strong>' . esc_html( $app_name ) . '</strong>',
    179                         '<kbd>' . esc_html( WP_Application_Passwords::chunk_password( $new_password ) ) . '</kbd>'
     179                        sprintf( '<input type="text" class="code" readonly="readonly" value="%s" />', esc_attr( WP_Application_Passwords::chunk_password( $new_password ) ) )
    180180                    );
    181181                    ?>
    … …  
    196196            ?>
    197197        <?php else : ?>
    198             <form action="<?php echo esc_url( admin_url( 'authorize-application.php' ) ); ?>" method="post">
     198            <form action="<?php echo esc_url( admin_url( 'authorize-application.php' ) ); ?>" method="post" class="form-wrap">
    199199                <?php wp_nonce_field( 'authorize_application_password' ); ?>
    200200                <input type="hidden" name="action" value="authorize_application_password" />
    … …  
    203203                <input type="hidden" name="reject_url" value="<?php echo esc_url( $reject_url ); ?>" />
    204204
    205                 <label for="app_name"><?php esc_html_e( 'Application Title:' ); ?></label>
    206                 <input type="text" id="app_name" name="app_name" value="<?php echo esc_attr( $app_name ); ?>" placeholder="<?php esc_attr_e( 'Name this connection&hellip;' ); ?>" required />
     205                <div class="form-field">
     206                    <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" />
     208                </div>
    207209
    208210                <?php
    … …  
    224226                ?>
    225227
    226                 <p><?php submit_button( __( 'Yes, I approve of this connection.' ), 'primary', 'approve', false ); ?>
    227                     <br /><em>
     228                <?php
     229                submit_button(
     230                    __( 'Yes, I approve of this connection.' ),
     231                    'primary',
     232                    'approve',
     233                    false,
     234                    array(
     235                        'aria-describedby' => 'description-approve',
     236                    )
     237                );
     238                ?>
     239                <p class="description" id="description-approve">
    228240                    <?php
    229241                    if ( $success_url ) {
    … …  
    246258                    }
    247259                    ?>
    248                     </em>
    249                 </p>
    250 
    251                 <p><?php submit_button( __( 'No, I do not approve of this connection.' ), 'secondary', 'reject', false ); ?>
    252                     <br /><em>
     260                </p>
     261
     262                <?php
     263                submit_button(
     264                    __( 'No, I do not approve of this connection.' ),
     265                    'secondary',
     266                    'reject',
     267                    false,
     268                    array(
     269                        'aria-describedby' => 'description-reject',
     270                    )
     271                );
     272                ?>
     273                <p class="description" id="description-reject">
    253274                    <?php
    254275                    if ( $reject_url ) {
    … …  
    262283                    }
    263284                    ?>
    264                     </em>
    265285                </p>
    266286            </form>

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

    r49283 r49294  
    852852}
    853853
     854.create-application-password .form-field {
     855    max-width: 25em;
     856}
     857
     858.create-application-password label {
     859    font-weight: 600;
     860}
     861
     862.create-application-password p.submit {
     863    margin-bottom: 0;
     864    padding-bottom: 0;
     865}
     866
    854867.new-application-password-notice.notice {
    855868    margin-top: 20px;
    856869    margin-bottom: 0;
     870}
     871
     872.application-password-display input.code {
     873    width: 19em;
    857874}
    858875

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

    r49197 r49294  
    105105     *
    106106     * @since 5.6.0
    107      */
    108     public function column_revoke() {
    109         submit_button( __( 'Revoke' ), 'delete', 'revoke-application-password', false );
     107     *
     108     * @param array $item The current application password item.
     109     */
     110    public function column_revoke( $item ) {
     111        submit_button(
     112            __( 'Revoke' ),
     113            'delete',
     114            'revoke-application-password-' . $item['uuid'],
     115            false,
     116            array(
     117                /* translators: %s: the application password's given name. */
     118                'title' => sprintf( __( 'Revoke "%s"' ), $item['name'] ),
     119            )
     120        );
    110121    }
    111122
    … …  
    221232                    break;
    222233                case 'revoke':
    223                     echo $this->column_revoke();
     234                    printf(
     235                        '<input type="submit" class="button delete" value="%1$s" title="%2$s">',
     236                        esc_attr( __( 'Revoke' ) ),
     237                        /* translators: %s: the application password's given name. */
     238                        esc_attr( sprintf( __( 'Revoke "%s"' ), '{{ data.name }}' ) )
     239                    );
    224240                    break;
    225241                default:

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

    r49282 r49294  
    740740            }
    741741            ?>
    742         <div class="create-application-password">
    743             <label for="new_application_password_name" class="screen-reader-text"><?php _e( 'New Application Password Name' ); ?></label>
    744             <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" />
     742        <div class="create-application-password form-wrap">
     743            <div class="form-field">
     744                <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" />
     746            </div>
    745747
    746748            <?php
    … …  
    755757            ?>
    756758
    757             <?php submit_button( __( 'Add New' ), 'secondary', 'do_new_application_password', false ); ?>
     759            <?php submit_button( __( 'Add New' ), 'secondary', 'do_new_application_password' ); ?>
    758760        </div>
    759761
    … …  
    857859    <script type="text/html" id="tmpl-new-application-password">
    858860        <div class="notice notice-success is-dismissible new-application-password-notice" role="alert" tabindex="0">
    859             <p>
     861            <p class="application-password-display">
    860862                <?php
    861863                printf(
    … …  
    863865                    esc_html__( 'Your new password for %1$s is: %2$s' ),
    864866                    '<strong>{{ data.name }}</strong>',
    865                     '<kbd>{{ data.password }}</kbd>'
     867                    '<input type="text" class="code" readonly="readonly" value="{{ data.password }}" />'
    866868                );
    867869                ?>
    … …  
    869871            <p><?php esc_attr_e( 'Be sure to save this in a safe location. You will not be able to retrieve it.' ); ?></p>
    870872            <button type="button" class="notice-dismiss">
    871                 <span class="screen-reader-text"><?php __( 'Dismiss this notice.' ); ?></span>
     873                <span class="screen-reader-text"><?php _e( 'Dismiss this notice.' ); ?></span>
    872874            </button>
    873875        </div>
Note: See TracChangeset for help on using the changeset viewer.