diff --git a/src/app/register-email-form/register-email-form.component.html b/src/app/register-email-form/register-email-form.component.html index 8fd17157d7..d830fc441d 100644 --- a/src/app/register-email-form/register-email-form.component.html +++ b/src/app/register-email-form/register-email-form.component.html @@ -16,7 +16,7 @@
diff --git a/src/app/register-email-form/register-email-form.component.spec.ts b/src/app/register-email-form/register-email-form.component.spec.ts index eda9110dc7..c622b9c0e9 100644 --- a/src/app/register-email-form/register-email-form.component.spec.ts +++ b/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: 'valid@email.com' }); + 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: 'valid@email.com' }); + expect(comp.ariaDescribedby).toBe(''); + }); + }); }); diff --git a/src/app/register-email-form/register-email-form.component.ts b/src/app/register-email-form/register-email-form.component.ts index ac13abb865..3c207aae71 100644 --- a/src/app/register-email-form/register-email-form.component.ts +++ b/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 { 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(' '); + } + }