Login: Explicitly associate errors with input fields.

Add an `aria-describedby` relationship between login email/password input fields and displayed login error messages.

Props patrickgroot, rollybueno, afercia.
Fixes #54483.
Built from https://develop.svn.wordpress.org/trunk@53707


git-svn-id: http://core.svn.wordpress.org/trunk@53266 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2022-07-15 23:40:10 +00:00
parent 1d101bada0
commit 38a13f94ba
2 changed files with 13 additions and 8 deletions

View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.1-alpha-53706';
$wp_version = '6.1-alpha-53707';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

View File

@ -261,7 +261,7 @@ function login_header( $title = 'Log In', $message = '', $wp_error = null ) {
*
* @param string $messages Login messages.
*/
echo '<p class="message">' . apply_filters( 'login_messages', $messages ) . "</p>\n";
echo '<p class="message" id="login-message">' . apply_filters( 'login_messages', $messages ) . "</p>\n";
}
}
} // End of login_header().
@ -1388,10 +1388,15 @@ switch ( $action ) {
$rememberme = ! empty( $_POST['rememberme'] );
if ( $errors->has_errors() ) {
$aria_describedby_error = ' aria-describedby="login_error"';
} else {
$aria_describedby_error = '';
$aria_describedby = '';
$has_errors = $errors->has_errors();
if ( $has_errors ) {
$aria_describedby = ' aria-describedby="login_error"';
}
if ( $has_errors && 'message' === $errors->get_error_data() ) {
$aria_describedby = ' aria-describedby="login-message"';
}
wp_enqueue_script( 'user-profile' );
@ -1400,13 +1405,13 @@ switch ( $action ) {
<form name="loginform" id="loginform" action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>" method="post">
<p>
<label for="user_login"><?php _e( 'Username or Email Address' ); ?></label>
<input type="text" name="log" id="user_login"<?php echo $aria_describedby_error; ?> class="input" value="<?php echo esc_attr( $user_login ); ?>" size="20" autocapitalize="off" autocomplete="username" />
<input type="text" name="log" id="user_login"<?php echo $aria_describedby; ?> class="input" value="<?php echo esc_attr( $user_login ); ?>" size="20" autocapitalize="off" autocomplete="username" />
</p>
<div class="user-pass-wrap">
<label for="user_pass"><?php _e( 'Password' ); ?></label>
<div class="wp-pwd">
<input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input password-input" value="" size="20" autocomplete="current-password" />
<input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby; ?> class="input password-input" value="" size="20" autocomplete="current-password" />
<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Show password' ); ?>">
<span class="dashicons dashicons-visibility" aria-hidden="true"></span>
</button>