From e4016a0115b2c3f56102853230a06c783a89eb84 Mon Sep 17 00:00:00 2001 From: alexisben Date: Wed, 30 Oct 2024 12:32:11 +0100 Subject: [PATCH 1/4] Revert "Revert "cherry pick a11y fix from audit-rgaa branch"" This reverts commit 3d410d09994ce9606a96c10457c6a1ac75361663. --- assets/js/theme/blocks/locations.js | 29 +++++++++- assets/js/theme/blocks/organizations.js | 54 +++++++++++++------ assets/sass/_theme/blocks/call_to_action.sass | 5 ++ layouts/partials/events/event.html | 4 +- layouts/partials/toc/container.html | 3 +- 5 files changed, 73 insertions(+), 22 deletions(-) diff --git a/assets/js/theme/blocks/locations.js b/assets/js/theme/blocks/locations.js index 5cdd9cb1d..58ecf9de4 100644 --- a/assets/js/theme/blocks/locations.js +++ b/assets/js/theme/blocks/locations.js @@ -1,10 +1,16 @@ 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 +39,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 +60,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, diff --git a/assets/js/theme/blocks/organizations.js b/assets/js/theme/blocks/organizations.js index edc414a16..d9fffa7ec 100644 --- a/assets/js/theme/blocks/organizations.js +++ b/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: '© OpenStreetMap' - }).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('
' + organization.innerHTML + '
').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('
' + organization.innerHTML + '
').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()); } } diff --git a/assets/sass/_theme/blocks/call_to_action.sass b/assets/sass/_theme/blocks/call_to_action.sass index 5d58b5790..3a13fb7fc 100644 --- a/assets/sass/_theme/blocks/call_to_action.sass +++ b/assets/sass/_theme/blocks/call_to_action.sass @@ -53,6 +53,11 @@ img display: block &--no_background + .actions + a:first-child + &:focus, + &:focus-visible + outline-color: var(--color-text) .call_to_action--with-image figure img diff --git a/layouts/partials/events/event.html b/layouts/partials/events/event.html index 6f35994d0..49d8c03a7 100644 --- a/layouts/partials/events/event.html +++ b/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) }} -
+

{{ $date_format := .Params.dates.computed.two_lines.short }} {{ if ne $layout "list" }} @@ -43,7 +43,7 @@ {{ end -}}

{{ end -}} - +

{{ end }} {{ if and .Params.dates.status $options.status }}

diff --git a/layouts/partials/toc/container.html b/layouts/partials/toc/container.html index 8cb67b928..28dc3ac85 100644 --- a/layouts/partials/toc/container.html +++ b/layouts/partials/toc/container.html @@ -6,8 +6,7 @@

{{/* TODO : quelle balise pour le titre du toc ? */}} -
{{ i18n "commons.toc" }}
- {{- partial (printf .toc) . -}} +
{{ i18n "commons.toc" }}
{{- partial (printf .toc) . -}}
From 4d76389aad8c3c57a4b589c733054beb8bccc9d9 Mon Sep 17 00:00:00 2001 From: alexisben Date: Wed, 30 Oct 2024 12:33:12 +0100 Subject: [PATCH 2/4] remove aria hidden from map --- layouts/partials/locations/map.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/locations/map.html b/layouts/partials/locations/map.html index adcebf62d..269d9d421 100644 --- a/layouts/partials/locations/map.html +++ b/layouts/partials/locations/map.html @@ -1,7 +1,7 @@ {{ $locations := .locations }} {{ $popup_opened := .popup_opened | default false }} -