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 9192226b1e..a3ccc4bce8 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 9e852d9491..67b87a974c 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
@@ -192,4 +192,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 df7e9bea5e..0ba37a9090 100644
--- a/src/app/register-email-form/register-email-form.component.ts
+++ b/src/app/register-email-form/register-email-form.component.ts
@@ -66,6 +66,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();
}
@@ -135,6 +140,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();
+ }));
}
/**
@@ -248,4 +260,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(' ');
+ }
+
}