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(' ');
+ }
+
}