Change introduced <a> controls to use <button> (#488)

* Add generic `mapml-button` class

* Change context menu items from `<a>` to `<button>`

* Change `mapml-reload-button` from `<a>` to `<button>`

* Change `mapml-popup-button` from `<a>` to `<button>`

* Change `mapml-layer-remove-button` from `<a>` to `<button>`

* Correct comment in Focus Controls test

Author: Malvoz

src/mapml.css

@@ -46,6 +46,25 @@
  * Controls.
  */
 
+ /* Generic class for seamless buttons */
+ .mapml-button {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  text-align: left;
+  text-align: inline-start;
+  text-transform: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+ 
  .leaflet-top .leaflet-control {
    margin-top: 5px;
  }
@@ -54,13 +73,25 @@
    margin-left: 5px;
  }
 
-.leaflet-bar a {
+.leaflet-bar a,
+.mapml-reload-button {
+  background-color: #fff;
   box-sizing: border-box;
   width: 44px !important;
   height: 44px !important;
   line-height: 44px !important;
   font-size: 34px !important;
   font-weight: normal;
+  text-align: center;
+}
+
+.mapml-reload-button:not([aria-disabled="true"]):hover {
+  background-color: #f4f4f4;
+}
+
+.mapml-reload-button[aria-disabled="true"] {
+  color: #bbb;
+  cursor: default;
 }
 
 .leaflet-control-layers-toggle {
@@ -69,11 +100,13 @@
 }
 
 .leaflet-bar a,
-.leaflet-control-layers {
+.leaflet-control-layers,
+.mapml-reload-button {
   border-color: #e3e3e3 !important;
 }
 
-.leaflet-control-layers {
+.leaflet-control-layers,
+.mapml-reload-button {
   border-radius: 4px !important;
 }
 .leaflet-touch .leaflet-bar a:last-child {
@@ -226,7 +259,7 @@
   cursor: default;
 }
 
-.mapml-contextmenu a.mapml-contextmenu-item {
+.mapml-contextmenu button.mapml-contextmenu-item {
   display: block;
   color: #222;
   font-size: 12px;
@@ -236,9 +269,10 @@
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
   cursor: default;
+  width: 100%;
 }
 
-.mapml-contextmenu a.mapml-contextmenu-item.over {
+.mapml-contextmenu button.mapml-contextmenu-item.over {
   background-color: #f4f4f4;
   border-top: 1px solid #f0f0f0;
   border-bottom: 1px solid #f0f0f0;
@@ -448,6 +482,10 @@ summary {
 	font-weight: bold;
   background: transparent;
   white-space: nowrap;
+  box-sizing: border-box;
+  width: 44px;
+  height: 44px;
+  line-height: 44px;
 }
 
 .mapml-focus-buttons {
@@ -461,7 +499,7 @@ summary {
   padding: 2px;
 }
 
-.mapml-focus-buttons a,
+.mapml-focus-buttons button,
 .leaflet-container a.leaflet-popup-close-button {
   width: 44px;
   height: 44px;
@@ -480,7 +518,7 @@ summary {
   display: block;
   text-align: center;
 }
-.mapml-focus-buttons a {
+.mapml-focus-buttons button {
   display: inline-block;
   padding: 0;
 }

src/mapml/control/ReloadButton.js

@@ -6,11 +6,11 @@ export var ReloadButton = L.Control.extend({
   onAdd: function (map) {
     let container = L.DomUtil.create("div", "mapml-reload-button leaflet-bar");
 
-    let link = L.DomUtil.create("a", "mapml-reload-button", container);
-    link.innerHTML = "&#x021BA";
-    link.href = "#";
+    let link = L.DomUtil.create("button", "mapml-reload-button", container);
+    link.innerHTML = "<span aria-hidden='true'>&#x021BA</span>";
     link.title = "Reload";
-    link.setAttribute('role', 'button');
+    link.setAttribute("type", "button");
+    link.classList.add("mapml-button");
     link.setAttribute('aria-label', "Reload");
 
     L.DomEvent.disableClickPropagation(link);

src/mapml/handlers/ContextMenu.js

@@ -324,13 +324,13 @@ export var ContextMenu = L.Handler.extend({
     }
 
     var itemCls = 'mapml-contextmenu-item',
-        el = this._insertElementAt('a', itemCls, container, index),
+        el = this._insertElementAt('button', itemCls, container, index),
         callback = this._createEventHandler(el, options.callback, options.context, options.hideOnSelect),
         html = '';
 
     el.innerHTML = html + options.text;
-    el.href = "#";
-    el.setAttribute("role","button");
+    el.setAttribute("type", "button");
+    el.classList.add("mapml-button");
     if(options.popup){
       el.setAttribute("aria-haspopup", "true");
       el.setAttribute("aria-expanded", "false");

src/mapml/layers/MapLayer.js

@@ -497,12 +497,11 @@ export var MapMLLayer = L.Layer.extend({
 
         summaryContainer.classList.add('mapml-control-summary-container');
 
-        let removeButton = document.createElement('a');
-        removeButton.href = '#';
-        removeButton.role = 'button';
+        let removeButton = document.createElement('button');
+        removeButton.type = 'button';
         removeButton.title = 'Remove Layer';
         removeButton.innerHTML = "<span aria-hidden='true'>&#10006;</span>";
-        removeButton.classList.add('mapml-layer-remove-button');
+        removeButton.classList.add('mapml-layer-remove-button', 'mapml-button');
         L.DomEvent.disableClickPropagation(removeButton);
         L.DomEvent.on(removeButton, 'click', L.DomEvent.stop);
         L.DomEvent.on(removeButton, 'click', (e)=>{
@@ -1203,9 +1202,8 @@ export var MapMLLayer = L.Layer.extend({
       let div = L.DomUtil.create("nav", "mapml-focus-buttons");
 
       // creates |< button, focuses map
-      let mapFocusButton = L.DomUtil.create('a',"mapml-popup-button", div);
-      mapFocusButton.href = '#';
-      mapFocusButton.role = "button";
+      let mapFocusButton = L.DomUtil.create("button", "mapml-popup-button", div);
+      mapFocusButton.type = "button";
       mapFocusButton.title = "Focus Map";
       mapFocusButton.innerHTML = "<span aria-hidden='true'>|&#10094;</span>";
       L.DomEvent.disableClickPropagation(mapFocusButton);
@@ -1216,9 +1214,8 @@ export var MapMLLayer = L.Layer.extend({
       }, popup);
 
       // creates < button, focuses previous feature, if none exists focuses the current feature
-      let previousButton = L.DomUtil.create('a', "mapml-popup-button", div);
-      previousButton.href = '#';
-      previousButton.role = "button";
+      let previousButton = L.DomUtil.create("button", "mapml-popup-button", div);
+      previousButton.type = "button";
       previousButton.title = "Previous Feature";
       previousButton.innerHTML = "<span aria-hidden='true'>&#10094;</span>";
       L.DomEvent.disableClickPropagation(previousButton);
@@ -1231,19 +1228,17 @@ export var MapMLLayer = L.Layer.extend({
       featureCount.innerText = (popup._count + 1)+"/"+totalFeatures;
 
       // creates > button, focuses next feature, if none exists focuses the current feature
-      let nextButton = L.DomUtil.create('a', "mapml-popup-button", div);
-      nextButton.href = '#';
-      nextButton.role = "button";
+      let nextButton = L.DomUtil.create("button", "mapml-popup-button", div);
+      nextButton.type = "button";
       nextButton.title = "Next Feature";
       nextButton.innerHTML = "<span aria-hidden='true'>&#10095;</span>";
       L.DomEvent.disableClickPropagation(nextButton);
       L.DomEvent.on(nextButton, 'click', L.DomEvent.stop);
       L.DomEvent.on(nextButton, 'click', layer._nextFeature, popup);
 
       // creates >| button, focuses map controls
-      let controlFocusButton = L.DomUtil.create('a',"mapml-popup-button", div);
-      controlFocusButton.href = '#';
-      controlFocusButton.role = "button";
+      let controlFocusButton = L.DomUtil.create("button", "mapml-popup-button", div);
+      controlFocusButton.type = "button";
       controlFocusButton.title = "Focus Controls";
       controlFocusButton.innerHTML = "<span aria-hidden='true'>&#10095;|</span>";
       L.DomEvent.disableClickPropagation(controlFocusButton);

test/e2e/core/featureLinks.test.js

@@ -36,7 +36,7 @@ jest.setTimeout(50000);
 
           test("[" + browserType + "]" + " Sub-point inplace link adds new layer, parent feature has separate link", async () => {
             await page.hover(".leaflet-top.leaflet-right");
-            await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > details > summary > div > a");
+            await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > details > summary > div > button");
             await page.click("body > map");
             for(let i = 0; i < 6; i++)
               await page.keyboard.press("Tab");
@@ -68,7 +68,7 @@ jest.setTimeout(50000);
         describe("Main Part Link Tests in " + browserType, () => {
           test("[" + browserType + "]" + " Main part adds new layer", async () => {
             await page.hover(".leaflet-top.leaflet-right");
-            await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > details > summary > div > a");
+            await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > details > summary > div > button");
             await page.click("body > map");
             for(let i = 0; i < 5; i++)
               await page.keyboard.press("Tab");

test/e2e/core/keyboardInteraction.test.js

@@ -125,7 +125,7 @@ jest.setTimeout(50000);
 
         describe("Feature Popup Tab Navigation Tests in " + browserType, () => {
           test("[" + browserType + "]" + " Inline features popup focus order", async () => {
-            await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.mapml-reload-button.leaflet-bar.leaflet-control > a");
+            await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.mapml-reload-button.leaflet-bar.leaflet-control > button");
             await page.evaluateHandle(() => document.getElementById("vector").removeAttribute("checked"));
             await page.evaluateHandle(() => document.getElementById("query").removeAttribute("checked"));
             await page.click("body");
@@ -246,7 +246,7 @@ jest.setTimeout(50000);
             expect(f).toEqual("M285 373L460 380L468 477L329 459z");
           });
 
-          test("[" + browserType + "]" + " Focus Controls focuses the first <a> child in control div", async () => {
+          test("[" + browserType + "]" + " Focus Controls focuses the first <button> child in control div", async () => {
             await page.click("body > mapml-viewer");
             await page.keyboard.press("Shift+F10");
             await page.keyboard.press("t");

test/e2e/core/mapContextMenu.test.js

@@ -87,7 +87,7 @@ jest.setTimeout(50000);
           );
           await page.waitForTimeout(1000);
           await page.click("body > map", { button: "right" });
-          await page.click("div > div.mapml-contextmenu > a:nth-child(1)");
+          await page.click("div > div.mapml-contextmenu > button:nth-child(1)");
           await page.waitForTimeout(1000);
           const extent = await page.$eval(
             "body > map",
@@ -103,7 +103,7 @@ jest.setTimeout(50000);
         });
         test("[" + browserType + "]" + " Context menu, back item at intial location", async () => {
           await page.click("body > map", { button: "right" });
-          await page.click("div > div.mapml-contextmenu > a:nth-child(1)");
+          await page.click("div > div.mapml-contextmenu > button:nth-child(1)");
           await page.waitForTimeout(1000);
           const extent = await page.$eval(
             "body > map",
@@ -119,7 +119,7 @@ jest.setTimeout(50000);
         });
         test("[" + browserType + "]" + " Context menu, forward item", async () => {
           await page.click("body > map", { button: "right" });
-          await page.click("div > div.mapml-contextmenu > a:nth-child(2)");
+          await page.click("div > div.mapml-contextmenu > button:nth-child(2)");
           await page.waitForTimeout(1000);
           const extent = await page.$eval(
             "body > map",
@@ -134,7 +134,7 @@ jest.setTimeout(50000);
         });
         test("[" + browserType + "]" + " Context menu, forward item at most recent location", async () => {
           await page.click("body > map", { button: "right" });
-          await page.click("div > div.mapml-contextmenu > a:nth-child(2)");
+          await page.click("div > div.mapml-contextmenu > button:nth-child(2)");
           await page.waitForTimeout(1000);
           const extent = await page.$eval(
             "body > map",
@@ -156,7 +156,7 @@ jest.setTimeout(50000);
             );
 
             await page.click("body > map", { button: "right" });
-            await page.click("div > div.mapml-contextmenu > a:nth-child(5)");
+            await page.click("div > div.mapml-contextmenu > button:nth-child(5)");
 
             const controlsOff = await page.$eval(
               "div > div.leaflet-control-container > div.leaflet-top.leaflet-left",
@@ -174,7 +174,7 @@ jest.setTimeout(50000);
             );
 
             await page.click("body > map", { button: "right" });
-            await page.click("div > div.mapml-contextmenu > a:nth-child(5)");
+            await page.click("div > div.mapml-contextmenu > button:nth-child(5)");
 
             const controlsOff = await page.$eval(
               "div > div.leaflet-control-container > div.leaflet-top.leaflet-left",
@@ -203,9 +203,9 @@ jest.setTimeout(50000);
             expect(valueBefore).toEqual("0.5");
 
             await page.click("body > map", { button: "right" });
-            await page.click("div > div.mapml-contextmenu > a:nth-child(5)");
+            await page.click("div > div.mapml-contextmenu > button:nth-child(5)");
             await page.click("body > map", { button: "right" });
-            await page.click("div > div.mapml-contextmenu > a:nth-child(5)");
+            await page.click("div > div.mapml-contextmenu > button:nth-child(5)");
 
             const valueAfter = await page.$eval(
               "div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset > details > details > input",
@@ -224,7 +224,7 @@ jest.setTimeout(50000);
             await page.keyboard.press("Tab");
 
           await page.keyboard.press("Enter");
-          await page.click("#mapml-copy-submenu > a:nth-child(10)");
+          await page.click("#mapml-copy-submenu > button:nth-child(10)");
 
           await page.click("body > textarea");
           await page.keyboard.press("Control+v");

test/e2e/core/mapElement.test.js

@@ -70,7 +70,7 @@ jest.setTimeout(50000);
         });
 
         test("[" + browserType + "]" + " Reload button takes you back to initial state", async () => {
-          await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.mapml-reload-button.leaflet-bar.leaflet-control > a");
+          await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.mapml-reload-button.leaflet-bar.leaflet-control > button");
           await page.waitForTimeout(1000);
           const extent = await page.$eval(
             "body > map",

test/e2e/layers/queryLink.test.js

@@ -76,7 +76,7 @@ jest.setTimeout(50000);
         });
         describe("Queried Feature Tests in " + browserType, () => {
           test("[" + browserType + "]" + " First feature added + popup content updated ", async () => {
-            await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.mapml-reload-button.leaflet-bar.leaflet-control > a");
+            await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-left > div.mapml-reload-button.leaflet-bar.leaflet-control > button");
             await page.click("div");
             await page.waitForSelector("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div");
             const feature = await page.$eval(
@@ -93,7 +93,7 @@ jest.setTimeout(50000);
           });
 
           test("[" + browserType + "]" + " Next feature added + popup content updated ", async () => {
-            await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)");
+            await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
             const feature = await page.$eval(
               "div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
               (tile) => tile.getAttribute("d")
@@ -108,7 +108,7 @@ jest.setTimeout(50000);
           });
 
           test("[" + browserType + "]" + " Previous feature added + popup content updated ", async () => {
-            await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(2)");
+            await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(2)");
             const feature = await page.$eval(
               "div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
               (tile) => tile.getAttribute("d")
@@ -124,7 +124,7 @@ jest.setTimeout(50000);
 
           test("[" + browserType + "]" + " PCRS feature added + popup content updated ", async () => {
             for (let i = 0; i < 2; i++)
-              await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)");
+              await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
             const feature = await page.$eval(
               "div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
               (tile) => tile.getAttribute("d")
@@ -139,7 +139,7 @@ jest.setTimeout(50000);
           });
 
           test("[" + browserType + "]" + " TCRS feature added + popup content updated ", async () => {
-            await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)");
+            await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
             const feature = await page.$eval(
               "div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
               (tile) => tile.getAttribute("d")
@@ -154,7 +154,7 @@ jest.setTimeout(50000);
           });
 
           test("[" + browserType + "]" + " Tilematrix feature added + popup content updated ", async () => {
-            await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)");
+            await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
             const feature = await page.$eval(
               "div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
               (tile) => tile.getAttribute("d")
@@ -168,7 +168,7 @@ jest.setTimeout(50000);
             expect(popup).toEqual("TILEMATRIX Test");
           });
           test("[" + browserType + "]" + " Synthesized point, valid location ", async () => {
-            await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)");
+            await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > button:nth-child(4)");
             const feature = await page.$eval(
               "div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path",
               (tile) => tile.getAttribute("d")