From ca27562a915fc5f0b15711c1c7eeac47aa6c4cf9 Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Tue, 30 Jul 2024 16:10:11 +0200
Subject: [PATCH] fix(accessibility): radio-option component tab selection bug
---
.../structure-wifi/structure-wifi.component.html | 4 ++--
.../structure-wifi/structure-wifi.component.ts | 6 +++---
.../needs-selection/needs-selection.component.html | 4 ++--
.../needs-selection/needs-selection.component.ts | 10 ++--------
.../radio-option/radio-option.component.html | 2 +-
.../components/radio-option/radio-option.component.ts | 8 ++------
src/app/shared/components/radio/radio.component.html | 10 +---------
src/app/shared/components/radio/radio.component.ts | 4 ++--
8 files changed, 15 insertions(+), 33 deletions(-)
diff --git a/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.html b/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.html
index 3f70cab9e..c85199c84 100644
--- a/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.html
+++ b/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.html
@@ -12,7 +12,7 @@
[selected]="
isEditMode ? isInArray('selfServiceMaterial', 'wifiEnAccesLibre') : structureForm.get('freeWifi').value
"
- (selectedEvent)="onCheckChange($event, 'categories.selfServiceMaterial', 'wifiEnAccesLibre')"
+ (click)="onCheckChange(true, 'categories.selfServiceMaterial', 'wifiEnAccesLibre')"
/>
<app-radio-option
[id]="'no'"
@@ -22,7 +22,7 @@
(isEditMode ? isInArray('selfServiceMaterial', 'wifiEnAccesLibre') : structureForm.get('freeWifi').value) ===
false
"
- (selectedEvent)="onCheckChange($event, 'categories.selfServiceMaterial', 'wifiEnAccesLibre')"
+ (click)="onCheckChange(false, 'categories.selfServiceMaterial', 'wifiEnAccesLibre')"
/>
</div>
</form>
diff --git a/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.ts b/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.ts
index c63a6aaad..a7f3414de 100644
--- a/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.ts
+++ b/src/app/form/form-view/structure-form/structure-wifi/structure-wifi.component.ts
@@ -20,9 +20,9 @@ export class StructureWifiComponent implements OnInit {
public isInArray(formControlName: string, term: string): boolean {
return this.formUtils.isInCategoryArray(term, formControlName, this.structureForm);
}
- public onCheckChange(event: { name: string; value: string | boolean }, catId: string, modId: string): void {
- this.checkChange.emit({ event: event.value, formControlName: catId, value: modId });
- this.onRadioChange('freeWifi', event.value);
+ public onCheckChange(value: boolean, catId: string, modId: string): void {
+ this.checkChange.emit({ event: value, formControlName: catId, value: modId });
+ this.onRadioChange('freeWifi', value);
}
public onRadioChange(name: string, value: string | boolean): void {
diff --git a/src/app/form/orientation-form-view/global-components/needs-selection/needs-selection.component.html b/src/app/form/orientation-form-view/global-components/needs-selection/needs-selection.component.html
index 98778d9e3..1b01c2213 100644
--- a/src/app/form/orientation-form-view/global-components/needs-selection/needs-selection.component.html
+++ b/src/app/form/orientation-form-view/global-components/needs-selection/needs-selection.component.html
@@ -10,8 +10,8 @@
[label]="option.title"
[description]="option.hint"
[iconName]="option.icon"
- [selected]="getSelected() === option.key"
- (selectedEvent)="selectNeed(option.key)"
+ [selected]="currentNeed === option.key"
+ (click)="selectNeed(option.key)"
/>
</div>
</div>
diff --git a/src/app/form/orientation-form-view/global-components/needs-selection/needs-selection.component.ts b/src/app/form/orientation-form-view/global-components/needs-selection/needs-selection.component.ts
index 544db2f1b..d3ac80aeb 100644
--- a/src/app/form/orientation-form-view/global-components/needs-selection/needs-selection.component.ts
+++ b/src/app/form/orientation-form-view/global-components/needs-selection/needs-selection.component.ts
@@ -4,7 +4,7 @@ import { PersonalOffer } from '../../../../models/personalOffer.model';
import { OrientationService } from '../../../../services/orientation.service';
import { PersonalOfferService } from '../../../../services/personal-offer.service';
import { INeedItem } from '../../../../utils/orientationUtils';
-import { NeedsType, OnlineDemarche } from '../../enums/orientation.enums';
+import { NeedsType } from '../../enums/orientation.enums';
@Component({
selector: 'app-needs-selection',
@@ -74,12 +74,6 @@ export class NeedsSelectionComponent implements OnInit {
public selectNeed(event: string): void {
this.setNeedType.emit(event);
- }
- public getSelected(): NeedsType | OnlineDemarche {
- const selected = this.needsList.filter((need) => need.key === this.currentNeed)[0];
- if (selected) {
- this.validate.emit();
- return selected.key;
- }
+ this.validate.emit();
}
}
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 c5477d582..bad3eb0d3 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 @@
-<div class="radioContainer" tabindex="-1" [ngClass]="{ selected: selected }" (click)="clicked()" (keydown)="clicked()">
+<div class="radioContainer" tabindex="-1" [ngClass]="{ selected: selected }">
<app-radio
[id]="id"
[checked]="selected === true"
diff --git a/src/app/shared/components/radio-option/radio-option.component.ts b/src/app/shared/components/radio-option/radio-option.component.ts
index cd34e7833..6be330903 100644
--- a/src/app/shared/components/radio-option/radio-option.component.ts
+++ b/src/app/shared/components/radio-option/radio-option.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, Input } from '@angular/core';
@Component({
selector: 'app-radio-option',
@@ -27,9 +27,5 @@ export class RadioOptionComponent {
/** Optional icon to display between the radio and label */
@Input() iconName?: string;
- @Output() selectedEvent = new EventEmitter<{ name: string; value: string | boolean }>();
-
- public clicked(): void {
- this.selectedEvent.emit({ name: this.id, value: this.value });
- }
+ // For a better accessibility support, use the native html output events (change, click, etc.) emitted by the inner input radio element
}
diff --git a/src/app/shared/components/radio/radio.component.html b/src/app/shared/components/radio/radio.component.html
index 2ce3ca4e9..fec967762 100644
--- a/src/app/shared/components/radio/radio.component.html
+++ b/src/app/shared/components/radio/radio.component.html
@@ -1,13 +1,5 @@
<div class="radioContainer">
- <input
- type="radio"
- [id]="id"
- [checked]="checked"
- [disabled]="disabled"
- [ngClass]="classes"
- (click)="action.emit($event)"
- (keydown)="action.emit($event)"
- />
+ <input type="radio" [id]="id" [checked]="checked" [disabled]="disabled" [ngClass]="classes" />
<app-svg-icon *ngIf="iconName" [iconClass]="'icon-44'" [folder]="'form'" [icon]="iconName" />
<div class="details">
<label [for]="id">{{ label }}</label>
diff --git a/src/app/shared/components/radio/radio.component.ts b/src/app/shared/components/radio/radio.component.ts
index ee4010b2d..27c09c57a 100644
--- a/src/app/shared/components/radio/radio.component.ts
+++ b/src/app/shared/components/radio/radio.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, Input } from '@angular/core';
@Component({
selector: 'app-radio',
@@ -26,7 +26,7 @@ export class RadioComponent {
/** Optional icon to display between the radio and label */
@Input() iconName?: string;
- @Output() action = new EventEmitter<Event>();
+ // For a better accessibility support, use the native html output events (change, click, etc.) emitted by the inner input radio element
public get classes(): string[] {
return [this.size];
--
GitLab