From 9bbb4cad5a733adbb6a1e0f114e5fb7869a0f83f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marl=C3=A8ne=20SIMONDANT?= <msimondant@grandlyon.com>
Date: Mon, 29 Apr 2024 09:08:35 +0000
Subject: [PATCH] fix(Accessibility): explain carto filters for screen readers
---
.../filter-modal/filter-modal.component.html | 7 ++-
.../result-list/result-list.component.ts | 8 ++--
.../structure-access-modality.component.html | 1 +
.../structure-consent.component.html | 2 +
.../structure-labels.component.html | 1 +
.../checkbox-form.component.html | 4 +-
.../checkbox-form.component.scss | 2 +-
.../checkbox-form/checkbox-form.component.ts | 1 +
.../checkbox/checkbox.component.html | 1 -
.../components/checkbox/checkbox.component.ts | 2 +-
.../collapsable-filter.component.html | 3 +-
.../collapse-header.component.ts | 1 +
.../training-type-picker.component.html | 8 +++-
.../more-filters/more-filters.component.html | 10 +++-
.../structure-list-search.component.html | 16 ++++++-
.../structure-list-search.component.ts | 47 ++++++++++++++++++-
16 files changed, 98 insertions(+), 16 deletions(-)
diff --git a/src/app/annuaire/filter-modal/filter-modal.component.html b/src/app/annuaire/filter-modal/filter-modal.component.html
index 5031c5b06..56163e779 100644
--- a/src/app/annuaire/filter-modal/filter-modal.component.html
+++ b/src/app/annuaire/filter-modal/filter-modal.component.html
@@ -12,7 +12,12 @@
</div>
<div class="modalFooter">
- <app-button [variant]="'secondary'" [label]="'Effacer'" (action)="clearFilters()" />
+ <app-button
+ [variant]="'secondary'"
+ [label]="'Effacer'"
+ [ariaLabel]="'Effacer et fermer'"
+ (action)="clearFilters()"
+ />
<app-button [variant]="'primary'" [label]="'Appliquer'" (action)="onSubmitFilters()" />
</div>
</div>
diff --git a/src/app/annuaire/result-list/result-list.component.ts b/src/app/annuaire/result-list/result-list.component.ts
index 5a112acbb..152027e06 100644
--- a/src/app/annuaire/result-list/result-list.component.ts
+++ b/src/app/annuaire/result-list/result-list.component.ts
@@ -35,9 +35,9 @@ export class ResultListComponent implements OnChanges, AfterViewInit {
public nextChildIndex: number;
ngAfterViewInit(): void {
- requestAnimationFrame(() => {
+ setTimeout(() => {
document.getElementById('app-body')?.scrollTo({ top: this.windowScrollService.scrollYToPreserve.value });
- });
+ }, 10);
}
ngOnChanges(changes: SimpleChanges): void {
@@ -48,9 +48,9 @@ export class ResultListComponent implements OnChanges, AfterViewInit {
// Accessibility: after click on "view more" button, send focus to the first newly displayed member card
if (this.keyboardEvent && this.nextChildIndex) {
- requestAnimationFrame(() => {
+ setTimeout(() => {
this.setFocusOnFirstNewMemberCard();
- });
+ }, 0);
}
}
public goToUser(userId: string): void {
diff --git a/src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html b/src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html
index 1a94130e2..13dde9e44 100644
--- a/src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html
+++ b/src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.html
@@ -13,6 +13,7 @@
<app-checkbox-form
*ngFor="let module of accessModality.modules"
[isChecked]="isInArray('accessModality', module.id)"
+ [id]="module.id"
[text]="module.name"
[iconSvg]="module.id"
(checkEvent)="onCheckChange($event, 'categories.accessModality', module.id)"
diff --git a/src/app/form/form-view/structure-form/structure-consent/structure-consent.component.html b/src/app/form/form-view/structure-form/structure-consent/structure-consent.component.html
index c79ef6670..681a013e9 100644
--- a/src/app/form/form-view/structure-form/structure-consent/structure-consent.component.html
+++ b/src/app/form/form-view/structure-form/structure-consent/structure-consent.component.html
@@ -8,6 +8,7 @@
</div>
<app-checkbox-form
text="J’accepte que mes informations soient enregistrées"
+ id="acceptDataBeSaved"
(checkEvent)="acceptDataBeSaved($event)"
/>
</div>
@@ -24,6 +25,7 @@
<app-checkbox-form
*ngIf="!isEditMode"
text="J’accepte de partager les données de ma structure"
+ [id]="'acceptOpenData'"
[isChecked]="false"
(checkEvent)="acceptOpenData($event)"
/>
diff --git a/src/app/form/form-view/structure-form/structure-labels/structure-labels.component.html b/src/app/form/form-view/structure-form/structure-labels/structure-labels.component.html
index d3a639bf2..1a4ac7f1c 100644
--- a/src/app/form/form-view/structure-form/structure-labels/structure-labels.component.html
+++ b/src/app/form/form-view/structure-form/structure-labels/structure-labels.component.html
@@ -8,6 +8,7 @@
<app-checkbox-form
*ngFor="let module of labelsQualifications.modules.sort()"
[isChecked]="isInArray(module.id, 'labelsQualifications')"
+ [id]="module.id"
[text]="module.name"
[iconSvg]="module.id"
[iconType]="'labels'"
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.html b/src/app/shared/components/checkbox-form/checkbox-form.component.html
index 9a5c736eb..7ebc8d9dc 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.html
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.html
@@ -1,9 +1,9 @@
<div class="checkbox" tabindex="-1" [ngClass]="{ selected: isChecked }" (click)="clicked()" (keydown.enter)="clicked()">
- <app-checkbox [checked]="isChecked" />
+ <app-checkbox [checked]="isChecked" [id]="id" />
<svg *ngIf="iconSvg" aria-hidden="true" class="icon" [ngClass]="iconType">
<use [attr.xlink:href]="'assets/form/sprite.svg#' + iconSvg" />
</svg>
- <p id="checkboxLabel">{{ text }}</p>
+ <label for="{{ id }}">{{ text }}</label>
</div>
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.scss b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
index 0078cd152..eb1760740 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.scss
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.scss
@@ -22,7 +22,7 @@ div.checkbox {
min-width: 44px;
}
- p {
+ label {
@include font-bold-16;
color: $grey-1;
text-align: left;
diff --git a/src/app/shared/components/checkbox-form/checkbox-form.component.ts b/src/app/shared/components/checkbox-form/checkbox-form.component.ts
index 81f6046b0..553dfefec 100644
--- a/src/app/shared/components/checkbox-form/checkbox-form.component.ts
+++ b/src/app/shared/components/checkbox-form/checkbox-form.component.ts
@@ -6,6 +6,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
styleUrls: ['./checkbox-form.component.scss'],
})
export class CheckboxFormComponent {
+ @Input({ required: true }) public id: string;
@Input() public isChecked = false;
@Input() public text: string;
@Input() public iconSvg: string;
diff --git a/src/app/shared/components/checkbox/checkbox.component.html b/src/app/shared/components/checkbox/checkbox.component.html
index c2185f1c7..17d7e6d70 100644
--- a/src/app/shared/components/checkbox/checkbox.component.html
+++ b/src/app/shared/components/checkbox/checkbox.component.html
@@ -5,6 +5,5 @@
[checked]="checked"
[indeterminate]="indeterminate"
[disabled]="disabled"
- [attr.aria-labelledby]="'checkboxLabel'"
(click)="action.emit($event)"
/>
diff --git a/src/app/shared/components/checkbox/checkbox.component.ts b/src/app/shared/components/checkbox/checkbox.component.ts
index 04cc9244c..7e25394b7 100644
--- a/src/app/shared/components/checkbox/checkbox.component.ts
+++ b/src/app/shared/components/checkbox/checkbox.component.ts
@@ -7,7 +7,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
})
export class CheckboxComponent {
/** HTML id associated with for */
- @Input() id: string;
+ @Input({ required: true }) id: string;
/** Checked ? */
@Input({ required: true }) checked: boolean;
diff --git a/src/app/shared/components/collapsable-filter/collapsable-filter.component.html b/src/app/shared/components/collapsable-filter/collapsable-filter.component.html
index 75c95e428..21e02b156 100644
--- a/src/app/shared/components/collapsable-filter/collapsable-filter.component.html
+++ b/src/app/shared/components/collapsable-filter/collapsable-filter.component.html
@@ -1,6 +1,7 @@
<button
type="button"
- [attr.aria-label]="'Déplier les filtres : ' + label"
+ aria-haspopup="true"
+ [attr.aria-label]="label + 'Déplier les filtres : '"
[ngClass]="{
expanded: expanded,
active: active
diff --git a/src/app/shared/components/collapse/collapse-header/collapse-header.component.ts b/src/app/shared/components/collapse/collapse-header/collapse-header.component.ts
index ec62e8b0e..9683c91c0 100644
--- a/src/app/shared/components/collapse/collapse-header/collapse-header.component.ts
+++ b/src/app/shared/components/collapse/collapse-header/collapse-header.component.ts
@@ -5,6 +5,7 @@ import { Component, EventEmitter, Output } from '@angular/core';
template: `<div
class="collapse-header"
role="button"
+ aria-haspopup="true"
tabindex="0"
[ngClass]="size"
(click)="toggle.emit()"
diff --git a/src/app/shared/components/training-type-picker/training-type-picker.component.html b/src/app/shared/components/training-type-picker/training-type-picker.component.html
index 03741b86b..a62a4c18e 100644
--- a/src/app/shared/components/training-type-picker/training-type-picker.component.html
+++ b/src/app/shared/components/training-type-picker/training-type-picker.component.html
@@ -4,10 +4,16 @@
<div class="collapseHeader">
<app-checkbox
[checked]="getCategoryCheckboxStatus(category) === 'checked'"
+ [id]="category.id"
[indeterminate]="getCategoryCheckboxStatus(category) === 'halfChecked'"
(action)="pickAllCategory(category); $event.stopPropagation()"
/>
- <span class="titleCollapse">{{ category.name }}</span>
+ <label
+ class="titleCollapse"
+ for="{{ category.id }}"
+ [attr.aria-label]="category.name + '. Cocher pour tout sélectionner'"
+ >{{ category.name }}</label
+ >
</div>
</app-collapse-header>
<app-collapse-content>
diff --git a/src/app/structure-list/components/more-filters/more-filters.component.html b/src/app/structure-list/components/more-filters/more-filters.component.html
index 9edc35ba1..8c8dd97c7 100644
--- a/src/app/structure-list/components/more-filters/more-filters.component.html
+++ b/src/app/structure-list/components/more-filters/more-filters.component.html
@@ -33,11 +33,12 @@
<div class="collapseHeader">
<app-checkbox
[size]="'medium'"
+ [id]="c.id"
[checked]="getCategoryCheckboxStatus(c) === 'checked'"
[indeterminate]="getCategoryCheckboxStatus(c) === 'halfChecked'"
(action)="handleCategoryCheckBox($event, c); $event.stopPropagation()"
/>
- <span>{{ c.name }}</span>
+ <label for="{{ c.id }}" [attr.aria-label]="c.name + '. Cocher pour tout sélectionner'">{{ c.name }}</label>
</div>
</app-collapse-header>
<app-collapse-content>
@@ -55,7 +56,12 @@
</app-collapse>
</div>
<div class="modalFooter">
- <app-button [variant]="'secondary'" [label]="'Effacer'" (action)="clearFilters()" />
+ <app-button
+ [variant]="'secondary'"
+ [label]="'Effacer'"
+ [ariaLabel]="'Effacer et fermer'"
+ (action)="clearFilters()"
+ />
<app-button [variant]="'primary'" [label]="'Appliquer'" (action)="emitModules(checkedModules)" />
</div>
</div>
diff --git a/src/app/structure-list/components/structure-list-search/structure-list-search.component.html b/src/app/structure-list/components/structure-list-search/structure-list-search.component.html
index c8af2c9b6..07de08215 100644
--- a/src/app/structure-list/components/structure-list-search/structure-list-search.component.html
+++ b/src/app/structure-list/components/structure-list-search/structure-list-search.component.html
@@ -5,26 +5,34 @@
<app-collapsable-filter
[label]="'Démarches en ligne'"
[expanded]="modalTypeOpened === TypeModal.accompaniment"
+ [id]="'modal' + TypeModal.accompaniment"
[active]="numberAccompanimentChecked > 0"
(toggle)="openModal(TypeModal.accompaniment)"
+ (keyup)="onKeyboardNavOnFilters($event)"
/>
<app-collapsable-filter
[label]="'Compétences numériques'"
[expanded]="modalTypeOpened === TypeModal.training"
+ [id]="'modal' + TypeModal.training"
[active]="numberTrainingChecked > 0"
(toggle)="openModal(TypeModal.training)"
+ (keyup)="onKeyboardNavOnFilters($event)"
/>
<app-collapsable-filter
[label]="'Public'"
[expanded]="modalTypeOpened === TypeModal.public"
+ [id]="'modal' + TypeModal.public"
[active]="numberPublicChecked > 0"
(toggle)="openModal(TypeModal.public)"
+ (keyup)="onKeyboardNavOnFilters($event)"
/>
<app-collapsable-filter
[label]="'Matériel & wifi'"
[expanded]="modalTypeOpened === TypeModal.equipments"
+ [id]="'modal' + TypeModal.equipments"
[active]="numberEquipmentChecked > 0"
(toggle)="openModal(TypeModal.equipments)"
+ (keyup)="onKeyboardNavOnFilters($event)"
/>
<app-checkbox-filter
[module]="{
@@ -43,7 +51,12 @@
[checked]="searchService.getIndex(checkedModulesFilter, 'accesLibre', 'accessModality') > -1"
(toggle)="externalCheckboxCheck($event)"
/>
- <app-button [variant]="'tertiary'" [label]="'Plus de filtres'" (action)="openModal(TypeModal.moreFilters)" />
+ <app-button
+ [variant]="'tertiary'"
+ [label]="'Plus de filtres'"
+ [id]="'modal' + TypeModal.moreFilters"
+ (action)="openModal(TypeModal.moreFilters)"
+ />
<div *ngIf="modalTypeOpened">
<app-more-filters
[modalType]="modalTypeOpened"
@@ -51,6 +64,7 @@
[modules]="checkedModulesFilter"
(searchEvent)="fetchResults($event)"
(closeEvent)="closeModal()"
+ (keyup)="onKeyboardNavOnFilters($event)"
/>
</div>
</div>
diff --git a/src/app/structure-list/components/structure-list-search/structure-list-search.component.ts b/src/app/structure-list/components/structure-list-search/structure-list-search.component.ts
index 9c0aeeabd..15dbc16db 100644
--- a/src/app/structure-list/components/structure-list-search/structure-list-search.component.ts
+++ b/src/app/structure-list/components/structure-list-search/structure-list-search.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Utils } from '../../../utils/utils';
import { Theme } from '../../enum/themes.enum';
@@ -38,12 +38,14 @@ export class StructureListSearchComponent implements OnInit {
public prmAdded = false;
public hasUrlParams = false;
+ public keyboardEvent = false;
constructor(
public searchService: SearchService,
private activatedRoute: ActivatedRoute,
private route: ActivatedRoute,
private router: Router,
+ private elementRef: ElementRef,
) {}
ngOnInit(): void {
this.searchInput = this.activatedRoute.snapshot.queryParamMap.get('query');
@@ -177,10 +179,53 @@ export class StructureListSearchComponent implements OnInit {
this.closeModal();
} else if (this.modalTypeOpened !== modalType) {
this.modalTypeOpened = modalType;
+
+ // Accessibility: when navigating with keyboard and opening a filter modal, send focus to the first focusable element of the opened modal
+ if (this.keyboardEvent) {
+ this.setFocusOnOpenedModal();
+ }
+ }
+ }
+
+ // When filters and their modal are in the same component, we can remove onKeyboardNavOnFilters, setFocusOnOpenedModal, and setFocusOnFilters.
+ // because the focus will then flow normally between the filter and the modal
+ public onKeyboardNavOnFilters(event: KeyboardEvent): void {
+ switch (event.key) {
+ case 'ArrowUp':
+ case 'ArrowDown':
+ case 'Tab':
+ this.keyboardEvent = true;
+ break;
+ }
+ }
+
+ private setFocusOnOpenedModal(): void {
+ setTimeout(() => {
+ const modalFirstFocusableElement = this.elementRef.nativeElement.querySelector(
+ `.modalContent input, .modalContent button`,
+ );
+ if (modalFirstFocusableElement) {
+ const focusedElement = modalFirstFocusableElement as HTMLElement;
+ focusedElement.focus();
+ }
+ }, 0);
+ }
+
+ private setFocusOnFilter(): void {
+ const filterButton = this.elementRef.nativeElement.querySelector(
+ '#modal' + this.modalTypeOpened + ' button:first-of-type',
+ );
+ if (filterButton) {
+ const focusedElement = filterButton as HTMLElement;
+ focusedElement.focus();
}
}
public closeModal(): void {
+ // Accessibility: when navigating with keyboard and closing a filter modal, send focus back to filters
+ if (this.keyboardEvent) {
+ this.setFocusOnFilter();
+ }
this.modalTypeOpened = undefined;
}
--
GitLab