From d9c3a0cbbdcdb6ff218ad86f1716bc05d32fbc91 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Tue, 19 Mar 2024 16:33:47 +0100
Subject: [PATCH 1/5] fix(accessibility) : add labels and roles to header links
and button
---
src/app/header/header.component.html | 164 +++++++++++++++---
.../components/button/button.component.html | 8 +-
.../components/button/button.component.ts | 3 +
3 files changed, 153 insertions(+), 22 deletions(-)
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index d61179a6e..ebd385184 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -3,6 +3,7 @@
<app-svg-icon
class="clickable"
tabindex="0"
+ aria-label="Ouvrir le menu"
[folder]="'ico'"
[icon]="'menu'"
[iconClass]="'icon-32'"
@@ -10,7 +11,7 @@
(keyup.enter)="openMenu()"
/>
</div>
- <div class="logo clickable" routerLink="/home" tabindex="0">
+ <div class="logo clickable" aria-label="Retour accueil" role="button" routerLink="/home" tabindex="0">
<img
*ngIf="displayLogo(); else customTitle"
class="logo-grand-lyon"
@@ -24,6 +25,7 @@
<app-svg-icon
class="clickable"
tabindex="0"
+ [attr.aria-label]="isLoggedIn ? 'Ouvrir le menu de profil' : 'Se connecter'"
[folder]="'ico'"
[icon]="'profile'"
[iconClass]="'icon-32'"
@@ -31,21 +33,49 @@
(keyup.enter)="isLoggedIn ? openProfileMenu() : goToLoginPage()"
/>
</div>
- <div class="rightHeader">
- <a routerLink="/news" [routerLinkActive]="'active'" i18n [attr.aria-current]="isActive('/news')">Actualités</a>
- <a routerLink="/acteurs" [routerLinkActive]="'active'" i18n [attr.aria-current]="isActive('/acteurs')">
+ <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" [routerLinkActive]="'active'" i18n [attr.aria-current]="isActive('/orientation')">
+ <a
+ routerLink="/orientation"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ i18n
+ [attr.aria-current]="isActive('/orientation')"
+ >
Orienter un bénéficiaire
</a>
- <a routerLink="/annuaire" [routerLinkActive]="'active'" i18n [attr.aria-current]="isActive('/annuaire')">
+ <a
+ routerLink="/annuaire"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ i18n
+ [attr.aria-current]="isActive('/annuaire')"
+ >
Annuaire
</a>
- <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'">Administration</a>
+ <a
+ *ngIf="isAdmin"
+ routerLink="/admin"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ [attr.aria-current]="isActive('/admin')"
+ >Administration</a
+ >
<app-button
*ngIf="isLoggedIn"
class="connected"
+ ariaLabel="Ouvrir le menu de profil"
[variant]="'primary'"
[label]="displayName"
[size]="'small'"
@@ -53,6 +83,7 @@
/>
<app-button
*ngIf="!isLoggedIn"
+ aria-label="Se connecter"
[variant]="'primaryBlack'"
[label]="'Se connecter'"
[size]="'small'"
@@ -61,31 +92,122 @@
</div>
</header>
-<div *ngIf="showMenu" class="mobileMenu" [@slideInOut]>
+<div *ngIf="showMenu" role="menu" class="mobileMenu" [@slideInOut]>
<div class="menuContent">
<div class="title">
<span>Menu</span>
- <div class="ico-close-details" tabindex="0" (click)="closeMenu()" (keyup.enter)="closeMenu()"></div>
+ <div
+ class="ico-close-details"
+ tabindex="0"
+ aria-label="Fermer le menu"
+ role="button"
+ (click)="closeMenu()"
+ (keyup.enter)="closeMenu()"
+ ></div>
</div>
<div class="links">
- <a routerLink="/news" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Actualités</a>
- <a routerLink="/acteurs" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Cartographie</a>
- <a routerLink="/orientation" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Orienter un bénéficiaire</a>
- <a routerLink="/annuaire" [routerLinkActive]="'active'" i18n (click)="closeMenu()">Annuaire</a>
- <a routerLink="/page/qui-sommes-nous" [routerLinkActive]="'active'" (click)="closeMenu()" i18n
+ <a
+ routerLink="/news"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ [attr.aria-current]="isActive('/news')"
+ (click)="closeMenu()"
+ i18n
+ >Actualités</a
+ >
+ <a
+ routerLink="/acteurs"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ [attr.aria-current]="isActive('/acteurs')"
+ (click)="closeMenu()"
+ i18n
+ >Cartographie</a
+ >
+ <a
+ routerLink="/orientation"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ [attr.aria-current]="isActive('/orientation')"
+ (click)="closeMenu()"
+ i18n
+ >Orienter un bénéficiaire</a
+ >
+ <a
+ routerLink="/annuaire"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ i18n
+ [attr.aria-current]="isActive('/annuaire')"
+ (click)="closeMenu()"
+ >Annuaire</a
+ >
+ <a
+ routerLink="/page/qui-sommes-nous"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ [attr.aria-current]="isActive('/page/qui-sommes-nous')"
+ i18n
+ (click)="closeMenu()"
>Qui sommes-nous ?</a
>
- <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'" (click)="closeMenu()">Administration</a>
- <a routerLink="/legal-notice" i18n [routerLinkActive]="'active'" (click)="closeMenu()">Mentions légales</a>
- <a routerLink="/newsletter" i18n [routerLinkActive]="'active'" (click)="closeMenu()">Newsletter</a>
- <a routerLink="/contact" i18n [routerLinkActive]="'active'" (click)="closeMenu()">Contact</a>
+ <a
+ *ngIf="isAdmin"
+ routerLink="/admin"
+ role="menuitem"
+ [routerLinkActive]="'active'"
+ [attr.aria-current]="isActive('/admin')"
+ (click)="closeMenu()"
+ >Administration</a
+ >
+ <a
+ routerLink="/legal-notice"
+ role="menuitem"
+ i18n
+ [routerLinkActive]="'active'"
+ [attr.aria-current]="isActive('/legal-notice')"
+ (click)="closeMenu()"
+ >Mentions légales</a
+ >
+ <a
+ routerLink="/newsletter"
+ role="menuitem"
+ i18n
+ [routerLinkActive]="'active'"
+ [attr.aria-current]="isActive('/newsletter')"
+ (click)="closeMenu()"
+ >Newsletter</a
+ >
+ <a
+ routerLink="/contact"
+ role="menuitem"
+ i18n
+ [routerLinkActive]="'active'"
+ [attr.aria-current]="isActive('/contact')"
+ (click)="closeMenu()"
+ >Contact</a
+ >
</div>
</div>
- <div class="outside" tabindex="0" (click)="closeMenu()" (keyup.enter)="closeMenu()"></div>
+ <div
+ class="outside"
+ tabindex="0"
+ aria-label="Fermer le menu"
+ role="button"
+ (click)="closeMenu()"
+ (keyup.enter)="closeMenu()"
+ ></div>
</div>
-<div *ngIf="showProfileMenu && isLoggedIn" class="profileModal" [@toggle]>
- <div class="overlay" tabindex="0" (click)="closeProfileMenu()" (keyup.enter)="closeProfileMenu()">
+<div *ngIf="showProfileMenu && isLoggedIn" class="profileModal" role="menu" [@toggle]>
+ <div
+ class="overlay"
+ tabindex="0"
+ role="button"
+ aria-label="Fermer le menu de profil"
+ (click)="closeProfileMenu()"
+ (keyup.enter)="closeProfileMenu()"
+ >
<div class="overlay-header"></div>
<div class="overlay-content" [@fadeInOut]></div>
</div>
diff --git a/src/app/shared/components/button/button.component.html b/src/app/shared/components/button/button.component.html
index a73644d7c..b2d4e1c31 100644
--- a/src/app/shared/components/button/button.component.html
+++ b/src/app/shared/components/button/button.component.html
@@ -1,4 +1,10 @@
-<button [type]="type" [ngClass]="classes" [disabled]="disabled" (click)="action.emit($event)">
+<button
+ [attr.aria-label]="ariaLabel ? ariaLabel : null"
+ [type]="type"
+ [ngClass]="classes"
+ [disabled]="disabled"
+ (click)="action.emit($event)"
+>
<app-svg-icon
*ngIf="iconName && iconPosition === 'left'"
[folder]="iconFolder"
diff --git a/src/app/shared/components/button/button.component.ts b/src/app/shared/components/button/button.component.ts
index 7b2438ca3..a05c25bce 100644
--- a/src/app/shared/components/button/button.component.ts
+++ b/src/app/shared/components/button/button.component.ts
@@ -48,6 +48,9 @@ export class ButtonComponent {
/** Icon color, defaults to none as the svg-icon does */
@Input() iconColor = 'none';
+ /** Button aria-label */
+ @Input() ariaLabel?: string;
+
/** Click handler */
@Output() action = new EventEmitter<Event>();
--
GitLab
From c45d4377fe09580b8906479afd2a73f18367739d Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Tue, 19 Mar 2024 16:40:09 +0100
Subject: [PATCH 2/5] fix(accessibility) : add labels and roles to header links
and button
---
src/app/shared/components/button/button.component.html | 2 +-
src/app/shared/components/button/button.component.ts | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/app/shared/components/button/button.component.html b/src/app/shared/components/button/button.component.html
index b2d4e1c31..98ac1d017 100644
--- a/src/app/shared/components/button/button.component.html
+++ b/src/app/shared/components/button/button.component.html
@@ -1,5 +1,5 @@
<button
- [attr.aria-label]="ariaLabel ? ariaLabel : null"
+ [attr.aria-label]="ariaLabel"
[type]="type"
[ngClass]="classes"
[disabled]="disabled"
diff --git a/src/app/shared/components/button/button.component.ts b/src/app/shared/components/button/button.component.ts
index a05c25bce..b9da4f71b 100644
--- a/src/app/shared/components/button/button.component.ts
+++ b/src/app/shared/components/button/button.component.ts
@@ -49,7 +49,7 @@ export class ButtonComponent {
@Input() iconColor = 'none';
/** Button aria-label */
- @Input() ariaLabel?: string;
+ @Input() ariaLabel?: string = null;
/** Click handler */
@Output() action = new EventEmitter<Event>();
--
GitLab
From 322eb74c56d7a084b7d26b0e93a784b718385804 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Tue, 19 Mar 2024 16:50:08 +0100
Subject: [PATCH 3/5] minor change (wording)
---
src/app/header/header.component.html | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index ebd385184..cebd674ea 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -25,7 +25,7 @@
<app-svg-icon
class="clickable"
tabindex="0"
- [attr.aria-label]="isLoggedIn ? 'Ouvrir le menu de profil' : 'Se connecter'"
+ [attr.aria-label]="isLoggedIn ? 'Ouvrir le menu Mon compte' : 'Se connecter'"
[folder]="'ico'"
[icon]="'profile'"
[iconClass]="'icon-32'"
@@ -75,7 +75,7 @@
<app-button
*ngIf="isLoggedIn"
class="connected"
- ariaLabel="Ouvrir le menu de profil"
+ ariaLabel="Ouvrir le menu Mon compte"
[variant]="'primary'"
[label]="displayName"
[size]="'small'"
@@ -204,7 +204,7 @@
class="overlay"
tabindex="0"
role="button"
- aria-label="Fermer le menu de profil"
+ aria-label="Fermer le menu Mon compte"
(click)="closeProfileMenu()"
(keyup.enter)="closeProfileMenu()"
>
--
GitLab
From 9d8870c45437cf4cb4ab10b7617aff3c009e0136 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Tue, 26 Mar 2024 15:52:07 +0100
Subject: [PATCH 4/5] add role to svg with aria-label + action
---
src/app/header/header.component.html | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index cebd674ea..13dd02e4c 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -3,6 +3,7 @@
<app-svg-icon
class="clickable"
tabindex="0"
+ role="button"
aria-label="Ouvrir le menu"
[folder]="'ico'"
[icon]="'menu'"
@@ -25,6 +26,7 @@
<app-svg-icon
class="clickable"
tabindex="0"
+ role="button"
[attr.aria-label]="isLoggedIn ? 'Ouvrir le menu Mon compte' : 'Se connecter'"
[folder]="'ico'"
[icon]="'profile'"
--
GitLab
From 159737782a6c6e686306fbcbf782951204b1472d Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Wed, 27 Mar 2024 09:58:17 +0100
Subject: [PATCH 5/5] fix typo
---
src/app/header/header.component.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 13dd02e4c..abf1a45d7 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -85,7 +85,7 @@
/>
<app-button
*ngIf="!isLoggedIn"
- aria-label="Se connecter"
+ ariaLabel="Se connecter"
[variant]="'primaryBlack'"
[label]="'Se connecter'"
[size]="'small'"
--
GitLab