diff --git a/src/app/annuaire/filter-modal/filter-modal.component.html b/src/app/annuaire/filter-modal/filter-modal.component.html index 5031c5b066464b4fa47cd546d7e4c959b3baa6ee..56163e779550ecaa15e9715ae59c3add85a9d0a6 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 5a112acbb32f0ed00e61c7c64f2cef20d1e07d22..152027e06beca7af38d8b4537cb855e790b65248 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 1a94130e2f5cd9285e97c244ee4a89b4590074e5..13dde9e44994d9f6c656efbc3ee10cbf1c3e2f3c 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 c79ef667094bd0d953488d231a83c5afada1ef96..681a013e9f8e42fd510b4189e8505bd891038dd5 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 d3a639bf201112ef31a225c9229cfbb0b61353a6..1a4ac7f1c5926f4929ed2f1ed706fbe7802b98bc 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 9a5c736eb3fc75703677789371def014ec7e3c0e..7ebc8d9dc22b0a8c764f8da335737b788899e5dc 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 0078cd1529fb42cf59d66dd5317befe9624d01ea..eb17607402804c462e530c874ceadbce29723f74 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 81f6046b0905a1e696b0ccfcb10b21c8ac565918..553dfefec739fc4b674ee2cc4ef9ec5d079b0a49 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 c2185f1c7cd973795887d9cb04675a0cfccb2019..17d7e6d70e490579f76c744f3ac2a179a37e0584 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 04cc9244c4f6dbc1fc0e081708629f001cb6e69d..7e25394b760a332e8eeb89fdb9e6edaddea4647e 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 75c95e42854a66c8b70efa9bcb887a24771db14d..21e02b156392bc40b7e33a413c220171c9196eb3 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 ec62e8b0eca3ac44886547d2e53bba80fbbb25b5..9683c91c00c384c7b30fc43dc74015538d4cb4e5 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 03741b86b4b44b34d0a7de2426e160e051a15da8..a62a4c18e3dc67bd7c965d12c9b11d258fe81a71 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 9edc35ba14222eb2cd09d5de00cd9bd8579a958c..8c8dd97c7a185a32ce8b40e0cba6dcb1cdc6b1cb 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 c8af2c9b6f2845f1d28293c2826244e4c5749b01..07de0821525f0e3ad58a2d08bba18b9f71619ad6 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 9c0aeeabd55b009a5680abbd3af9f2ae6a5c6538..15dbc16dba89638e639c4050e703db046ab1f3fb 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; }