From 66b91ca2d02f54e73742f3bf745156d1cb307cff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marl=C3=A8ne=20SIMONDANT?= <msimondant@grandlyon.com>
Date: Tue, 13 Aug 2024 12:26:16 +0000
Subject: [PATCH] fix(accessibility): make show/hide password accessible
---
src/app/login/login.component.scss | 1 -
.../shared/components/input/input.component.html | 15 ++++++++++++---
.../shared/components/input/input.component.scss | 3 ++-
3 files changed, 14 insertions(+), 5 deletions(-)
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index ee16fcfec..b9e99f8bf 100644
--- a/src/app/login/login.component.scss
+++ b/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;
diff --git a/src/app/shared/components/input/input.component.html b/src/app/shared/components/input/input.component.html
index 49a47ebf4..7bcaf6453 100644
--- a/src/app/shared/components/input/input.component.html
+++ b/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'" />
diff --git a/src/app/shared/components/input/input.component.scss b/src/app/shared/components/input/input.component.scss
index 3166f0a88..b8d4c166b 100644
--- a/src/app/shared/components/input/input.component.scss
+++ b/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;
--
GitLab