From 8e2fe912fe428e6ad03adddacde9181d35e961e5 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Tue, 26 Mar 2024 16:03:34 +0100
Subject: [PATCH 1/2] fix(accessibility): add aria-label to iconButton
---
.../structure-equipments.component.html | 4 ++++
src/app/profile/edit/edit.component.html | 1 +
.../personal-offer-edition.component.html | 1 +
.../personal-offer.component.html | 1 +
.../profile-structure.component.html | 3 +++
src/app/profile/profile.component.html | 2 ++
.../structure-edition-summary.component.html | 20 +++++++++++++++++++
.../button/icon-button/IconButton.stories.ts | 1 +
.../icon-button/icon-button.component.html | 8 +++++++-
.../icon-button/icon-button.component.ts | 3 +++
.../search-bar/search-bar.component.html | 1 +
.../components/card/card.component.html | 1 +
12 files changed, 45 insertions(+), 1 deletion(-)
diff --git a/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html b/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html
index 74e849910..4b5e67465 100644
--- a/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html
+++ b/src/app/form/form-view/structure-form/structure-equipments/structure-equipments.component.html
@@ -12,6 +12,7 @@
<div class="inputSection">
<ng-container *ngIf="equipment.module.id === 'computer'">
<app-icon-button
+ ariaLabel="Moins"
[variant]="'primaryBlack'"
[iconName]="'minus'"
[iconColor]="'currentColor'"
@@ -32,6 +33,7 @@
</ng-container>
<ng-container *ngIf="equipment.module.id === 'printer'">
<app-icon-button
+ ariaLabel="Moins"
[variant]="'primaryBlack'"
[iconName]="'minus'"
[iconColor]="'currentColor'"
@@ -52,6 +54,7 @@
</ng-container>
<ng-container *ngIf="equipment.module.id === 'scanner'">
<app-icon-button
+ ariaLabel="Moins"
[variant]="'primaryBlack'"
[iconName]="'minus'"
[iconColor]="'currentColor'"
@@ -71,6 +74,7 @@
/>
</ng-container>
<app-icon-button
+ ariaLabel="Plus"
[variant]="'primaryBlack'"
[iconName]="'plus'"
[iconColor]="'currentColor'"
diff --git a/src/app/profile/edit/edit.component.html b/src/app/profile/edit/edit.component.html
index d996a8b6e..0ea7c9266 100644
--- a/src/app/profile/edit/edit.component.html
+++ b/src/app/profile/edit/edit.component.html
@@ -16,6 +16,7 @@
(action)="showDeleteAccountModal()"
/>
<app-icon-button
+ ariaLabel="Supprimer mon compte"
class="hide-on-desktop"
[variant]="'secondaryDelete'"
[iconName]="'delete'"
diff --git a/src/app/profile/personal-offer-edition/personal-offer-edition.component.html b/src/app/profile/personal-offer-edition/personal-offer-edition.component.html
index 607c7bcf8..45995a07e 100644
--- a/src/app/profile/personal-offer-edition/personal-offer-edition.component.html
+++ b/src/app/profile/personal-offer-edition/personal-offer-edition.component.html
@@ -18,6 +18,7 @@
(action)="showDeleteOfferModal()"
/>
<app-icon-button
+ ariaLabel="Supprimer mon offre"
class="hide-on-desktop"
[variant]="'secondaryDelete'"
[iconName]="'delete'"
diff --git a/src/app/profile/profile-structure/personal-offer/personal-offer.component.html b/src/app/profile/profile-structure/personal-offer/personal-offer.component.html
index 706d5f689..c5c545d16 100644
--- a/src/app/profile/profile-structure/personal-offer/personal-offer.component.html
+++ b/src/app/profile/profile-structure/personal-offer/personal-offer.component.html
@@ -14,6 +14,7 @@
/>
<app-icon-button
*ngIf="!isPublic"
+ ariaLabel="Modifier mon offre"
class="hide-on-desktop"
routerLink="./edit-personal-offer/{{ this.personalOffer._id }}"
[variant]="'secondary'"
diff --git a/src/app/profile/profile-structure/profile-structure.component.html b/src/app/profile/profile-structure/profile-structure.component.html
index 53360044c..d32bc5cbf 100644
--- a/src/app/profile/profile-structure/profile-structure.component.html
+++ b/src/app/profile/profile-structure/profile-structure.component.html
@@ -56,6 +56,7 @@
[queryParams]="{ id: structure._id }"
/>
<app-icon-button
+ ariaLabel="Voir la structure"
class="hide-on-desktop"
routerLink="./"
tabindex="none"
@@ -77,6 +78,7 @@
/>
<app-icon-button
*ngIf="!isPublic && !isPending"
+ ariaLabel="Modifier la structure"
class="hide-on-desktop"
tabindex="none"
routerLink="./edit-structure/{{ structure._id }}"
@@ -124,6 +126,7 @@
/>
<app-icon-button
*ngIf="!isPublic && !isPending"
+ ariaLabel="Gérer les membres"
class="hide-on-desktop"
routerLink="./structure-members-management/{{ structure._id }}"
[routerLinkActive]="'active'"
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
index 50cbe8930..5e7c91a9f 100644
--- a/src/app/profile/profile.component.html
+++ b/src/app/profile/profile.component.html
@@ -33,6 +33,7 @@
/>
<app-icon-button
*ngIf="!isPublic"
+ ariaLabel="Modifier mon profil"
class="hide-on-desktop"
tabindex="none"
routerLink="/profile/edit"
@@ -103,6 +104,7 @@
/>
<app-icon-button
*ngIf="userProfile.structuresLink.length > 0"
+ ariaLabel="Gérer mes structures"
class="hide-on-desktop"
tabindex="none"
routerLink="./structures-management"
diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
index f0b012b06..3f69a7e60 100644
--- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
+++ b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
@@ -26,6 +26,7 @@
(action)="goToEdit(structureFormStep.structureNameAndAddress)"
/>
<app-icon-button
+ ariaLabel="Modifier le nom et l'adresse"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -63,6 +64,7 @@
(action)="goToEdit(structureFormStep.structureType)"
/>
<app-icon-button
+ ariaLabel="Modifier le type de structure"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -92,6 +94,7 @@
(action)="goToEdit(structureFormStep.structureDescription)"
/>
<app-icon-button
+ ariaLabel="Modifier la description"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -119,6 +122,7 @@
(action)="goToEdit(structureFormStep.structureContact)"
/>
<app-icon-button
+ ariaLabel="Modifier le téléphone et email"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -155,6 +159,7 @@
(action)="goToEdit(structureFormStep.structureWebAndSocialNetwork)"
/>
<app-icon-button
+ ariaLabel="Modifier la présence sur internet"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -238,6 +243,7 @@
(action)="goToEdit(structureFormStep.structureHours)"
/>
<app-icon-button
+ ariaLabel="Modifier les horaires"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -271,6 +277,7 @@
(action)="goToEdit(structureFormStep.structureDigitalHelpingAccompaniment)"
/>
<app-icon-button
+ ariaLabel="Modifier les aides aux démarches en ligne"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -309,6 +316,7 @@
(action)="goToEdit(structureFormStep.structureDigitalHelpingAccompanimentOther)"
/>
<app-icon-button
+ ariaLabel="Modifier les autres démarches en ligne"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -336,6 +344,7 @@
(action)="goToEdit(structureFormStep.structureTrainingType)"
/>
<app-icon-button
+ ariaLabel="Modifier les accompagnements aux usages numériques"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -403,6 +412,7 @@
(action)="goToEdit(structureFormStep.structureTrainingPrice)"
/>
<app-icon-button
+ ariaLabel="Modifier la gratuité des accompagnements aux usages numériques"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -427,6 +437,7 @@
(action)="goToEdit(structureFormStep.structureWifi)"
/>
<app-icon-button
+ ariaLabel="Modifier l'accès au wifi"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -452,6 +463,7 @@
(action)="goToEdit(structureFormStep.structureEquipments)"
/>
<app-icon-button
+ ariaLabel="Modifier le matériel en accès libre"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -494,6 +506,7 @@
(action)="goToEdit(structureFormStep.structureSolidarityMaterial)"
/>
<app-icon-button
+ ariaLabel="Modifier l'achat de matériel à tarif solidaire"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -525,6 +538,7 @@
(action)="goToEdit(structureFormStep.structureAccessModality)"
/>
<app-icon-button
+ ariaLabel="Modifier les modalités d'accès"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -559,6 +573,7 @@
(action)="goToEdit(structureFormStep.structurePublicTarget)"
/>
<app-icon-button
+ ariaLabel="Modifier les publics accueillis"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -594,6 +609,7 @@
(action)="goToEdit(structureFormStep.structurePublicTargetOptional)"
/>
<app-icon-button
+ ariaLabel="Modifier les publics spécifiques admis"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -664,6 +680,7 @@
(action)="goToEdit(structureFormStep.structurePmr)"
/>
<app-icon-button
+ ariaLabel="Modifier l'accessibilité pour les personnes à mobilité réduite"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -690,6 +707,7 @@
(action)="goToManageMembers()"
/>
<app-icon-button
+ ariaLabel="Modifier les membres"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -715,6 +733,7 @@
(action)="goToEdit(structureFormStep.structureLabels)"
/>
<app-icon-button
+ ariaLabel="Modifier la labellisation"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
@@ -744,6 +763,7 @@
(action)="goToEdit(structureFormStep.structureConsent)"
/>
<app-icon-button
+ ariaLabel="Modifier le partage de données sur data.grandlyon.com"
class="hide-on-desktop"
[variant]="'secondary'"
[iconName]="'edit'"
diff --git a/src/app/shared/components/button/icon-button/IconButton.stories.ts b/src/app/shared/components/button/icon-button/IconButton.stories.ts
index 18cff3dfb..cc1696dc6 100644
--- a/src/app/shared/components/button/icon-button/IconButton.stories.ts
+++ b/src/app/shared/components/button/icon-button/IconButton.stories.ts
@@ -27,6 +27,7 @@ export const Primary: Story = {
disabled: false,
iconFolder: 'ico',
iconName: 'edit',
+ ariaLabel: 'Modifier',
},
};
diff --git a/src/app/shared/components/button/icon-button/icon-button.component.html b/src/app/shared/components/button/icon-button/icon-button.component.html
index f87527ac5..9129add4a 100644
--- a/src/app/shared/components/button/icon-button/icon-button.component.html
+++ b/src/app/shared/components/button/icon-button/icon-button.component.html
@@ -1,3 +1,9 @@
-<button [type]="type" [ngClass]="classes" [disabled]="disabled" (click)="action.emit($event)">
+<button
+ [type]="type"
+ [ngClass]="classes"
+ [disabled]="disabled"
+ [attr.aria-label]="ariaLabel"
+ (click)="action.emit($event)"
+>
<app-svg-icon [folder]="iconFolder" [icon]="iconName" [iconColor]="iconColor" [iconClass]="'icon-20'" />
</button>
diff --git a/src/app/shared/components/button/icon-button/icon-button.component.ts b/src/app/shared/components/button/icon-button/icon-button.component.ts
index d66d2c79d..fa5d27b62 100644
--- a/src/app/shared/components/button/icon-button/icon-button.component.ts
+++ b/src/app/shared/components/button/icon-button/icon-button.component.ts
@@ -29,6 +29,9 @@ export class IconButtonComponent {
/** Icon color, defaults to none as the svg-icon does */
@Input() iconColor = 'none';
+ /** Button aria-label */
+ @Input() ariaLabel?: string = null;
+
/** Click handler */
@Output() action = new EventEmitter<Event>();
diff --git a/src/app/shared/components/search-bar/search-bar.component.html b/src/app/shared/components/search-bar/search-bar.component.html
index 32d7dcbac..5ca89672a 100644
--- a/src/app/shared/components/search-bar/search-bar.component.html
+++ b/src/app/shared/components/search-bar/search-bar.component.html
@@ -8,6 +8,7 @@
(keyup.enter)="handleSearch()"
/>
<app-icon-button
+ ariaLabel="Rechercher"
[iconFolder]="'ico'"
[iconName]="'search'"
[iconColor]="'currentColor'"
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index a1020091c..1c40f18e4 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -65,6 +65,7 @@
(click)="cardRDV(); $event.stopPropagation()"
/>
<app-icon-button
+ ariaLabel="Prendre rendez-vous"
class="hide-on-desktop"
[variant]="'primary'"
[iconName]="'calendar'"
--
GitLab
From f1fc2dd7062baa16d0c1439fa83c2a51325092d6 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 3 Apr 2024 08:04:45 +0000
Subject: [PATCH 2/2] aria-label is required
---
.../components/button/icon-button/icon-button.component.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/app/shared/components/button/icon-button/icon-button.component.ts b/src/app/shared/components/button/icon-button/icon-button.component.ts
index fa5d27b62..3f46ff2ea 100644
--- a/src/app/shared/components/button/icon-button/icon-button.component.ts
+++ b/src/app/shared/components/button/icon-button/icon-button.component.ts
@@ -30,7 +30,7 @@ export class IconButtonComponent {
@Input() iconColor = 'none';
/** Button aria-label */
- @Input() ariaLabel?: string = null;
+ @Input({ required: true }) ariaLabel: string;
/** Click handler */
@Output() action = new EventEmitter<Event>();
--
GitLab