vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 14:20:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

App Passwords: Improve accessibility.

Browse Source 
- 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@49294 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Timothy Jacobs
2020-10-24 03:32:46 +00:00
parent 99b40eed6a
commit 5e31ccfee2
6 changed files with 93 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/wp-admin/authorize-application.php
View File

@@ -127,7 +127,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<div class="notice notice-error"><p><?php echo $error->get_error_message(); ?></p></div>
<?php endif; ?>
<div class="card js-auth-app-card">
<div class="card auth-app-card">
<h2 class="title"><?php __( 'An application would like to connect to your account.' ); ?></h2>
<?php if ( $app_name ) : ?>
<p>
@@ -170,13 +170,13 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
<?php if ( $new_password ) : ?>
<div class="notice notice-success notice-alt below-h2">
<p class="password-display">
<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>',
'<kbd>' . esc_html( WP_Application_Passwords::chunk_password( $new_password ) ) . '</kbd>'
sprintf( '<input type="text" class="code" readonly="readonly" value="%s" />', esc_attr( WP_Application_Passwords::chunk_password( $new_password ) ) )
);
?>
</p>
@@ -195,15 +195,17 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
do_action( 'wp_authorize_application_password_form', $request, $user );
?>
<?php else : ?>
<form action="<?php echo esc_url( admin_url( 'authorize-application.php' ) ); ?>" method="post">
<form action="<?php echo esc_url( admin_url( 'authorize-application.php' ) ); ?>" method="post" class="form-wrap">
<?php wp_nonce_field( 'authorize_application_password' ); ?>
<input type="hidden" name="action" value="authorize_application_password" />
<input type="hidden" name="app_id" value="<?php echo esc_attr( $app_id ); ?>" />
<input type="hidden" name="success_url" value="<?php echo esc_url( $success_url ); ?>" />
<input type="hidden" name="reject_url" value="<?php echo esc_url( $reject_url ); ?>" />
<label for="app_name"><?php esc_html_e( 'Application Title:' ); ?></label>
<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 />
<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" />
</div>
<?php
/**
@@ -223,8 +225,18 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
do_action( 'wp_authorize_application_password_form', $request, $user );
?>
<p><?php submit_button( __( 'Yes, I approve of this connection.' ), 'primary', 'approve', false ); ?>
<br /><em>
<?php
submit_button(
__( 'Yes, I approve of this connection.' ),
'primary',
'approve',
false,
array(
'aria-describedby' => 'description-approve',
)
);
?>
<p class="description" id="description-approve">
<?php
if ( $success_url ) {
printf(
@@ -245,11 +257,20 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
_e( 'You will be given a password to manually enter into the application in question.' );
}
?>
</em>
</p>
<p><?php submit_button( __( 'No, I do not approve of this connection.' ), 'secondary', 'reject', false ); ?>
<br /><em>
<?php
submit_button(
__( 'No, I do not approve of this connection.' ),
'secondary',
'reject',
false,
array(
'aria-describedby' => 'description-reject',
)
);
?>
<p class="description" id="description-reject">
<?php
if ( $reject_url ) {
printf(
@@ -261,7 +282,6 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
_e( 'You will be returned to the WordPress Dashboard, and no changes will be made.' );
}
?>
</em>
</p>
</form>
<?php endif; ?>