fix(accessibility): make show/hide password accessible

src/app/login/login.component.scss

@@ -18,7 +18,6 @@
     flex-direction: column;
     gap: 40px;
     align-items: center;
-    overflow-y: auto;
     width: 100%;
     max-width: 980px;
     color: $grey-1;

src/app/shared/components/input/input.component.html

@@ -20,12 +20,21 @@
       (blur)="onFinishedEditing()"
       (keyup.enter)="onFinishedEditing()"
     />
-    <div *ngIf="hasIconInField && !readonly" class="iconInField">
-      <svg (click)="toggleShowPassword()">
+    <button
+      *ngIf="hasIconInField && !readonly"
+      type="button"
+      class="iconInField"
+      role="switch"
+      [attr.aria-checked]="type === 'text'"
+      [attr.aria-label]="type !== 'text' ? 'Afficher le mot de passe' : 'Masquer le mot de passe'"
+      (click)="toggleShowPassword()"
+      (keydown.enter)="toggleShowPassword()"
+    >
+      <svg>
         <use *ngIf="type !== 'text'" [attr.xlink:href]="'assets/form/sprite.svg#visibility'" />
         <use *ngIf="type === 'text'" [attr.xlink:href]="'assets/form/sprite.svg#visibility-off'" />
       </svg>
-    </div>
+    </button>
     <div *ngIf="hasIconInField && readonly" class="iconInField readonly">
       <svg>
         <use [attr.xlink:href]="'assets/form/sprite.svg#padlock'" />

src/app/shared/components/input/input.component.scss

@@ -59,7 +59,6 @@
 
     input {
       color: $black;
-      outline: none;
       box-sizing: border-box;
       border-radius: 4px;
       border: 1px solid $grey-4;
@@ -98,6 +97,8 @@
       display: flex;
       justify-content: center;
       flex-direction: column;
+      background: transparent;
+      border: none;
 
       svg {
         cursor: pointer;