Dynamic aria-describedby attribute

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"
-                           aria-describedby="email-errors-required email-error-not-valid"
+                           [attr.aria-describedby]="ariaDescribedby"
                            [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,4 +210,39 @@ 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,6 +109,11 @@ export class RegisterEmailFormComponent implements OnDestroy, OnInit {
 
   subscriptions: Subscription[] = [];
 
+  /**
+   * Stores error messages related to the email field
+   */
+  ariaDescribedby: string = '';
+
   captchaVersion(): Observable<string> {
     return this.googleRecaptchaService.captchaVersion();
   }
@@ -178,6 +183,13 @@ 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();
+    }));
   }
 
   /**
@@ -291,4 +303,18 @@ export class RegisterEmailFormComponent implements OnDestroy, OnInit {
     }
   }
 
+  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(' ');
+  }
+
 }