From bb8aa297963adcbb5da57df15a5d5e84b2fac20e Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Mon, 22 Apr 2024 15:36:06 +0200
Subject: [PATCH 1/5] fix(accessibility): checkbox
---
.../components/checkbox-form/checkbox-form.component.html | 6 +++---
.../components/checkbox-form/checkbox-form.component.scss | 2 +-
src/app/shared/components/checkbox/checkbox.component.html | 1 +
3 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.html b/src/app/shared/components/checkbox-form/checkbox-form.component.html
index 784e822f6..e73a1004a 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.html
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.html
@@ -1,9 +1,9 @@
-<button type="button" tabindex="-1" [ngClass]="{ selected: isChecked }" (click)="clicked()">
+<div class="checkbox" tabindex="-1" [ngClass]="{ selected: isChecked }" (click)="clicked()" (keydown)="clicked()">
<app-checkbox [checked]="isChecked" />
<svg *ngIf="iconSvg" aria-hidden="true" class="icon" [ngClass]="iconType">
<use [attr.xlink:href]="'assets/form/sprite.svg#' + iconSvg" />
</svg>
- <p>{{ text }}</p>
-</button>
+ <p id="checkboxLabel">{{ text }}</p>
+</div>
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.scss b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
index 167a1bc2c..0078cd152 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.scss
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
@@ -1,7 +1,7 @@
@import 'color';
@import 'typography';
-button {
+div.checkbox {
width: 100%;
height: 80px;
padding: 1rem;
diff --git a/src/app/shared/components/checkbox/checkbox.component.html b/src/app/shared/components/checkbox/checkbox.component.html
index 17d7e6d70..c2185f1c7 100644
--- a/src/app/shared/components/checkbox/checkbox.component.html
+++ b/src/app/shared/components/checkbox/checkbox.component.html
@@ -5,5 +5,6 @@
[checked]="checked"
[indeterminate]="indeterminate"
[disabled]="disabled"
+ [attr.aria-labelledby]="'checkboxLabel'"
(click)="action.emit($event)"
/>
--
GitLab
From 680037aa52562e90005a87d45880980d35e98e87 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Mon, 22 Apr 2024 16:28:02 +0200
Subject: [PATCH 2/5] update keydown
---
.../components/checkbox-form/checkbox-form.component.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.html b/src/app/shared/components/checkbox-form/checkbox-form.component.html
index e73a1004a..9a5c736eb 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.html
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.html
@@ -1,4 +1,4 @@
-<div class="checkbox" tabindex="-1" [ngClass]="{ selected: isChecked }" (click)="clicked()" (keydown)="clicked()">
+<div class="checkbox" tabindex="-1" [ngClass]="{ selected: isChecked }" (click)="clicked()" (keydown.enter)="clicked()">
<app-checkbox [checked]="isChecked" />
<svg *ngIf="iconSvg" aria-hidden="true" class="icon" [ngClass]="iconType">
--
GitLab
From f50871d2d03500454bc7ead0fbb1556a09fc672c Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Mon, 22 Apr 2024 16:35:01 +0200
Subject: [PATCH 3/5] space seems to be the expected keyboard key to
activate/deactivate a checkbox
---
.../checkbox-form/checkbox-form.component.html | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.html b/src/app/shared/components/checkbox-form/checkbox-form.component.html
index 9a5c736eb..31c125a18 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.html
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.html
@@ -1,4 +1,11 @@
-<div class="checkbox" tabindex="-1" [ngClass]="{ selected: isChecked }" (click)="clicked()" (keydown.enter)="clicked()">
+<div
+ class="checkbox"
+ tabindex="-1"
+ [ngClass]="{ selected: isChecked }"
+ (click)="clicked()"
+ (keyup.space)="clicked()"
+ (keyup.enter)="clicked()"
+>
<app-checkbox [checked]="isChecked" />
<svg *ngIf="iconSvg" aria-hidden="true" class="icon" [ngClass]="iconType">
--
GitLab
From 49517d4416f212b9ba938883212f1044912e17f6 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Mon, 22 Apr 2024 16:37:07 +0200
Subject: [PATCH 4/5] space seems to be the expected keyboard key to
activate/deactivate a checkbox
---
.../components/checkbox-form/checkbox-form.component.html | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.html b/src/app/shared/components/checkbox-form/checkbox-form.component.html
index 31c125a18..141b0d1b3 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.html
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.html
@@ -3,8 +3,8 @@
tabindex="-1"
[ngClass]="{ selected: isChecked }"
(click)="clicked()"
- (keyup.space)="clicked()"
- (keyup.enter)="clicked()"
+ (keydown.space)="clicked()"
+ (keydown.enter)="clicked()"
>
<app-checkbox [checked]="isChecked" />
--
GitLab
From c562d7ad646f00fc84c27eb6a503af3f3a3430c3 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Mon, 22 Apr 2024 16:42:12 +0200
Subject: [PATCH 5/5] keydown.enter
---
.../checkbox-form/checkbox-form.component.html | 9 +--------
1 file changed, 1 insertion(+), 8 deletions(-)
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.html b/src/app/shared/components/checkbox-form/checkbox-form.component.html
index 141b0d1b3..9a5c736eb 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.html
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.html
@@ -1,11 +1,4 @@
-<div
- class="checkbox"
- tabindex="-1"
- [ngClass]="{ selected: isChecked }"
- (click)="clicked()"
- (keydown.space)="clicked()"
- (keydown.enter)="clicked()"
->
+<div class="checkbox" tabindex="-1" [ngClass]="{ selected: isChecked }" (click)="clicked()" (keydown.enter)="clicked()">
<app-checkbox [checked]="isChecked" />
<svg *ngIf="iconSvg" aria-hidden="true" class="icon" [ngClass]="iconType">
--
GitLab