fix(accessibility): radio-option component tab selection bug

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>

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 {

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>

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();
   }
 }

src/app/shared/components/radio-option/radio-option.component.html

-<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"

src/app/shared/components/radio-option/radio-option.component.ts

-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
 }

src/app/shared/components/radio/radio.component.html

 <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>

src/app/shared/components/radio/radio.component.ts

-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];