fix(accessibility): add email type and aria-describedby for input element

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()"
       />

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 caractères, une majuscule, une minuscule, un caractère spécial et un chiffre'

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

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"

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>

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 {