Changeset 53707

Timestamp:

07/15/2022 11:38:46 PM (2 years ago)

Author:

joedolson

Message:

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.

File:

• trunk/src/wp-login.php (modified) (4 diffs)

trunk/src/wp-login.php

@@ -262 +262 @@
              * @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";
         }
     }
@@ -1389 +1389 @@
         $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"';
         }
 
@@ -1401 +1406 @@
             <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>
 
@@ -1407 +1412 @@
                 <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>