fix: fix error alert focus on login and registration form (#103)

edx · Jul 4, 2024 · d63699b · d63699b
1 parent 5bbaba6
commit d63699b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/forms/login-popup/index.jsx b/src/forms/login-popup/index.jsx
@@ -128,6 +128,9 @@ const LoginForm = () => {
       if (loginErrorCode === NUDGE_PASSWORD_CHANGE || loginErrorCode === REQUIRE_PASSWORD_CHANGE) {
         dispatch(setCurrentOpenedForm(FORGOT_PASSWORD_FORM));
       }
+      if (errorAlertRef.current) {
+        errorAlertRef.current.focus();
+      }
     }
   }, [dispatch, loginErrorCode, loginErrorContext]);
 
@@ -234,7 +237,7 @@ const LoginForm = () => {
           </div>
         </>
       )}
-      <div ref={errorAlertRef}>
+      <div ref={errorAlertRef} tabIndex="-1" aria-live="assertive">
         <LoginFailureAlert
           errorCode={errorCode.type}
           context={errorCode.context}

diff --git a/src/forms/registration-popup/index.jsx b/src/forms/registration-popup/index.jsx
@@ -203,6 +203,9 @@ const RegistrationForm = () => {
     if (registrationErrorCode) {
       setErrorCode(prevState => ({ type: registrationErrorCode, count: prevState.count + 1 }));
       moveScrollToTop(registerErrorAlertRef);
+      if (registerErrorAlertRef.current) {
+        registerErrorAlertRef.current.focus();
+      }
     }
   }, [registrationErrorCode]);
 
@@ -312,7 +315,7 @@ const RegistrationForm = () => {
               currentProvider={currentProvider}
               referrer={REGISTRATION_FORM}
             />
-            <div ref={registerErrorAlertRef}>
+            <div ref={registerErrorAlertRef} tabIndex="-1" aria-live="assertive">
               <RegistrationFailureAlert
                 errorCode={errorCode.type}
                 failureCount={errorCode.count}