Ajustements a11y

assets/js/theme/blocks/locations.js

@@ -1,10 +1,15 @@
 const locationsMap = document.querySelector('.locations-map');
 const dom = document.querySelector('main');
+
 class LocationsMap {
     constructor (dom, locationsMap) {
         this.dom = dom;
         this.map = locationsMap;
         this.init();
+
+        this.markers.forEach(marker => {
+            this.setAccessibility(marker);
+        });
     }
 
     init () {
@@ -33,7 +38,11 @@ class LocationsMap {
                 let marker = new L.marker(mapLocation, {
                     icon: this.themeMarker
                 });
-
+
+                marker.id = `leaflet-item-${map._leaflet_id}_${(this.markers.length + 1)}`;
+                marker.title = location.querySelector('.location-title').innerText;
+                location.id = marker.id;
+
                 const popup = new L.Popup({'autoClose':false, 'closeButton':false, 'maxWidth': 1000});
                 popup.setLatLng(mapLocation);
                 popup.setContent(location);
@@ -50,6 +59,23 @@ class LocationsMap {
         });
     }
 
+    setAccessibility (marker) {
+        let icon = marker._icon;
+        if (icon) {
+            icon.setAttribute('aria-label', 'Afficher les informations de ' + marker.title);
+            icon.setAttribute('aria-controls', marker.id);
+            icon.setAttribute('aria-expanded', 'false');
+        }
+
+        marker.addEventListener('popupopen', () => {
+            icon.setAttribute('aria-expanded', 'true');
+        });
+
+        marker.addEventListener('popupclose', () => {
+            icon.setAttribute('aria-expanded', 'false');
+        });
+    }
+
     listen (map) {
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
@@ -65,4 +91,4 @@ class LocationsMap {
 
 if (locationsMap) {
     new LocationsMap(dom, locationsMap);
-}
+}

assets/js/theme/blocks/organizations.js

@@ -1,10 +1,8 @@
 /* global L */
 const organizationsMaps = document.querySelectorAll('.block-organizations--map');
-
 class BlockOrganizations {
     constructor (dom) {
         this.dom = dom;
-
         this.init();
     }
 
@@ -13,60 +11,82 @@ class BlockOrganizations {
         this.setMap = false;
         this.content = this.dom.querySelector('.map');
         this.organizationsList = this.content.querySelectorAll('.organization');
-        let map = L.map(this.content, {
+        this.map = L.map(this.content, {
             scrollWheelZoom: false
         });
 
         this.classHidden = 'hidden';
-
         this.themeMarker = L.icon({
             iconUrl: this.content.getAttribute('data-marker-icon') || '/assets/images/map-marker.svg',
             iconSize: [17, 26]
         });
-        this.setOrganizations(map);
+        this.setOrganizations();
 
         if (this.setMap) {
-            this.listen(map);
-            this.getMapBounds(map);
+            this.listen();
+            this.getMapBounds();
         } else {
             this.dom.classList.add(this.classHidden);
             this.dom.setAttribute('aria-hidden', 'true');
         }
+
+        this.markers.forEach(marker => {
+            this.setAccessibility(marker);
+        });
     }
 
-    setOrganizations (map) {
+    setOrganizations () {
         this.organizationsList.forEach((organization) => {
             let latitude = parseFloat(organization.getAttribute('data-latitude')),
                 longitude = parseFloat(organization.getAttribute('data-longitude')),
                 mapLocation = [latitude, longitude];
             if (Boolean(latitude) && Boolean(longitude)) {
-                this.newMarker(map, mapLocation, organization);
+                this.newMarker(mapLocation, organization);
                 this.setMap = true;
             }
         });
     }
 
-    listen (map) {
+    listen () {
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-        }).addTo(map);
+        }).addTo(this.map);
     }
 
-    newMarker (map, mapLocation, organization) {
+    newMarker (mapLocation, organization) {
         let marker = new L.marker(mapLocation, {
             draggable: false,
             icon: this.themeMarker
         });
         this.classOrganization = organization.classList;
-        marker.bindPopup('<article class="' + this.classOrganization + '">' + organization.innerHTML + '</article>').openPopup();
-        map.addLayer(marker);
+        marker.id = `leaflet-item-${this.map._leaflet_id}_${(this.markers.length + 1)}`;
+        marker.title = organization.querySelector('.organization-title').innerText;
+        marker.bindPopup('<article id="'+ marker.id +'" class="' + this.classOrganization + '">' + organization.innerHTML + '</article>').openPopup();
+        this.map.addLayer(marker);
         this.markers.push(marker);
     }
 
-    getMapBounds (map) {
-        this.group = L.featureGroup(this.markers).addTo(map);
-        map.fitBounds(this.group.getBounds());
+    setAccessibility (marker) {
+        let icon = marker._icon;
+        if (icon) {
+            icon.setAttribute('aria-label', 'Afficher les informations de ' + marker.title);
+            icon.setAttribute('aria-controls', marker.id);
+            icon.setAttribute('aria-expanded', 'false');
+        }
+
+        marker.addEventListener('popupopen', () => {
+            icon.setAttribute('aria-expanded', 'true');
+        });
+
+        marker.addEventListener('popupclose', () => {
+            icon.setAttribute('aria-expanded', 'false');
+        });
+    }
+
+    getMapBounds () {
+        this.group = L.featureGroup(this.markers).addTo(this.map);
+        this.map.fitBounds(this.group.getBounds());
     }
 }
 

assets/sass/_theme/blocks/call_to_action.sass

@@ -59,6 +59,11 @@ $button-selector: "a:first-child"
         img
             display: block
     &--no_background
+        .actions
+            a:first-child
+                &:focus,
+                &:focus-visible
+                    outline-color: var(--color-text)
         .call_to_action--with-image
             figure
                 img

layouts/partials/commons/lightbox/lightbox.html

@@ -8,7 +8,7 @@
     <div id="lightbox-detail-information" class="lightbox-detail extendable" data-extendable-close-siblings="true">
       <p class="lightbox-detail__title">{{ safeHTML (i18n "commons.lightbox.informations") }}</p>
       <div id="lightbox-information"></div>
-      <p class="lightbox-detail__close" role="button" aria-controls="lightbox-detail-information" aria-expanded="false">{{ safeHTML (i18n "commons.lightbox.close") }}</p>
+      <p class="lightbox-detail__close" role="button" aria-controls="lightbox-detail-information" aria-expanded="false" tabindex="0">{{ safeHTML (i18n "commons.lightbox.close") }}</p>
     </div>
 
     <button class="lightbox-button-credit" aria-controls="lightbox-detail-credit" aria-expanded="false">
@@ -17,7 +17,7 @@
     <div id="lightbox-detail-credit" class="lightbox-detail extendable" data-extendable-close-siblings="true">
       <p class="lightbox-detail__title">{{ safeHTML (i18n "commons.lightbox.credits") }}</p>
       <div id="lightbox-credit"></div>
-      <p class="lightbox-detail__close" role="button" aria-controls="lightbox-detail-credit" aria-expanded="false">{{ safeHTML (i18n "commons.lightbox.close") }}</p>
+      <p class="lightbox-detail__close" role="button" aria-controls="lightbox-detail-credit" aria-expanded="false" tabindex="0">{{ safeHTML (i18n "commons.lightbox.close") }}</p>
     </div>
 
     <button class="lightbox-button-previous">

layouts/partials/events/event.html

@@ -25,7 +25,7 @@
       {{ end }}
 
       {{ if and $options.dates (or .Params.dates.computed.short .Params.dates.computed.two_lines.short .Params.dates.from.hour .Params.dates.to.hour) }}
-        <div class="event-dates" itemprop="startDate" content="{{- if .Params.dates.from.day -}}{{ .Params.dates.from.day }}{{- end -}}{{- if .Params.dates.from.hour -}}T{{ .Params.dates.from.hour }}{{- end -}}">
+        <p class="event-dates" itemprop="startDate" content="{{- if .Params.dates.from.day -}}{{ .Params.dates.from.day }}{{- end -}}{{- if .Params.dates.from.hour -}}T{{ .Params.dates.from.hour }}{{- end -}}">
           <span>
             {{ $date_format := .Params.dates.computed.two_lines.short }}
             {{ if ne $layout "list" }}
@@ -43,7 +43,7 @@
               {{ end -}}
             </div>
           {{ end -}}
-        </div>
+        </p>
       {{ end }}
       {{ if and .Params.dates.status $options.status }}
         <p class="event-status">

layouts/partials/locations/map.html

@@ -1,7 +1,7 @@
 {{ $locations := .locations }}
 {{ $popup_opened := .popup_opened | default false }}
 
-<div class="locations-map" aria-hidden="true">
+<div class="locations-map">
   <div class="map" data-open-popup="{{ $popup_opened }}" data-marker-icon="{{ "/assets/images/map-marker.svg" }}">
     {{ range $locations }}
       {{ if and .Params.contact_details.geolocation.longitude .Params.contact_details.geolocation.latitude }}

layouts/partials/toc/container.html

@@ -6,8 +6,7 @@
   <div class="toc-container" aria-hidden="false" aria-labelledby="toc-title">
     <div class="toc-content">
       {{/* TODO : quelle balise pour le titre du toc ? */}}
-      <div id="toc-title" class="toc-title" role="heading">{{ i18n "commons.toc" }}</div>
-      {{- partial (printf .toc) . -}}
+      <div id="toc-title" class="toc-title" role="heading" aria-level="2">{{ i18n "commons.toc" }}</div>      {{- partial (printf .toc) . -}}
       <button name="{{ i18n "commons.close" }}">{{ i18n "commons.close" }}</button>
     </div>
   </div>