From e0a2dca44f3eadedcf39541ba59cd3120f78d3da Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Thu, 29 Aug 2024 13:50:06 +0200
Subject: [PATCH 1/4] Removed shortcut f, NVDA already has ',' to go to the end
of a list
---
.../navigation/navigation.component.html | 2 --
.../navigation/navigation.component.ts | 14 +--------
.../orientation-form-view.component.html | 3 --
.../orientation-form-view.component.ts | 30 +------------------
4 files changed, 2 insertions(+), 47 deletions(-)
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 a8121829c..448826ffa 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 05758e934..1fc2f7195 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 275900e98..a9e0be602 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 6bf919f90..a6cc58a54 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,
--
GitLab
From f0e395f023fde6e56aea0451c449913b97f19961 Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Fri, 30 Aug 2024 10:14:55 +0200
Subject: [PATCH 2/4] Updated shortcut
---
src/app/app.component.html | 2 +-
src/app/app.component.ts | 26 ++++----------------------
2 files changed, 5 insertions(+), 23 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index ed0f494f8..f066c1540 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 au logo Res'in à 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 3d629e84e..a750bb6fc 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();
}
}
--
GitLab
From cc9a9108af6fea2e26120b50215c64f0b5f71daf Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Fri, 30 Aug 2024 14:52:09 +0200
Subject: [PATCH 3/4] Added account-info
---
src/app/form/form-view/form-view.component.html | 2 +-
src/app/form/form-view/form-view.module.ts | 3 ++-
src/app/header/header.component.html | 8 +-------
.../structure-details/structure-details.component.html | 1 -
4 files changed, 4 insertions(+), 10 deletions(-)
diff --git a/src/app/form/form-view/form-view.component.html b/src/app/form/form-view/form-view.component.html
index 052a59bcb..3387e4b9c 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 99807f0e5..d74d10215 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/header/header.component.html b/src/app/header/header.component.html
index 2cf2d5b3a..ed54bdc94 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 0d967edc1..4cecbb999 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'"
--
GitLab
From 1b23844d6b937ffd49368474379031a1aec7f5b1 Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Thu, 5 Sep 2024 15:21:38 +0000
Subject: [PATCH 4/4] Updated shortcut text
---
src/app/app.component.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index f066c1540..948726be2 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>ESC</strong> 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">
--
GitLab