Add role and aria-label to attribution control. Closes one task in here

Maps4HTML#247 (comment)
prushforth · Nov 24, 2021 · cb49e81 · cb49e81
1 parent a8672bf
commit cb49e81
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/src/mapml-viewer.js b/src/mapml-viewer.js
@@ -213,7 +213,9 @@ export class MapViewer extends HTMLElement {
           this._addToHistory();
           // the attribution control is not optional
           this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps for HTML Community Group">Maps4HTML</a> | <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
-
+          this._attributionControl.getContainer().setAttribute("role","group");
+          this._attributionControl.getContainer().setAttribute("aria-label","Map data attribution");
+
           this.setControls(false,false,true);
           this._crosshair = M.crosshair().addTo(this._map);
 

diff --git a/src/web-map.js b/src/web-map.js
@@ -227,6 +227,8 @@ export class WebMap extends HTMLMapElement {
           this._addToHistory();
           // the attribution control is not optional
           this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps for HTML Community Group">Maps4HTML</a> | <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
+          this._attributionControl.getContainer().setAttribute("role","group");
+          this._attributionControl.getContainer().setAttribute("aria-label","Map data attribution");
 
           this.setControls(false,false,true);
           this._crosshair = M.crosshair().addTo(this._map);

diff --git a/test/e2e/core/mapElement.test.js b/test/e2e/core/mapElement.test.js
@@ -84,4 +84,10 @@ describe("Playwright Map Element Tests", () => {
 
     expect(projection).toEqual("OSMTILE");
   });
+  test("Ensure attribution control has role='group' aria-label='Map data attribution'", async () => {
+    let role = await page.evaluate(`document.querySelector('map')._attributionControl.getContainer().getAttribute('role')`);
+    expect(role).toEqual("group");
+    let arialabel = await page.evaluate(`document.querySelector('map')._attributionControl.getContainer().getAttribute('aria-label')`);
+    expect(arialabel).toEqual("Map data attribution");
+  });
 });
diff --git a/test/e2e/mapml-viewer/mapml-viewer.test.js b/test/e2e/mapml-viewer/mapml-viewer.test.js
@@ -26,6 +26,14 @@ describe("Playwright mapml-viewer Element Tests", () => {
   afterAll(async function () {
     await context.close();
   });
+
+  test("Ensure attribution control has role='group' aria-label='Map data attribution'", async () => {
+    let role = await page.evaluate(`document.querySelector('mapml-viewer')._attributionControl.getContainer().getAttribute('role')`);
+    expect(role).toEqual("group");
+    let arialabel = await page.evaluate(`document.querySelector('mapml-viewer')._attributionControl.getContainer().getAttribute('aria-label')`);
+    expect(arialabel).toEqual("Map data attribution");
+  });
+
 
   test("Initial map element extent", async () => {
     const extent = await page.$eval(