From 585bbec5d53ebc8dedbafaf37f89c095addb883a 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

(cherry picked from commit 0eb2d5ce587ece5d3573cad7534bcbb8df5c6ed4)
---
 .../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 d4cf75b5630..b47790d1cb7 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 475e6437d66..84fbb5db968 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -5369,4 +5369,6 @@
   "process.overview.unknown.user": "Unknown",
 
   "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 3bc98a9502a..6373f91652a 100644
--- a/src/assets/i18n/es.json5
+++ b/src/assets/i18n/es.json5
@@ -7831,5 +7831,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 aae51b36719..09c6cbf6306 100644
--- a/src/assets/i18n/pt-BR.json5
+++ b/src/assets/i18n/pt-BR.json5
@@ -7857,4 +7857,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 a6b45f777cbfdafd4bf104cff81c9ed8f3a7460c 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

(cherry picked from commit f00eae67602c3b1d12c5f8fcf43db774a7a70e11)
---
 .../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 b47790d1cb7..9192226b1ea 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 84fbb5db968..56439dee436 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -5370,5 +5370,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 6373f91652a..dfdf4ca6281 100644
--- a/src/assets/i18n/es.json5
+++ b/src/assets/i18n/es.json5
@@ -7831,8 +7831,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 09c6cbf6306..eebf8968895 100644
--- a/src/assets/i18n/pt-BR.json5
+++ b/src/assets/i18n/pt-BR.json5
@@ -7858,6 +7858,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 3b3fa4f643ca96e81216963018b826d8989545ec 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

(cherry picked from commit e629d9edf0d2177953950f5e145bf49ff1203f88)
---
 .../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 9192226b1ea..a3ccc4bce8a 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 9e852d94913..67b87a974c7 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 df7e9bea5ef..0ba37a90903 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<string> {
     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(' ');
+  }
+
 }

From c330e83095c844c3db61e4be47499f793c0c1773 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

(cherry picked from commit 7b72a5f0c26514eb07f58faf3470c89fe9729d6f)
---
 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 0ba37a90903..1d8a6d34742 100644
--- a/src/app/register-email-form/register-email-form.component.ts
+++ b/src/app/register-email-form/register-email-form.component.ts
@@ -69,7 +69,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 1fad3cffc7c78dd52380ca21006ea2aa17ada847 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

(cherry picked from commit fa6e85d6db5a671038e8e27968701b46520154df)
---
 .../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 a3ccc4bce8a..f6f4880ab6e 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 67b87a974c7..9e852d94913 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,39 +192,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 1d8a6d34742..42be43aab37 100644
--- a/src/app/register-email-form/register-email-form.component.ts
+++ b/src/app/register-email-form/register-email-form.component.ts
@@ -66,11 +66,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();
   }
@@ -140,13 +135,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();
-    }));
   }
 
   /**
@@ -259,19 +247,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 1011468273f2887b21e77bf687285acb240d3e53 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

(cherry picked from commit 009da08177f31d049c2094151d8485c157ee0ede)
---
 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 42be43aab37..c8ca0cc7109 100644
--- a/src/app/register-email-form/register-email-form.component.ts
+++ b/src/app/register-email-form/register-email-form.component.ts
@@ -247,5 +247,4 @@ export class RegisterEmailFormComponent implements OnDestroy, OnInit {
         console.warn(`Unimplemented notification '${key}' from reCaptcha service`);
     }
   }
-  
 }