From af4d1016a5a1989a96e09df8b861401f9c2b38d2 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Thu, 2 May 2024 11:11:19 +0200
Subject: [PATCH] fix(accessibility): radio should not be nested in another
interactive element
---
.../components/radio-option/radio-option.component.html | 4 ++--
.../components/radio-option/radio-option.component.scss | 2 +-
src/app/shared/components/radio/radio.component.html | 2 +-
3 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/app/shared/components/radio-option/radio-option.component.html b/src/app/shared/components/radio-option/radio-option.component.html
index 5b6c4ce95..c5477d582 100644
--- a/src/app/shared/components/radio-option/radio-option.component.html
+++ b/src/app/shared/components/radio-option/radio-option.component.html
@@ -1,4 +1,4 @@
-<button type="button" tabindex="0" [ngClass]="{ selected: selected }" (click)="clicked()">
+<div class="radioContainer" tabindex="-1" [ngClass]="{ selected: selected }" (click)="clicked()" (keydown)="clicked()">
<app-radio
[id]="id"
[checked]="selected === true"
@@ -7,4 +7,4 @@
[size]="size"
[iconName]="iconName"
/>
-</button>
+</div>
diff --git a/src/app/shared/components/radio-option/radio-option.component.scss b/src/app/shared/components/radio-option/radio-option.component.scss
index 5cb67f795..d92e69123 100644
--- a/src/app/shared/components/radio-option/radio-option.component.scss
+++ b/src/app/shared/components/radio-option/radio-option.component.scss
@@ -1,6 +1,6 @@
@import 'color';
-button {
+.radioContainer {
width: 100%;
cursor: pointer;
box-sizing: border-box;
diff --git a/src/app/shared/components/radio/radio.component.html b/src/app/shared/components/radio/radio.component.html
index 6d0da5a2e..2ce3ca4e9 100644
--- a/src/app/shared/components/radio/radio.component.html
+++ b/src/app/shared/components/radio/radio.component.html
@@ -1,12 +1,12 @@
<div class="radioContainer">
<input
type="radio"
- tabindex="-1"
[id]="id"
[checked]="checked"
[disabled]="disabled"
[ngClass]="classes"
(click)="action.emit($event)"
+ (keydown)="action.emit($event)"
/>
<app-svg-icon *ngIf="iconName" [iconClass]="'icon-44'" [folder]="'form'" [icon]="iconName" />
<div class="details">
--
GitLab