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.

git-svn-id: https://develop.svn.wordpress.org/trunk@53707 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson
2022-07-15 23:38:46 +00:00
parent ab2cd6f03b
commit e9c9c59681

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>