From 371e9735431409e947aaa9a59cc53a19c1635b46 Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Mon, 22 Apr 2024 06:49:46 +0000
Subject: [PATCH] fix(accessibility): Added landmark roles and accessible carto
---
src/app/admin/admin.scss | 2 +-
.../components/nav-bar/nav-bar.component.html | 4 +-
.../result-list/result-list.component.html | 3 +-
src/app/app.component.html | 6 +-
src/app/footer/footer.component.html | 4 +-
src/app/header/header.component.html | 82 ++++++++++---------
src/app/header/header.component.scss | 7 ++
src/app/map/components/map.component.ts | 2 +
src/app/map/services/map.service.ts | 10 ++-
.../post-header/post-header.component.html | 4 +-
.../post-header/post-header.component.scss | 2 +-
.../post-list/post-list.component.html | 2 +-
.../member-card/member-card.component.html | 1 +
.../components/modal/modal.component.html | 3 +-
.../components/card/card.component.html | 1 +
.../more-filters/more-filters.component.html | 2 +
.../structure-details.component.html | 3 +
.../structure-list.component.html | 32 ++++----
.../structure-list.component.scss | 8 +-
19 files changed, 104 insertions(+), 74 deletions(-)
diff --git a/src/app/admin/admin.scss b/src/app/admin/admin.scss
index 353c29664..2dc3064b9 100644
--- a/src/app/admin/admin.scss
+++ b/src/app/admin/admin.scss
@@ -1,6 +1,6 @@
@import 'color';
-header {
+.header {
padding-top: 32px;
display: flex;
flex-direction: column;
diff --git a/src/app/admin/components/nav-bar/nav-bar.component.html b/src/app/admin/components/nav-bar/nav-bar.component.html
index 994a22f5c..d03c00d6c 100644
--- a/src/app/admin/components/nav-bar/nav-bar.component.html
+++ b/src/app/admin/components/nav-bar/nav-bar.component.html
@@ -1,4 +1,4 @@
-<header>
+<div class="header">
<h1>Administration</h1>
<nav>
<app-button
@@ -34,4 +34,4 @@
/>
<app-button [variant]="'tertiary'" [label]="'Ghost'" (action)="openGhost()" />
</nav>
-</header>
+</div>
diff --git a/src/app/annuaire/result-list/result-list.component.html b/src/app/annuaire/result-list/result-list.component.html
index f24005c54..984e8962a 100644
--- a/src/app/annuaire/result-list/result-list.component.html
+++ b/src/app/annuaire/result-list/result-list.component.html
@@ -38,9 +38,10 @@
(click)="resetFilters()"
/>
</ng-container>
- <div *ngIf="userList.length" class="users">
+ <div *ngIf="userList.length" role="list" class="users">
<app-member-card
*ngFor="let user of userList"
+ role="listitem"
[member]="user"
[showAppointment]="true"
[showContactInfo]="false"
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 9c6e35adc..9adfa5413 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,5 @@
<app-header />
-<div class="app-container">
+<main class="app-container">
<div class="app-body" id="app-body" (scroll)="onScroll($event)">
<div *ngIf="loading" class="loader" aria-busy="true">
<img class="loader-gif" src="/assets/gif/loader_circle.gif" alt />
@@ -8,7 +8,7 @@
<router-outlet name="left-pane" />
<router-outlet />
</ng-container>
- <router-outlet *ngIf="!loading" name="footer" />
</div>
-</div>
+</main>
+<router-outlet *ngIf="!loading" name="footer" />
<router-outlet name="print" />
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index 58d5ad453..358806c4b 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -15,7 +15,7 @@
target="_blank"
rel="noopener noreferrer"
>
- <img class="logo-grand-lyon" src="/assets/logos/linkedin.svg" alt role="img" />
+ <img class="logo-grand-lyon" src="/assets/logos/linkedin.svg" alt />
Linkedin
</a>
<a
@@ -25,7 +25,7 @@
target="_blank"
rel="noopener noreferrer"
>
- <img class="logo-grand-lyon" src="/assets/logos/ic_metro.svg" alt role="img" />
+ <img class="logo-grand-lyon" src="/assets/logos/ic_metro.svg" alt />
<p class="metro-title" i18n>Un site de la Métropole de Lyon</p>
</a>
</div>
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 8d2327992..5d07e0752 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -42,49 +42,51 @@
(keyup.enter)="isLoggedIn ? openProfileMenu() : goToLoginPage()"
/>
</div>
- <div class="rightHeader" role="menu">
- <a routerLink="/news" role="menuitem" i18n [routerLinkActive]="'active'" [attr.aria-current]="isActive('/news')"
- >Actualités</a
- >
- <a
- routerLink="/acteurs"
- role="menuitem"
- [routerLinkActive]="'active'"
- i18n
- [attr.aria-current]="isActive('/acteurs')"
- >
- Cartographie
- </a>
- <a
- routerLink="/orientation"
- role="menuitem"
- [routerLinkActive]="'active'"
- i18n
- [attr.aria-current]="isActive('/orientation')"
- >
- Orienter un bénéficiaire
- </a>
- <a
- routerLink="/annuaire"
- role="menuitem"
- [routerLinkActive]="'active'"
- i18n
- [attr.aria-current]="isActive('/annuaire')"
- >
- Annuaire
- </a>
- <a
- *ngIf="isAdmin"
- routerLink="/admin"
- role="menuitem"
- [routerLinkActive]="'active'"
- [attr.aria-current]="isActive('/admin')"
- >Administration</a
- >
+ <div class="rightHeader">
+ <div class="menuItems" role="menu">
+ <a routerLink="/news" role="menuitem" i18n [routerLinkActive]="'active'" [attr.aria-current]="isActive('/news')"
+ >Actualités</a
+ >
+ <a
+ routerLink="/acteurs"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ i18n
+ [attr.aria-current]="isActive('/acteurs')"
+ >
+ Cartographie
+ </a>
+ <a
+ routerLink="/orientation"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ i18n
+ [attr.aria-current]="isActive('/orientation')"
+ >
+ Orienter un bénéficiaire
+ </a>
+ <a
+ routerLink="/annuaire"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ i18n
+ [attr.aria-current]="isActive('/annuaire')"
+ >
+ Annuaire
+ </a>
+ <a
+ *ngIf="isAdmin"
+ routerLink="/admin"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ [attr.aria-current]="isActive('/admin')"
+ >Administration</a
+ >
+ </div>
<app-button
*ngIf="isLoggedIn"
class="connected"
- ariaLabel="Ouvrir le menu Mon compte"
+ ariaLabel="Ouvrir le menu Mon compte - {{ displayName }}"
[variant]="'primary'"
[label]="displayName"
[size]="'small'"
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 45d9e75d5..3f11bef63 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -30,6 +30,13 @@ header {
display: flex;
align-items: center;
gap: 3vw;
+
+ .menuItems {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ gap: 3vw;
+ }
}
.connected {
box-shadow: 0px 4px 8px 0px $red-20;
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index 47f257f57..b3a425cbc 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -206,6 +206,7 @@ export class MapComponent implements OnChanges {
structure.getLat(),
structure.getLon(),
this.getMarkerType(structure),
+ structure.structureName,
structure._id,
this.buildPopup(structure),
)
@@ -279,6 +280,7 @@ export class MapComponent implements OnChanges {
mdm.geometry.getLat(),
mdm.geometry.getLon(),
MarkerType.mdm,
+ mdm.properties.nom,
null,
this.buildMdmPopUp(mdm.properties),
)
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index d96d1c1de..64013fe38 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -16,8 +16,16 @@ import {
export class MapService {
private static markersList = {};
- public createMarker(lat: number, lon: number, markerType: MarkerType, id?: string, popup?: string): Marker {
+ public createMarker(
+ lat: number,
+ lon: number,
+ markerType: MarkerType,
+ name: string,
+ id?: string,
+ popup?: string,
+ ): Marker {
const marker = new Marker([lat, lon], {
+ title: name,
icon: this.getMarkerIcon(markerType),
attribution: this.getLayerAttribution(markerType),
});
diff --git a/src/app/post/components/post-header/post-header.component.html b/src/app/post/components/post-header/post-header.component.html
index b264a381f..5ec1cb46f 100644
--- a/src/app/post/components/post-header/post-header.component.html
+++ b/src/app/post/components/post-header/post-header.component.html
@@ -1,8 +1,8 @@
<div class="section-container news">
- <header>
+ <div class="header">
<h1>Les actualités</h1>
<h2>du réseau d’inclusion numérique</h2>
- </header>
+ </div>
<nav>
<div role="tablist" class="navigation">
diff --git a/src/app/post/components/post-header/post-header.component.scss b/src/app/post/components/post-header/post-header.component.scss
index 8961971d4..4de72a4ef 100644
--- a/src/app/post/components/post-header/post-header.component.scss
+++ b/src/app/post/components/post-header/post-header.component.scss
@@ -3,7 +3,7 @@
@import 'breakpoint';
@import 'layout';
-header {
+.header {
padding-block: 2rem;
h1 {
@include font-bold-30;
diff --git a/src/app/post/components/post-list/post-list.component.html b/src/app/post/components/post-list/post-list.component.html
index ab1b98b65..2beb8bb10 100644
--- a/src/app/post/components/post-list/post-list.component.html
+++ b/src/app/post/components/post-list/post-list.component.html
@@ -5,7 +5,7 @@
</div>
<div class="posts-container" role="list">
- <app-post-card *ngFor="let news of allPosts" role="listitem" class="col" [post]="news" />
+ <app-post-card *ngFor="let post of allPosts" class="col" role="listitem" [post]="post" />
</div>
<div *ngIf="isLoading" class="loader" aria-busy="true">
diff --git a/src/app/shared/components/member-card/member-card.component.html b/src/app/shared/components/member-card/member-card.component.html
index 51d6d974a..fe07eb491 100644
--- a/src/app/shared/components/member-card/member-card.component.html
+++ b/src/app/shared/components/member-card/member-card.component.html
@@ -1,5 +1,6 @@
<div
class="structureMember"
+ role="button"
[ngClass]="{ clickable: isInteractive(), isChecked: isChecked }"
[tabindex]="isInteractive() ? '0' : '-1'"
(click)="cardClicked()"
diff --git a/src/app/shared/components/modal/modal.component.html b/src/app/shared/components/modal/modal.component.html
index eb393e445..6c3d913fe 100644
--- a/src/app/shared/components/modal/modal.component.html
+++ b/src/app/shared/components/modal/modal.component.html
@@ -4,7 +4,8 @@
<h3>{{ title }}</h3>
<app-svg-icon
tabindex="0"
- alt="Fermer la fenêtre"
+ role="button"
+ aria-label="Fermer la fenêtre"
[folder]="'ico'"
[icon]="'cross'"
[iconClass]="'icon-24 hover'"
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index 97a392c20..5e80e1438 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -1,5 +1,6 @@
<div
class="structure"
+ role="button"
[tabindex]="isInteractive() ? '0' : '-1'"
[ngClass]="{ orientation: isOrientation, interactive: isInteractive(), isChecked: isChecked }"
(click)="cardClicked()"
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 6a903bf25..9edc35ba1 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
@@ -5,6 +5,8 @@
<h3>Plus de filtres</h3>
<app-svg-icon
tabindex="0"
+ role="button"
+ aria-label="Fermer la fenêtre"
[iconClass]="'icon-24 hover'"
[iconColor]="'grey-1'"
[icon]="'cross'"
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 6ba3819f6..918053f95 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
@@ -22,7 +22,9 @@
/>
</div>
<app-svg-icon
+ role="button"
tabindex="0"
+ aria-label="Fermer"
[folder]="'ico'"
[icon]="'cross'"
[iconColor]="'grey-1'"
@@ -111,6 +113,7 @@
<a
*ngIf="!structure.deletedAt"
class="primary"
+ role="button"
tabindex="0"
(click)="toggleDeleteModal()"
(keyup.enter)="toggleDeleteModal()"
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index deb797e14..0e8363948 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -16,22 +16,24 @@
</div>
</div>
- <div id="listCard" class="listCard" role="list" (mouseleave)="mouseLeave()">
+ <div id="listCard" (mouseleave)="mouseLeave()">
<ng-container *ngIf="!isLoading">
- <app-card
- *ngFor="let structure of structureList"
- class="structure-card"
- role="listitem"
- [structure]="structure"
- [isOrientation]="isOrientation"
- [isOrientationRdv]="isOrientationRdv"
- [isSelected]="isInPrintList(structure._id)"
- (showDetails)="showDetails(structure)"
- (keyup.enter)="showDetails(structure)"
- (hover)="handleCardHover($event)"
- (addToList)="addToList($event)"
- (selectRDV)="selectRDV($event)"
- />
+ <div role="list" class="listCard">
+ <app-card
+ *ngFor="let structure of structureList"
+ class="structure-card"
+ role="listitem"
+ [structure]="structure"
+ [isOrientation]="isOrientation"
+ [isOrientationRdv]="isOrientationRdv"
+ [isSelected]="isInPrintList(structure._id)"
+ (showDetails)="showDetails(structure)"
+ (keyup.enter)="showDetails(structure)"
+ (hover)="handleCardHover($event)"
+ (addToList)="addToList($event)"
+ (selectRDV)="selectRDV($event)"
+ />
+ </div>
<p *ngIf="structureList.length === 0" class="noStructureFound">
Il n'y a aucune réponse correspondant à votre recherche
</p>
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index 7d76a8614..5ed2c5538 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/src/app/structure-list/structure-list.component.scss
@@ -22,16 +22,16 @@
gap: 16px;
padding-block: 24px;
+ .noStructureFound {
+ margin-left: 1rem;
+ }
+
.loader {
margin: auto;
}
}
}
-.noStructureFound {
- margin-left: 1rem;
-}
-
.structureListHeader {
display: flex;
flex-direction: row;
--
GitLab