From b0991607ea457af98987d18b907f49fd5b8d60e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marl=C3=A8ne=20SIMONDANT?= <msimondant@grandlyon.com>
Date: Mon, 22 Apr 2024 14:48:28 +0000
Subject: [PATCH] fix(accessibility): checkboxes must have labels and should
not be nested in another interactive element (button)
---
.../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..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,9 +1,9 @@
-<button type="button" tabindex="-1" [ngClass]="{ selected: isChecked }" (click)="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">
<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