Simplifying the implementation of dynamic aria-describedby

(cherry picked from commit fa6e85d)

Author: Andrea-Guevara

src/app/register-email-form/register-email-form.component.html

@@ -16,7 +16,7 @@ <h1>{{MESSAGE_PREFIX + '.header'|translate}}</h1>
                     <input [className]="(email.invalid) && (email.dirty || email.touched) ? 'form-control is-invalid' :'form-control'"
                            type="text" id="email" formControlName="email"
                            [attr.aria-label]="MESSAGE_PREFIX + '.aria.label' | translate"
-                           [attr.aria-describedby]="ariaDescribedby"
+                           [attr.aria-describedby]="(!email.errors) ? '' : (email.errors.required ? 'email-errors-required' : 'email-error-not-valid')"
                            [attr.aria-invalid]="email.invalid"/>
                     <div *ngIf="email.invalid && (email.dirty || email.touched)"
                          class="invalid-feedback show-feedback">

src/app/register-email-form/register-email-form.component.spec.ts

@@ -210,39 +210,4 @@ describe('RegisterEmailFormComponent', () => {
       expect(router.navigate).not.toHaveBeenCalled();
     }));
   });
-  describe('ariaDescribedby', () => {
-    it('should have required error message when email is empty', () => {
-      comp.form.patchValue({ email: '' });
-      comp.checkEmailValidity();
-
-      expect(comp.ariaDescribedby).toContain('email-errors-required');
-    });
-
-    it('should have invalid email error message when email is invalid', () => {
-      comp.form.patchValue({ email: 'invalid-email' });
-      comp.checkEmailValidity();
-
-      expect(comp.ariaDescribedby).toContain('email-error-not-valid');
-    });
-
-    it('should clear ariaDescribedby when email is valid', () => {
-      comp.form.patchValue({ email: '[email protected]' });
-      comp.checkEmailValidity();
-
-      expect(comp.ariaDescribedby).toBe('');
-    });
-
-    it('should update ariaDescribedby on value changes', () => {
-      spyOn(comp, 'checkEmailValidity').and.callThrough();
-
-      comp.form.patchValue({ email: '' });
-      expect(comp.ariaDescribedby).toContain('email-errors-required');
-
-      comp.form.patchValue({ email: 'invalid-email' });
-      expect(comp.ariaDescribedby).toContain('email-error-not-valid');
-
-      comp.form.patchValue({ email: '[email protected]' });
-      expect(comp.ariaDescribedby).toBe('');
-    });
-  });
 });

src/app/register-email-form/register-email-form.component.ts

@@ -109,11 +109,6 @@ export class RegisterEmailFormComponent implements OnDestroy, OnInit {
 
   subscriptions: Subscription[] = [];
 
-  /**
-   * Stores error messages related to the email field
-   */
-  ariaDescribedby = '';
-
   captchaVersion(): Observable<string> {
     return this.googleRecaptchaService.captchaVersion();
   }
@@ -183,13 +178,6 @@ export class RegisterEmailFormComponent implements OnDestroy, OnInit {
       this.disableUntilChecked = res;
       this.changeDetectorRef.detectChanges();
     }));
-
-    /**
-     * Subscription to email field value changes
-     */
-    this.subscriptions.push(this.email.valueChanges.subscribe(() => {
-      this.checkEmailValidity();
-    }));
   }
 
   /**
@@ -302,19 +290,5 @@ export class RegisterEmailFormComponent implements OnDestroy, OnInit {
         console.warn(`Unimplemented notification '${key}' from reCaptcha service`);
     }
   }
-
-  checkEmailValidity() {
-    const descriptions = [];
-
-    if (this.email.errors?.required) {
-      descriptions.push('email-errors-required');
-    }
-
-    if (this.email.errors?.pattern || this.email.errors?.email) {
-      descriptions.push('email-error-not-valid');
-    }
-
-    this.ariaDescribedby = descriptions.join(' ');
-  }
-
+  
 }