Merge pull request #241 from IGNF/fix/double-widget-tooltip

fix(accessibility): retirer les alt des boutons widgets
IGNF · Nov 5, 2024 · 1e19acb · 1e19acb
2 parents e0da1bf + 08e461a
commit 1e19acb
Show file tree

Hide file tree

Showing 21 changed files with 40 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.0-237",
-  "date": "30/10/2024",
+  "version": "1.0.0-beta.0-241",
+  "date": "05/11/2024",
   "module": "src/index.js",
   "directories": {},
   "engines": {

diff --git a/src/packages/CSS/DSFRgeneralWidget.css b/src/packages/CSS/DSFRgeneralWidget.css
@@ -163,8 +163,8 @@
   }
 }
 
-.gpf-btn-icon:not([class*=--tertiary])[title]:hover::before {
-  content: attr(title);
+.gpf-btn-icon:not([class*=--tertiary])[aria-label]:hover::before {
+  content: attr(aria-label);
   position: absolute;
   top: 0;
   color: var(--text-default-grey);
@@ -180,13 +180,13 @@
   background-image: conic-gradient(from 56.31deg at 0% 50%,transparent 0deg,var(--background-overlap-grey) 0deg,var(--background-overlap-grey) 67.38deg,transparent 67.38deg),conic-gradient(from 56.31deg at 0% 50%,transparent 0deg,var(--border-default-grey) 0deg,var(--border-default-grey) 67.38deg,transparent 67.38deg),linear-gradient(90deg,var(--border-default-grey),var(--border-default-grey)),linear-gradient(90deg,var(--background-overlap-grey),var(--background-overlap-grey));
 }
 
-.position-container-top-left .gpf-btn-icon:not([class*=--tertiary])[title]:hover::before,
-.position-container-bottom-left .gpf-btn-icon:not([class*=--tertiary])[title]:hover::before {
+.position-container-top-left .gpf-btn-icon:not([class*=--tertiary])[aria-label]:hover::before,
+.position-container-bottom-left .gpf-btn-icon:not([class*=--tertiary])[aria-label]:hover::before {
   transform: translateX(24px);
 }
 
-.position-container-top-right .gpf-btn-icon:not([class*=--tertiary])[title]:hover::before,
-.position-container-bottom-right .gpf-btn-icon:not([class*=--tertiary])[title]:hover::before {
+.position-container-top-right .gpf-btn-icon:not([class*=--tertiary])[aria-label]:hover::before,
+.position-container-bottom-right .gpf-btn-icon:not([class*=--tertiary])[aria-label]:hover::before {
   transform: translateX(calc(-100% - 16px));
   padding: .5rem 1.25rem .5rem .5rem;
   background-size: .375rem .5rem, .375rem .5rem, 1px 100%, 100%;

diff --git a/src/packages/Controls/Catalog/CatalogDOM.js b/src/packages/Controls/Catalog/CatalogDOM.js
@@ -67,7 +67,7 @@ var CatalogDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPshowCatalogPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto GPshowCatalogPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-catalog fr-btn fr-btn--secondary";
-        button.title = "Catalogue de données";
+        button.setAttribute("aria-label", "Catalogue de données");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");
@@ -563,4 +563,4 @@ var CatalogDOM = {
 
 };
 
-export default CatalogDOM;
+export default CatalogDOM;
diff --git a/src/packages/Controls/Drawing/DrawingDOM.js b/src/packages/Controls/Drawing/DrawingDOM.js
@@ -44,7 +44,7 @@ var DrawingDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPshowDrawingPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto GPshowDrawingPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-drawing fr-btn fr-btn--secondary";
-        button.title = this.options.labels.control;
+        button.setAttribute("aria-label", this.options.labels.control);
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");

diff --git a/src/packages/Controls/ElevationPath/ElevationPathDOM.js b/src/packages/Controls/ElevationPath/ElevationPathDOM.js
@@ -44,7 +44,7 @@ var ElevationPathDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPshowElevationPathPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-elevation fr-btn fr-btn--secondary";
-        button.title = "Calculer un profil";
+        button.setAttribute("aria-label", "Calculer un profil altimétrique");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");

diff --git a/src/packages/Controls/FullScreen/GeoportalFullScreen.js b/src/packages/Controls/FullScreen/GeoportalFullScreen.js
@@ -87,6 +87,8 @@ var GeoportalFullScreen = class GeoportalFullScreen extends FullScreen {
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");
+        button.removeAttribute("title");
+        button.setAttribute("aria-label", this.options.tipLabel);
         if (button.addEventListener) {
             button.addEventListener("click", function (e) {
                 var status = (e.target.ariaPressed === "true");

diff --git a/src/packages/Controls/GetFeatureInfo/GetFeatureInfoDOM.js b/src/packages/Controls/GetFeatureInfo/GetFeatureInfoDOM.js
@@ -72,7 +72,7 @@ var GetFeatureInfoDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPgetFeatureInfoPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto GPgetFeatureInfoPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-getfeatureinfo fr-btn fr-btn--secondary";
-        button.title = "Activer/désactiver l'interrogation des couches";
+        button.setAttribute("aria-label", "Activer/désactiver l'interrogation des couches");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");
@@ -245,4 +245,4 @@ var GetFeatureInfoDOM = {
 
 };
 
-export default GetFeatureInfoDOM;
+export default GetFeatureInfoDOM;
diff --git a/src/packages/Controls/Isocurve/IsocurveDOM.js b/src/packages/Controls/Isocurve/IsocurveDOM.js
@@ -44,7 +44,7 @@ var IsoDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPshowIsochronPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto GPshowIsochronPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-isocurve fr-btn fr-btn--secondary";
-        button.title = "Calculer une isochrone";
+        button.setAttribute("aria-label", "Calculer une isochrone");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");

diff --git a/src/packages/Controls/LayerImport/LayerImportDOM.js b/src/packages/Controls/LayerImport/LayerImportDOM.js
@@ -56,7 +56,7 @@ var LayerImportDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPshowImportPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto GPshowImportPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-import fr-btn fr-btn--secondary";
-        button.title = "Ouvrir l'import de couches";
+        button.setAttribute("aria-label", "Ouvrir l'import de couches");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");
@@ -680,7 +680,7 @@ var LayerImportDOM = {
         span.innerText = "Fermer";
 
         closeDiv.appendChild(span);
-        
+
         container.appendChild(closeDiv);
 
         return container;
@@ -832,13 +832,13 @@ var LayerImportDOM = {
                 context._onMapBoxPanelClose();
             });
         }
-        
+
         var span = document.createElement("span");
         span.className = "GPelementHidden gpf-visible"; // afficher en dsfr
         span.innerText = "Fermer";
 
         closeDiv.appendChild(span);
-        
+
         container.appendChild(closeDiv);
 
         return container;

diff --git a/src/packages/Controls/LayerSwitcher/LayerSwitcherDOM.js b/src/packages/Controls/LayerSwitcher/LayerSwitcherDOM.js
@@ -121,7 +121,7 @@ var LayerSwitcherDOM = {
         button.id = this._addUID("GPshowLayersListPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto GPshowLayersListPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-layerswitcher fr-btn fr-btn--secondary";
         button.htmlFor = this._addUID("GPshowLayersList");
-        button.title = "Afficher/masquer le gestionnaire de couches";
+        button.setAttribute("aria-label", "Afficher/masquer le gestionnaire de couches");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");

diff --git a/src/packages/Controls/Legends/LegendsDOM.js b/src/packages/Controls/Legends/LegendsDOM.js
@@ -41,7 +41,7 @@ var LegendsDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPshowLegendsPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto GPshowLegendsPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-legends fr-btn fr-btn--secondary";
-        button.title = "Afficher les légendes";
+        button.setAttribute("aria-label", "Afficher les légendes");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");
@@ -222,4 +222,4 @@ var LegendsDOM = {
 
 };
 
-export default LegendsDOM;
+export default LegendsDOM;
diff --git a/src/packages/Controls/Measures/MeasureAreaDOM.js b/src/packages/Controls/Measures/MeasureAreaDOM.js
@@ -42,7 +42,7 @@ var MeasureAreaDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPshowMeasureAreaPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-area fr-btn fr-btn--secondary";
-        button.title = "Mesurer une surface";
+        button.setAttribute("aria-label", "Mesurer une surface");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");

diff --git a/src/packages/Controls/Measures/MeasureAzimuthDOM.js b/src/packages/Controls/Measures/MeasureAzimuthDOM.js
@@ -42,7 +42,7 @@ var MeasureAzimuthDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPshowMeasureAzimuthPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-azimuth fr-btn fr-btn--secondary";
-        button.title = "Mesurer un azimut";
+        button.setAttribute("aria-label", "Mesurer un azimut");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");

diff --git a/src/packages/Controls/Measures/MeasureLengthDOM.js b/src/packages/Controls/Measures/MeasureLengthDOM.js
@@ -42,7 +42,7 @@ var MeasureLengthDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPshowMeasureLengthPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-length fr-btn fr-btn--secondary";
-        button.title = "Mesurer une distance";
+        button.setAttribute("aria-label", "Mesurer une distance");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");

diff --git a/src/packages/Controls/MousePosition/MousePositionDOM.js b/src/packages/Controls/MousePosition/MousePositionDOM.js
@@ -42,7 +42,7 @@ var MousePositionDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPshowMousePositionPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-position fr-btn fr-btn--secondary";
-        button.title = "Afficher les coordonnées du curseur";
+        button.setAttribute("aria-label", "Afficher les coordonnées du curseur");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");

diff --git a/src/packages/Controls/OverviewMap/GeoportalOverviewMap.js b/src/packages/Controls/OverviewMap/GeoportalOverviewMap.js
@@ -307,6 +307,8 @@ var GeoportalOverviewMap = class GeoportalOverviewMap extends OverviewMap {
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", !this.options.collapsed);
         button.setAttribute("type", "button");
+        button.removeAttribute("title");
+        button.setAttribute("aria-label", this.options.tipLabel);
         var self = this;
         if (button.addEventListener) {
             button.addEventListener("click", function (e) {

diff --git a/src/packages/Controls/ReverseGeocode/ReverseGeocodeDOM.js b/src/packages/Controls/ReverseGeocode/ReverseGeocodeDOM.js
@@ -41,7 +41,7 @@ var ReverseGeocodeDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPshowReverseGeocodingPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto GPshowReverseGeocodingPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-reverse fr-btn fr-btn--secondary";
-        button.title = "Ouvrir la recherche inverse";
+        button.setAttribute("aria-label", "Ouvrir la recherche inverse");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");

diff --git a/src/packages/Controls/Route/RouteDOM.js b/src/packages/Controls/Route/RouteDOM.js
@@ -49,7 +49,7 @@ var RouteDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPshowRoutePicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto GPshowRoutePicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-route fr-btn fr-btn--secondary";
-        button.title = "Ouvrir le calcul d'itinéraire";
+        button.setAttribute("aria-label", "Ouvrir le calcul d'itinéraire");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");

diff --git a/src/packages/Controls/SearchEngine/SearchEngineDOM.js b/src/packages/Controls/SearchEngine/SearchEngineDOM.js
@@ -474,7 +474,7 @@ var SearchEngineDOM = {
         var button = document.createElement("button");
         button.id = this._addUID("GPshowGeolocate");
         button.className = "GPshowOpen GPshowAdvancedToolPicto GPshowGeolocate gpf-btn gpf-btn-icon-search-geolocate fr-btn fr-btn--secondary gpf-btn--secondary fr-m-1w";
-        button.title = "Activer la geolocalisation";
+        button.title = "Activer la géolocalisation";
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
 
@@ -879,7 +879,7 @@ var SearchEngineDOM = {
             var data = [];
             // liste des attributs de la ressource de geocodage
             var id = "#GPadvancedSearchFilters-" + self._uid;
-            var matchesFilters = document.querySelectorAll(id + " > div > div > input,select#category");            
+            var matchesFilters = document.querySelectorAll(id + " > div > div > input,select#category");
             for (var i = 0; i < matchesFilters.length; i++) {
                 var element = matchesFilters[i];
                 data.push({

diff --git a/src/packages/Controls/Territories/TerritoriesDOM.js b/src/packages/Controls/Territories/TerritoriesDOM.js
@@ -40,7 +40,7 @@ var TerritoriesDOM = {
         button.appendChild(span);
         button.id = this._addUID("GPshowTerritoriesPicto");
         button.className = "GPshowOpen GPshowAdvancedToolPicto GPshowTerritoriesPicto gpf-btn gpf-btn--secondary gpf-btn-icon gpf-btn-icon-territories fr-btn fr-btn--secondary";
-        button.title = "Selecteur de territoire";
+        button.setAttribute("aria-label", "Sélecteur de territoire");
         button.setAttribute("tabindex", "0");
         button.setAttribute("aria-pressed", false);
         button.setAttribute("type", "button");

diff --git a/src/packages/Controls/Zoom/GeoportalZoom.js b/src/packages/Controls/Zoom/GeoportalZoom.js
@@ -90,6 +90,8 @@ var GeoportalZoom = class GeoportalZoom extends Zoom {
                 btn.classList.add("GPzoomIn", "GPshowOpen", "GPshowAdvancedToolPicto", "gpf-btn-icon-zoom-in", "fr-btn", "fr-btn--secondary", "gpf-btn", "gpf-btn--secondary", "gpf-btn-icon");
                 btn.id = "GPzoomIn";
                 btn.innerHTML = "";
+                btn.removeAttribute("title");
+                btn.setAttribute("aria-label", "Zoomer");
                 // INFO: Ajout d'une SPAN pour enlever des marges de 6px dans CHROMIUM (?!)
                 var span = document.createElement("span");
                 btn.appendChild(span);
@@ -112,6 +114,8 @@ var GeoportalZoom = class GeoportalZoom extends Zoom {
                 btn.classList.add("GPzoomOut", "GPshowOpen", "GPshowAdvancedToolPicto", "gpf-btn-icon-zoom-out", "fr-btn", "fr-btn--secondary", "gpf-btn", "gpf-btn--secondary", "gpf-btn-icon");
                 btn.id = "GPzoomOut";
                 btn.innerHTML = "";
+                btn.removeAttribute("title");
+                btn.setAttribute("aria-label", "Dézoomer");
                 // INFO: Ajout d'une SPAN pour enlever des marges de 6px dans CHROMIUM (?!)
                 var span = document.createElement("span");
                 btn.appendChild(span);
@@ -178,4 +182,4 @@ export default GeoportalZoom;
 // Expose GeoportalZoom as ol.control.GeoportalZoom (for a build bundle)
 if (window.ol && window.ol.control) {
     window.ol.control.GeoportalZoom = GeoportalZoom;
-}
+}