From 0eb2d5ce587ece5d3573cad7534bcbb8df5c6ed4 Mon Sep 17 00:00:00 2001
From: andreaNeki <root@TI-03.OHB.LOCAL>
Date: Tue, 27 Aug 2024 17:02:12 -0300
Subject: [PATCH 1/6] Improving accessibility on the new user registration page

---
 .../register-email-form.component.html                   | 9 ++++++---
 src/assets/i18n/en.json5                                 | 2 ++
 src/assets/i18n/es.json5                                 | 3 +++
 src/assets/i18n/pt-BR.json5                              | 3 +++
 4 files changed, 14 insertions(+), 3 deletions(-)

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 a38c4a81c02..740018392cc 100644
--- a/src/app/register-email-form/register-email-form.component.html
+++ b/src/app/register-email-form/register-email-form.component.html
@@ -14,13 +14,16 @@ <h1>{{MESSAGE_PREFIX + '.header'|translate}}</h1>
                     <label class="font-weight-bold"
                            for="email">{{MESSAGE_PREFIX + '.email' | translate}}</label>
                     <input [className]="(email.invalid) && (email.dirty || email.touched) ? 'form-control is-invalid' :'form-control'"
-                           type="text" id="email" formControlName="email"/>
+                           type="text" id="email" formControlName="email"
+                           [attr.aria-label]="'register-email.aria.label'|translate"
+                           aria-describedby="email-errors-required email-error-not-valid"
+                           [attr.aria-invalid]="form.get('email')?.invalid"/>
                     <div *ngIf="email.invalid && (email.dirty || email.touched)"
                          class="invalid-feedback show-feedback">
-                    <span *ngIf="email.errors && email.errors.required">
+                    <span *ngIf="email.errors && email.errors.required" id="email-errors-required">
                         {{ MESSAGE_PREFIX + '.email.error.required' | translate }}
                     </span>
-                    <span *ngIf="email.errors && ((email.errors.pattern && this.typeRequest === TYPE_REQUEST_REGISTER) || email.errors.email)">
+                    <span *ngIf="email.errors && ((email.errors.pattern && this.typeRequest === TYPE_REQUEST_REGISTER) || email.errors.email)" id="email-error-not-valid">
                         {{ MESSAGE_PREFIX + '.email.error.not-email-form' | translate }}
                         <ng-container *ngIf="validMailDomains.length > 0">
                           {{ MESSAGE_PREFIX + '.email.error.not-valid-domain' | translate: { domains: validMailDomains.join(', ') } }}
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 8f20c657f94..020b4d7616a 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -6739,4 +6739,6 @@
   "item.page.cc.license.disclaimer": "Except where otherwised noted, this item's license is described as",
 
   "browse.search-form.placeholder": "Search the repository",
+
+  "register-email.aria.label": "Enter your e-mail address",
 }
diff --git a/src/assets/i18n/es.json5 b/src/assets/i18n/es.json5
index 55962d25b5f..0306c5a9bbf 100644
--- a/src/assets/i18n/es.json5
+++ b/src/assets/i18n/es.json5
@@ -8152,5 +8152,8 @@
   //"browse.search-form.placeholder": "Search the repository",
   "browse.search-form.placeholder": "Buscar en el repositorio",
 
+  // "register-email.aria.label": "Enter your e-mail address",
+  "register-email.aria.label": "Introduzca su dirección de correo electrónico",
+
 
 }
diff --git a/src/assets/i18n/pt-BR.json5 b/src/assets/i18n/pt-BR.json5
index c3b26a09d28..6f4f94d464f 100644
--- a/src/assets/i18n/pt-BR.json5
+++ b/src/assets/i18n/pt-BR.json5
@@ -10249,4 +10249,7 @@
 
   //"browse.search-form.placeholder": "Search the repository",
   "browse.search-form.placeholder": "Buscar no repositório",
+
+  // "register-email.aria.label": "Enter your e-mail address",
+  "register-email.aria.label": "Digite seu e-mail",
 }

From f00eae67602c3b1d12c5f8fcf43db774a7a70e11 Mon Sep 17 00:00:00 2001
From: andreaNeki <root@TI-03.OHB.LOCAL>
Date: Thu, 5 Sep 2024 09:35:55 -0300
Subject: [PATCH 2/6] Code refactoring - Accessibility on the new user
 registration and forgotten password forms

---
 .../register-email-form/register-email-form.component.html | 4 ++--
 src/assets/i18n/en.json5                                   | 4 +++-
 src/assets/i18n/es.json5                                   | 7 +++++--
 src/assets/i18n/pt-BR.json5                                | 7 +++++--
 4 files changed, 15 insertions(+), 7 deletions(-)

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 740018392cc..8fd17157d73 100644
--- a/src/app/register-email-form/register-email-form.component.html
+++ b/src/app/register-email-form/register-email-form.component.html
@@ -15,9 +15,9 @@ <h1>{{MESSAGE_PREFIX + '.header'|translate}}</h1>
                            for="email">{{MESSAGE_PREFIX + '.email' | translate}}</label>
                     <input [className]="(email.invalid) && (email.dirty || email.touched) ? 'form-control is-invalid' :'form-control'"
                            type="text" id="email" formControlName="email"
-                           [attr.aria-label]="'register-email.aria.label'|translate"
+                           [attr.aria-label]="MESSAGE_PREFIX + '.aria.label' | translate"
                            aria-describedby="email-errors-required email-error-not-valid"
