From 62016ed929fd2ffc578ccd4649b52ca3223d5168 Mon Sep 17 00:00:00 2001 From: Pierre Ecarlat <pecarlat@grandlyon.com> Date: Fri, 14 Mar 2025 10:12:18 +0000 Subject: [PATCH] fix: nvda focus --- src/app/carto/carto.component.html | 9 ++++++++- .../navigation/navigation.component.html | 2 +- .../orientation-form-view.component.html | 6 +++--- .../orientation-form-view.component.ts | 9 +++++---- 4 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/app/carto/carto.component.html b/src/app/carto/carto.component.html index 929cb0409..b533a2787 100644 --- a/src/app/carto/carto.component.html +++ b/src/app/carto/carto.component.html @@ -1,11 +1,18 @@ <div class="content-container no-pt" [ngClass]="{ orientationHeight: isOrientationForm }"> <h1 class="visually-hidden">Cartographie</h1> <div class="hide-on-print"> - <app-structure-list-search [filters]="filters" (searchEvent)="getStructures($event)" /> + <app-structure-list-search + role="region" + aria-label="Filtres" + [filters]="filters" + (searchEvent)="getStructures($event)" + /> </div> <div class="panes-container"> <app-structure-list class="left-pane" + role="region" + aria-label="Liste des structures" [structureList]="structures" [isLoading]="isLoadingStructures" [selectedStructureList]="structuresSelected" 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 448826ffa..962721abb 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 @@ -1,4 +1,4 @@ -<div class="footerForm"> +<div class="footerForm" role="region" aria-label="Boutons de navigation"> <ng-container *ngIf="!failedOrientation"> <app-button *ngIf="showPrevButton()" 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 b02627584..f62897c72 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,9 +1,9 @@ -<div class="orientation" cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> - <h1 class="visually-hidden">Orientation</h1> +<div class="orientation" aria-live="polite" cdkTrapFocus [cdkTrapFocusAutoCapture]="true"> + <h1 class="visually-hidden" id="pageTitle" tabindex="-1">Orientation</h1> <div *ngIf="!isLogged" class="notConnected"> <img src="../../assets/form/profileSkip.svg" alt="" /> - <div class="count" aria-live="polite"> + <div class="count"> <p>Connectez vous pour accéder à cette page !</p> </div> <div class="access"> 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 4c0fdc3f9..bd5c4d59d 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, OnInit, ViewChild } from '@angular/core'; +import { AfterContentChecked, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { AbstractControl, FormGroup, UntypedFormGroup } from '@angular/forms'; import { Router } from '@angular/router'; import { lastValueFrom } from 'rxjs'; @@ -28,7 +28,6 @@ import { OnlineMediationSteps, StructuresListSteps, } from './enums/orientation.enums'; -import { NavigationComponent } from './global-components/navigation/navigation.component'; import { FiltersForm } from './interfaces/filtersForm.interface'; import { IOrientation } from './interfaces/orientation.interface'; import { @@ -114,8 +113,6 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked public showConfirmationModal = false; private resolve: CanExitResolver; - @ViewChild(NavigationComponent) navComponent!: NavigationComponent; - constructor( public orientationService: OrientationService, private notificationService: NotificationService, @@ -165,6 +162,10 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked public validatePage(event: boolean): void { this.isPageValid = event; + const mainHeader = document.querySelector('#pageTitle'); + if (mainHeader) { + (mainHeader as HTMLElement)?.focus(); + } } public setFailedOrientation(): void { -- GitLab