From 5ac3f46a86d768890c7bce4b5794bcf171a1ed2f Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Mon, 16 Sep 2024 08:11:59 +0000
Subject: [PATCH] fix(accessibility): add email type and aria-describedby for
 input element

---
 .../account-credentials/account-credentials.component.html   | 3 +++
 src/app/login/login.component.html                           | 4 +++-
 .../newsletter-subscription.component.html                   | 1 +
 src/app/reset-password/forgot-password.component.html        | 1 +
 src/app/shared/components/input/input.component.html         | 5 +++--
 src/app/shared/components/input/input.component.ts           | 5 +----
 6 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app/form/form-view/account-form/account-credentials/account-credentials.component.html b/src/app/form/form-view/account-form/account-credentials/account-credentials.component.html
index a17152e6c..dca668295 100644
--- a/src/app/form/form-view/account-form/account-credentials/account-credentials.component.html
+++ b/src/app/form/form-view/account-form/account-credentials/account-credentials.component.html
@@ -9,6 +9,8 @@
       label="Email du compte"
       autocomplete="on"
       size="large"
+      type="email"
+      [externalStatusControl]="accountForm.get('email').hasError('alreadyExist')"
       [readonly]="isAccountMode"
       [status]="!isAccountMode ? getStatus(accountForm.get('email')) : null"
       [statusText]="accountForm.get('email').hasError('alreadyExist') ? 'Cet email est déjà utilisé' : null"
@@ -23,6 +25,7 @@
         label="Création du mot de passe"
         size="large"
         type="password"
+        [externalStatusControl]="true"
         [value]="accountForm.get('password').value"
         (valueChange)="accountForm.get('password').setValue($event); setValidationsForm()"
       />
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index cf61a117e..992c1c984 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -14,6 +14,8 @@
           id="login"
           label="Identifiant"
           size="large"
+          type="email"
+          [externalStatusControl]="authFailed || isUnverifiedEmail"
           [required]="true"
           [status]="f.email.value ? (f.email.invalid || authFailed || isUnverifiedEmail ? 'error' : 'success') : null"
           [statusText]="getLoginStatusText()"
@@ -34,7 +36,7 @@
           label="Mot de passe"
           size="large"
           type="password"
-          [externalStatusControl]="true"
+          [externalStatusControl]="f.password.invalid || authFailed || isUnverifiedEmail"
           [statusText]="
             f.password.invalid
               ? 'Le mot de passe doit obligatoirement contenir : 8&nbsp;caractères, une majuscule, une minuscule, un caractère spécial et un chiffre'
diff --git a/src/app/newsletter-subscription/newsletter-subscription.component.html b/src/app/newsletter-subscription/newsletter-subscription.component.html
index 292b4597f..764ae486c 100644
--- a/src/app/newsletter-subscription/newsletter-subscription.component.html
+++ b/src/app/newsletter-subscription/newsletter-subscription.component.html
@@ -8,6 +8,7 @@
     autocomplete="on"
     size="large"
     type="email"
+    [required]="true"
     [wide]="true"
     [status]="
       subscriptionForm.get('email').value ? (subscriptionForm.get('email').invalid ? 'error' : 'success') : null
diff --git a/src/app/reset-password/forgot-password.component.html b/src/app/reset-password/forgot-password.component.html
index c458a4fa5..2bad9b6b4 100644
--- a/src/app/reset-password/forgot-password.component.html
+++ b/src/app/reset-password/forgot-password.component.html
@@ -10,6 +10,7 @@
         id="account-email"
         type="email"
         size="large"
+        type="email"
         [placeholder]="'exemple@mail.com'"
         [label]="'Email du compte'"
         [value]="email.value"
diff --git a/src/app/shared/components/input/input.component.html b/src/app/shared/components/input/input.component.html
index 4330dd269..dabbee913 100644
--- a/src/app/shared/components/input/input.component.html
+++ b/src/app/shared/components/input/input.component.html
@@ -11,9 +11,10 @@
 
   <div class="inputContainer" [ngClass]="{ hasIconInField: hasIconInField }">
     <input
+      [attr.aria-describedby]="'status-' + id"
       [attr.aria-required]="required ? 'true' : 'false'"
       [type]="type"
-      [id]="id + '_Input'"
+      [id]="'input-' + id"
       [disabled]="disabled"
       [readonly]="readonly"
       [autocomplete]="autocomplete"
@@ -52,7 +53,7 @@
     <img *ngIf="status === 'success'" src="assets/ico/success-rounded.svg" alt="" />
     <img *ngIf="status === 'info'" src="assets/ico/info-rounded.svg" alt="" />
     <img *ngIf="status === 'warning'" src="assets/ico/warning.svg" alt="" />
-    <span class="statusText" [ngClass]="status">
+    <span class="statusText" [attr.id]="'status-' + id" [ngClass]="status">
       {{ getStatusText() }}
     </span>
   </div>
diff --git a/src/app/shared/components/input/input.component.ts b/src/app/shared/components/input/input.component.ts
index fe985ce54..f96f0ea0a 100644
--- a/src/app/shared/components/input/input.component.ts
+++ b/src/app/shared/components/input/input.component.ts
@@ -109,10 +109,7 @@ export class InputComponent implements OnInit {
   }
 
   private isInvalidText(): boolean {
-    return (
-      (this.id.startsWith('name') || this.id.startsWith('surname') || this.id === 'subject') &&
-      !CustomRegExp.NAME.test(this.value)
-    );
+    return (this.id.startsWith('name') || this.id.startsWith('surname')) && !CustomRegExp.NAME.test(this.value);
   }
 
   private setStatusError(message: string): void {
-- 
GitLab