Merge pull request #3884 from Nixxx19/nityam/fix-aria-live-login-error-#3874

fix: add missing aria-live to form error messages (#3874)

Author: raclim

client/modules/IDE/components/NewFileForm.jsx

@@ -64,7 +64,9 @@ function NewFileForm() {
             </Field>
           </div>
           {touched.submitButton && errors.name && (
-            <span className="form-error">{errors.name}</span>
+            <span className="form-error" aria-live="polite">
+              {errors.name}
+            </span>
           )}
         </form>
       )}

client/modules/IDE/components/NewFolderForm.jsx

@@ -61,7 +61,9 @@ function NewFolderForm() {
             </Field>
           </div>
           {touched.submitButton && errors.name && (
-            <span className="form-error">{errors.name}</span>
+            <span className="form-error" aria-live="polite">
+              {errors.name}
+            </span>
           )}
         </form>
       )}

client/modules/User/components/AccountForm.tsx

@@ -90,7 +90,9 @@ export function AccountForm() {
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
+                  <span className="form-error" aria-live="polite">
+                    {field.meta.error}
+                  </span>
                 )}
               </p>
             )}
@@ -135,7 +137,9 @@ export function AccountForm() {
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
+                  <span className="form-error" aria-live="polite">
+                    {field.meta.error}
+                  </span>
                 )}
               </p>
             )}
@@ -156,7 +160,9 @@ export function AccountForm() {
                     {...field.input}
                   />
                   {field.meta.touched && field.meta.error && (
-                    <span className="form-error">{field.meta.error}</span>
+                    <span className="form-error" aria-live="polite">
+                      {field.meta.error}
+                    </span>
                   )}
                 </p>
               )}
@@ -178,7 +184,9 @@ export function AccountForm() {
                     {...field.input}
                   />
                   {field.meta.touched && field.meta.error && (
-                    <span className="form-error">{field.meta.error}</span>
+                    <span className="form-error" aria-live="polite">
+                      {field.meta.error}
+                    </span>
                   )}
                 </p>
               )}

client/modules/User/components/CollectionCreate.jsx

@@ -37,7 +37,7 @@ const CollectionCreate = () => {
       <div className="sketches-table-container">
         <form className="form" onSubmit={handleCreateCollection}>
           {creationError && (
-            <span className="form-error">
+            <span className="form-error" aria-live="assertive">
               {t('CollectionCreate.FormError')}
             </span>
           )}
@@ -55,7 +55,7 @@ const CollectionCreate = () => {
               onChange={(e) => setName(e.target.value)}
             />
             {invalid && (
-              <span className="form-error">
+              <span className="form-error" aria-live="polite">
                 {t('CollectionCreate.NameRequired')}
               </span>
             )}

client/modules/User/components/LoginForm.tsx

@@ -109,7 +109,7 @@ export function LoginForm() {
               )}
             </Field>
             {submitError && !modifiedSinceLastSubmit && (
-              <span className="form-error">
+              <span className="form-error" aria-live="assertive">
                 {t('LoginForm.Errors.invalidCredentials')}
               </span>
             )}

client/modules/User/components/NewPasswordForm.tsx

@@ -39,7 +39,9 @@ export function NewPasswordForm(props: { resetPasswordToken: string }) {
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
+                  <span className="form-error" aria-live="polite">
+                    {field.meta.error}
+                  </span>
                 )}
               </p>
             )}
@@ -59,7 +61,9 @@ export function NewPasswordForm(props: { resetPasswordToken: string }) {
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
+                  <span className="form-error" aria-live="polite">
+                    {field.meta.error}
+                  </span>
                 )}
               </p>
             )}

client/modules/User/components/ResetPasswordForm.tsx

@@ -41,7 +41,9 @@ export function ResetPasswordForm() {
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
-                  <span className="form-error">{field.meta.error}</span>
+                  <span className="form-error" aria-live="polite">
+                    {field.meta.error}
+                  </span>
                 )}
               </p>
             )}