diff --git a/src/app/app.component.html b/src/app/app.component.html
index ed0f494f8983baeba0065b2a1b4152410de89940..948726be29a6d3725a4b76a046d133c26f31efe0 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,7 @@
<a class="skip-link" [routerLink]="[]" [fragment]="'app-body'">Aller au contenu</a>
<div class="visually-hidden">
- <p>Utilisez <strong>h</strong> (header) pour revenir au logo Res'in à tout moment.</p>
+ <p>Utilisez <strong>ESC</strong> pour revenir à la barre de navigation à tout moment.</p>
</div>
<app-header />
<main class="app-container">
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3d629e84e7d9cc523cc46de682d8b32a9af01667..a750bb6fcab1c229bdde0956850780fd423d3ff8 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -30,28 +30,10 @@ export class AppComponent implements OnInit {
// Listener, keyboard shortcuts
@HostListener('window:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent): void {
- const target = event.target as HTMLElement;
- const tagName = target.tagName.toLowerCase();
-
- // Check if the focus is within an input, textarea
- if (tagName === 'input') {
- const inputElement = target as HTMLInputElement;
- const inputType = inputElement.type.toLowerCase();
- // Ignore only text-based inputs, not others like radio, checkbox, etc.
- if (!['radio', 'checkbox', 'button', 'submit', 'reset'].includes(inputType)) {
- return;
- }
- } else if (tagName === 'textarea' || target.isContentEditable) {
- return;
- }
-
- switch (event.key) {
- case 'h': // 'h' to go to the header (resin logo)
- this.headerComponent.focusLogo();
- event.preventDefault();
- break;
- default:
- break;
+ // 'esc' to go to the header and escape any focus trap
+ if (event.key === 'Escape') {
+ this.headerComponent.focusLogo();
+ event.preventDefault();
}
}
diff --git a/src/app/form/form-view/form-view.component.html b/src/app/form/form-view/form-view.component.html
index 052a59bcb1fd6c40ec8745751c4d4eefa88cb213..3387e4b9c0bf46e52a0457c6f7d3b0e69e371a59 100644
--- a/src/app/form/form-view/form-view.component.html
+++ b/src/app/form/form-view/form-view.component.html
@@ -1,4 +1,4 @@
-<div class="formView">
+<div cdkTrapFocus class="formView">
<app-modal
[title]="'ATTENTION'"
[opened]="showConfirmationModal"
diff --git a/src/app/form/form-view/form-view.module.ts b/src/app/form/form-view/form-view.module.ts
index 99807f0e569e6ad818e7c2339ee7f6206322dea9..d74d10215e3edf1f050c771a3429bbf5e470254f 100644
--- a/src/app/form/form-view/form-view.module.ts
+++ b/src/app/form/form-view/form-view.module.ts
@@ -1,3 +1,4 @@
+import { A11yModule } from '@angular/cdk/a11y';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { SharedModule } from '../../shared/shared.module';
@@ -71,7 +72,7 @@ import { StructureWifiComponent } from './structure-form/structure-wifi/structur
StructureTrainingTypeComponent,
StructureSolidarityMaterialComponent,
],
- imports: [CommonModule, FormViewRoutingModule, SharedModule],
+ imports: [CommonModule, FormViewRoutingModule, SharedModule, A11yModule],
providers: [PersonalOfferGuard],
})
export class FormViewModule {}
diff --git a/src/app/form/orientation-form-view/global-components/navigation/navigation.component.html b/src/app/form/orientation-form-view/global-components/navigation/navigation.component.html
index a8121829ce7ec6bf15f0245dc2e83bf72f69a3fd..448826ffa9292d9c4e4bbb910c68b8d37dba9d6c 100644
--- a/src/app/form/orientation-form-view/global-components/navigation/navigation.component.html
+++ b/src/app/form/orientation-form-view/global-components/navigation/navigation.component.html
@@ -2,7 +2,6 @@
<ng-container *ngIf="!failedOrientation">
<app-button
*ngIf="showPrevButton()"
- #prevButton
[variant]="'secondary'"
[label]="'Précédent'"
[iconName]="'arrowBack'"
@@ -10,7 +9,6 @@
/>
<app-button
*ngIf="showNextButton()"
- #nextButton
[variant]="'primary'"
[label]="isLastStep ? 'Imprimer' : 'Suivant'"
[iconName]="isLastStep ? 'printer' : 'arrowForward'"
diff --git a/src/app/form/orientation-form-view/global-components/navigation/navigation.component.ts b/src/app/form/orientation-form-view/global-components/navigation/navigation.component.ts
index 05758e934c966ed7afea4f5fbafc49d7df1981bb..1fc2f7195ed5ae8c819167f73faa664e196b3b6d 100644
--- a/src/app/form/orientation-form-view/global-components/navigation/navigation.component.ts
+++ b/src/app/form/orientation-form-view/global-components/navigation/navigation.component.ts
@@ -1,6 +1,5 @@
-import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Router } from '@angular/router';
-import { ButtonComponent } from '../../../../shared/components';
import { NeedsTypes } from '../../enums/orientation.enums';
import { AllOrientationSteps } from '../../types/orientation.types';
@@ -22,9 +21,6 @@ export class NavigationComponent {
@Output() goPrev = new EventEmitter<void>();
@Output() goReset = new EventEmitter<void>();
- @ViewChild('prevButton', { read: ButtonComponent }) prevButton: ButtonComponent;
- @ViewChild('nextButton', { read: ButtonComponent }) nextButton: ButtonComponent;
-
public NeedsTypeEnum = NeedsTypes;
constructor(private router: Router) {}
@@ -51,12 +47,4 @@ export class NavigationComponent {
public resetOrientation(): void {
this.goReset.emit();
}
-
- public focusFirstButton(): void {
- if (this.showPrevButton()) {
- this.prevButton.focus();
- } else if (this.showNextButton()) {
- this.nextButton.focus();
- }
- }
}
diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.html b/src/app/form/orientation-form-view/orientation-form-view.component.html
index 275900e98d502574a30a2c62b4231d259c911bed..a9e0be6029202b3489bdf0fb0d2b08f45a7520be 100644
--- a/src/app/form/orientation-form-view/orientation-form-view.component.html
+++ b/src/app/form/orientation-form-view/orientation-form-view.component.html
@@ -1,8 +1,5 @@
<div class="orientation" cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
<h1 class="visually-hidden">Orientation</h1>
- <div class="visually-hidden">
- <p>Utilisez <strong>f</strong> (footer) pour aller directement aux boutons de validation.</p>
- </div>
<app-progress-bar [currentPage]="currentStep" [nbSteps]="nbSteps" [formType]="formType.orientation" />
<div class="container" [ngClass]="{ 'no-max-width': fullScreen }">
<app-needs-selection *ngIf="currentStep === null" [(needType)]="needType" (validate)="validatePage(true)" />
diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.ts b/src/app/form/orientation-form-view/orientation-form-view.component.ts
index 6bf919f90d846fae20ddeef2e415831ded28a22f..a6cc58a5487bad00a94e1c864afccb281a8d1b9b 100644
--- a/src/app/form/orientation-form-view/orientation-form-view.component.ts
+++ b/src/app/form/orientation-form-view/orientation-form-view.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentChecked, ChangeDetectorRef, Component, HostListener, OnInit, ViewChild } from '@angular/core';
+import { AfterContentChecked, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
import { AbstractControl, FormGroup, UntypedFormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { lastValueFrom } from 'rxjs';
@@ -114,34 +114,6 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked
@ViewChild(NavigationComponent) navComponent!: NavigationComponent;
- // Listener, keyboard shortcuts
- @HostListener('window:keydown', ['$event'])
- handleKeyboardEvent(event: KeyboardEvent): void {
- const target = event.target as HTMLElement;
- const tagName = target.tagName.toLowerCase();
-
- // Check if the focus is within an input, textarea
- if (tagName === 'input') {
- const inputElement = target as HTMLInputElement;
- const inputType = inputElement.type.toLowerCase();
- // Ignore only text-based inputs, not others like radio, checkbox, etc.
- if (!['radio', 'checkbox', 'button', 'submit', 'reset'].includes(inputType)) {
- return;
- }
- } else if (tagName === 'textarea' || target.isContentEditable) {
- return;
- }
-
- switch (event.key) {
- case 'f': // 'f' to go to the navigation footer
- this.navComponent.focusFirstButton();
- event.preventDefault();
- break;
- default:
- break;
- }
- }
-
constructor(
public orientationService: OrientationService,
private notificationService: NotificationService,
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 2cf2d5b3aa3dcd9e9ce072ca87194369a662dc70..ed54bdc94ba53e26ced82a74247e1bd94562410e 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -235,13 +235,7 @@
<span class="name">{{ displayFullName }}</span>
</div>
<div class="profileMenuButtons">
- <app-button
- cdkFocusInitial
- [variant]="'primaryBlack'"
- [label]="'Voir mon compte'"
- [size]="'small'"
- (action)="goToProfile()"
- />
+ <app-button [variant]="'primaryBlack'" [label]="'Voir mon compte'" [size]="'small'" (action)="goToProfile()" />
<app-button [variant]="'secondary'" [label]="'Se déconnecter'" [size]="'small'" (action)="logout()" />
</div>
</div>
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 0d967edc1d227885b4e844c950b78e184b3dcb74..4cecbb99937570481cc068f70f42fd9315bc638f 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -29,7 +29,6 @@
</div>
<app-svg-icon
#closeButton
- cdkFocusInitial
[asButton]="true"
[ariaLabel]="'Fermer'"
[folder]="'ico'"