Make WordPress Core


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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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>
Note: See TracChangeset for help on using the changeset viewer.