From f3a7e1d0802a8c126ac5ef4add7776bf845e7a0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marl=C3=A8ne=20SIMONDANT?= <msimondant@grandlyon.com>
Date: Thu, 25 Jul 2024 08:39:59 +0000
Subject: [PATCH] fix(accessibility): slugify checkbox id/for attributes
---
.../filter-modal/filter-modal.component.html | 2 +-
src/app/shared/pipes/index.ts | 5 +++--
src/app/shared/pipes/slugify.pipe.ts | 22 +++++++++++++++++++
3 files changed, 26 insertions(+), 3 deletions(-)
create mode 100644 src/app/shared/pipes/slugify.pipe.ts
diff --git a/src/app/annuaire/filter-modal/filter-modal.component.html b/src/app/annuaire/filter-modal/filter-modal.component.html
index 56163e779..82d4be520 100644
--- a/src/app/annuaire/filter-modal/filter-modal.component.html
+++ b/src/app/annuaire/filter-modal/filter-modal.component.html
@@ -4,7 +4,7 @@
<app-label-checkbox
*ngFor="let filter of filtersTypes"
[label]="filter"
- [for]="filter"
+ [for]="filter | slugify"
[checked]="isFilterChecked(filter)"
[size]="'small'"
(action)="toggleCheckbox(filter)"
diff --git a/src/app/shared/pipes/index.ts b/src/app/shared/pipes/index.ts
index 2e68807ca..1fe8bfefc 100644
--- a/src/app/shared/pipes/index.ts
+++ b/src/app/shared/pipes/index.ts
@@ -1,8 +1,9 @@
import { DayPipe } from './day.pipe';
import { PhonePipe } from './phone.pipe';
+import { SlugifyPipe } from './slugify.pipe';
import { UrlPipe } from './url.pipe';
import { UserNamePipe } from './userName.pipe';
-export { DayPipe, PhonePipe, UrlPipe, UserNamePipe };
+export { DayPipe, PhonePipe, SlugifyPipe, UrlPipe, UserNamePipe };
-export const SharedPipes = [DayPipe, PhonePipe, UrlPipe, UserNamePipe];
+export const SharedPipes = [DayPipe, PhonePipe, SlugifyPipe, UrlPipe, UserNamePipe];
diff --git a/src/app/shared/pipes/slugify.pipe.ts b/src/app/shared/pipes/slugify.pipe.ts
new file mode 100644
index 000000000..568efa5ca
--- /dev/null
+++ b/src/app/shared/pipes/slugify.pipe.ts
@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'slugify',
+})
+export class SlugifyPipe implements PipeTransform {
+ transform(value: string): string {
+ if (!value) return '';
+
+ // Remove accents
+ const withoutAccents = value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+
+ // Use a regex to create the slug
+ return withoutAccents
+ .toLowerCase()
+ .trim()
+ .replace(/[^a-z0-9\s-]/g, '') // Remove special characters
+ .replace(/[\s-]+/g, '-') // Replace spaces and multiple hyphens with a single hyphen
+ .replace(/^-+/, '') // Trim hyphens from the start
+ .replace(/-+$/, ''); // Trim hyphens from the end
+ }
+}
--
GitLab