Merge branch '595-accessibilite-page-cartographie' into 'dev'

Resolve "[Accessibilité] - Page Cartographie"

See merge request !873

src/app/map/components/map.component.ts

@@ -244,6 +244,10 @@ export class MapComponent implements OnChanges {
    */
   public onMapReady(map: Map): void {
     this.map = map;
+    map.addControl(L.control.zoom({ zoomInTitle: 'Zoomer', zoomOutTitle: 'Dézoomer' }));
+    map.addControl(L.control.attribution({ prefix: false }));
+    // Enhance accessibility after controls are added
+    this.enhanceControlsAccessibility();
     if (this.searchedValue) {
       if (Array.isArray(this.searchedValue)) {
         this.centerOnCoordinates(this.searchedValue);
@@ -261,8 +265,11 @@ export class MapComponent implements OnChanges {
     this.initMDMLayer();
     // Init WMS service with param from data.grandlyon.com
     layerGroup();
+    const leafletAttributionTranslated =
+      '<a href="https://leafletjs.com" title="Une librairie JavaScript pour cartes interactives"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" class="leaflet-attribution-flag"><path fill="#4C7BE1" d="M0 0h12v4H0z"></path><path fill="#FFD500" d="M0 4h12v3H0z"></path><path fill="#E0BC00" d="M0 7h12v1H0z"></path></svg> Leaflet</a><span aria-hidden="true"> | </span>';
     const carteLayer = tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
       attribution:
+        leafletAttributionTranslated +
         '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',
       maxZoom: ZoomLevel.max,
     });
@@ -274,9 +281,29 @@ export class MapComponent implements OnChanges {
       zoom: ZoomLevel.regular,
       minZoom: ZoomLevel.min,
       layers: [carteLayer],
+      // Disable default leaflet controls to create custom controls with labels translated for accessibility
+      zoomControl: false,
+      attributionControl: false,
     };
   }
 
+  /**
+   * Enhance accessibility for zoom controls
+   */
+  private enhanceControlsAccessibility(): void {
+    const zoomInButton = document.querySelector('.leaflet-control-zoom-in');
+    if (zoomInButton instanceof HTMLElement) {
+      zoomInButton.setAttribute('role', 'button');
+      zoomInButton.setAttribute('aria-label', 'Zoomer');
+    }
+
+    const zoomOutButton = document.querySelector('.leaflet-control-zoom-out');
+    if (zoomOutButton instanceof HTMLElement) {
+      zoomOutButton.setAttribute('role', 'button');
+      zoomOutButton.setAttribute('aria-label', 'Dézoomer');
+    }
+  }
+
   private initMDMLayer(): void {
     this.geoJsonService.getMDMGeoJson().subscribe((res) => {
       res.forEach((mdm) => {

src/app/shared/components/checkbox-filter/checkbox-filter.component.html

-<button type="button" [ngClass]="{ checked: checked }" (click)="toggle.emit(module)">
+<button
+  type="button"
+  role="checkbox"
+  [attr.aria-checked]="checked"
+  [ngClass]="{ checked: checked }"
+  (click)="toggle.emit(module)"
+>
   <app-svg-icon *ngIf="!checked" [iconClass]="'icon-20'" [folder]="'form'" [icon]="'radio-unchecked'" />
   <app-svg-icon *ngIf="checked" [iconClass]="'icon-20'" [folder]="'form'" [icon]="'radio-checked'" />
   <span>{{ module.displayText }}</span>