-                           [attr.aria-invalid]="form.get('email')?.invalid"/>
+                           [attr.aria-invalid]="email.invalid"/>
                     <div *ngIf="email.invalid && (email.dirty || email.touched)"
                          class="invalid-feedback show-feedback">
                     <span *ngIf="email.errors && email.errors.required" id="email-errors-required">
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 020b4d7616a..78e17f8d745 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -6740,5 +6740,7 @@
 
   "browse.search-form.placeholder": "Search the repository",
 
-  "register-email.aria.label": "Enter your e-mail address",
+  "register-page.registration.aria.label": "Enter your e-mail address",
+
+  "forgot-email.form.aria.label": "Enter your e-mail address",
 }
diff --git a/src/assets/i18n/es.json5 b/src/assets/i18n/es.json5
index 0306c5a9bbf..25dfb54ca21 100644
--- a/src/assets/i18n/es.json5
+++ b/src/assets/i18n/es.json5
@@ -8152,8 +8152,11 @@
   //"browse.search-form.placeholder": "Search the repository",
   "browse.search-form.placeholder": "Buscar en el repositorio",
 
-  // "register-email.aria.label": "Enter your e-mail address",
-  "register-email.aria.label": "Introduzca su dirección de correo electrónico",
+  // "register-page.registration.aria.label": "Enter your e-mail address",
+  "register-page.registration.aria.label": "Introduzca su dirección de correo electrónico",
+
+  // "forgot-email.form.aria.label": "Enter your e-mail address",
+  "forgot-email.form.aria.label": "Introduzca su dirección de correo electrónico",
 
 
 }
diff --git a/src/assets/i18n/pt-BR.json5 b/src/assets/i18n/pt-BR.json5
index 6f4f94d464f..9ebdc5fbbf7 100644
--- a/src/assets/i18n/pt-BR.json5
+++ b/src/assets/i18n/pt-BR.json5
@@ -10250,6 +10250,9 @@
   //"browse.search-form.placeholder": "Search the repository",
   "browse.search-form.placeholder": "Buscar no repositório",
 
-  // "register-email.aria.label": "Enter your e-mail address",
-  "register-email.aria.label": "Digite seu e-mail",
+  // "register-page.registration.aria.label": "Enter your e-mail address",
+  "register-page.registration.aria.label": "Digite seu e-mail",
+
+  // "forgot-email.form.aria.label": "Enter your e-mail address",
+  "forgot-email.form.aria.label": "Digite seu e-mail",
 }

From e629d9edf0d2177953950f5e145bf49ff1203f88 Mon Sep 17 00:00:00 2001
From: andreaNeki <andrea.montoya@neki-it.com.br>
Date: Thu, 31 Oct 2024 11:27:10 -0300
Subject: [PATCH 3/6] Dynamic aria-describedby attribute

---
 .../register-email-form.component.html        |  2 +-
 .../register-email-form.component.spec.ts     | 35 +++++++++++++++++++
 .../register-email-form.component.ts          | 26 ++++++++++++++
 3 files changed, 62 insertions(+), 1 deletion(-)

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 8fd17157d73..d830fc441de 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 @@ <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">
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 eda9110dc79..c622b9c0e97 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 ac13abb865e..3c207aae713 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<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(' ');
+  }
+
 }

From 7b72a5f0c26514eb07f58faf3470c89fe9729d6f Mon Sep 17 00:00:00 2001
From: andreaNeki <andrea.montoya@neki-it.com.br>
Date: Thu, 31 Oct 2024 11:39:34 -0300
Subject: [PATCH 4/6] Resolving a wrongly declared variable error

---
 src/app/register-email-form/register-email-form.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 3c207aae713..936d11063e2 100644
--- a/src/app/register-email-form/register-email-form.component.ts
+++ b/src/app/register-email-form/register-email-form.component.ts
@@ -112,7 +112,7 @@ export class RegisterEmailFormComponent implements OnDestroy, OnInit {
   /**
    * Stores error messages related to the email field
    */
-  ariaDescribedby: string = '';
+  ariaDescribedby = '';
 
   captchaVersion(): Observable<string> {
     return this.googleRecaptchaService.captchaVersion();

From fa6e85d6db5a671038e8e27968701b46520154df Mon Sep 17 00:00:00 2001
From: andreaNeki <andrea.montoya@neki-it.com.br>
Date: Thu, 31 Oct 2024 15:01:54 -0300
Subject: [PATCH 5/6] Simplifying the implementation of dynamic
 aria-describedby

---
 .../register-email-form.component.html        |  2 +-
 .../register-email-form.component.spec.ts     | 35 -------------------
 .../register-email-form.component.ts          | 28 +--------------
 3 files changed, 2 insertions(+), 63 deletions(-)

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 d830fc441de..2e93902ada9 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 @@ <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">
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 c622b9c0e97..eda9110dc79 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,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: '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 936d11063e2..69497a77035 100644
--- a/src/app/register-email-form/register-email-form.component.ts
+++ b/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(' ');
-  }
-
+  
 }

From 009da08177f31d049c2094151d8485c157ee0ede Mon Sep 17 00:00:00 2001
From: andreaNeki <andrea.montoya@neki-it.com.br>
Date: Thu, 31 Oct 2024 15:07:22 -0300
Subject: [PATCH 6/6] Adjusting spaces in ts

---
 src/app/register-email-form/register-email-form.component.ts | 1 -
 1 file changed, 1 deletion(-)

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 69497a77035..fff8479cbe3 100644
--- a/src/app/register-email-form/register-email-form.component.ts
+++ b/src/app/register-email-form/register-email-form.component.ts
@@ -290,5 +290,4 @@ export class RegisterEmailFormComponent implements OnDestroy, OnInit {
         console.warn(`Unimplemented notification '${key}' from reCaptcha service`);
     }
   }
-  
 }