From 02f57b42c2e57a5e57e7fa0919b80316c4dbbc77 Mon Sep 17 00:00:00 2001
From: Malvoz <26493779+Malvoz@users.noreply.github.com>
Date: Tue, 18 May 2021 18:06:11 +0200
Subject: [PATCH 1/2] Increase default size of popup controls, `<nav>` for
 mapml-focus-buttons

---
 src/mapml.css                     | 53 ++++++++++++++++++++++++++++---
 src/mapml/layers/MapLayer.js      | 11 +++----
 test/e2e/layers/queryLink.test.js | 12 +++----
 3 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/src/mapml.css b/src/mapml.css
index c6721291b..e13ffb344 100644
--- a/src/mapml.css
+++ b/src/mapml.css
@@ -442,10 +442,8 @@ summary {
 	padding: 0 4px 0 4px;
 	border: none;
 	text-align: center;
-	width: 18px;
-	height: 14px;
 	font: 16px/14px Tahoma, Verdana, sans-serif;
-	color: #c3c3c3;
+	color: inherit;
 	text-decoration: none;
 	font-weight: bold;
   background: transparent;
@@ -454,7 +452,6 @@ summary {
 
 .mapml-focus-buttons {
   white-space: nowrap;
-  display: inline;
 }
 
 .mapml-feature-count {
@@ -464,6 +461,54 @@ summary {
   padding: 2px;
 }
 
+.mapml-focus-buttons a,
+.leaflet-container a.leaflet-popup-close-button {
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  min-height: 44px;
+  line-height: 44px;
+}
+.leaflet-popup-content {
+  margin: 0;
+  min-width: min-content;
+}
+.mapml-popup-content {
+  padding-top: 44px;
+}
+.mapml-focus-buttons {
+  display: block;
+  text-align: center;
+}
+.mapml-focus-buttons a {
+  display: inline-block;
+  padding: 0;
+}
+.leaflet-container a.leaflet-popup-close-button {
+  padding: 0;
+  font-size: 20px;
+}
+.leaflet-popup-content .mapml-feature-count {
+  margin: 0;
+  padding: 0 5px;
+  line-height: 44px;
+}
+.mapml-popup-content hr:last-of-type {
+  margin-bottom: 0;
+  border-bottom: 0;
+  border-top: 1px solid #e3e3e3;
+}
+.mapml-popup-content :first-child {
+  margin-top: 0;
+  padding-top: 0;
+}
+.mapml-popup-content > :not(.mapml-focus-buttons) {
+  padding: 0 1rem;
+}
+.leaflet-popup-tip-container {
+  margin-top: -1px;
+}
+
 .mapml-outline {
   outline-style: auto;
   outline-offset: -1px;
diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js
index 5d610c52a..76f81e7bb 100644
--- a/src/mapml/layers/MapLayer.js
+++ b/src/mapml/layers/MapLayer.js
@@ -98,7 +98,7 @@ export var MapMLLayer = L.Layer.extend({
                   var c = document.createElement('div');
                   c.classList.add("mapml-popup-content");
                   c.insertAdjacentHTML('afterbegin', properties.innerHTML);
-                  geometry.bindPopup(c, {autoClose: false, minWidth: 108});
+                  geometry.bindPopup(c, {autoClose: false, minWidth: 165});
                 }
               }
             });
@@ -129,7 +129,7 @@ export var MapMLLayer = L.Layer.extend({
                       var c = document.createElement('div');
                       c.classList.add("mapml-popup-content");
                       c.insertAdjacentHTML('afterbegin', properties.innerHTML);
-                      geometry.bindPopup(c, {autoClose: false, minWidth: 108});
+                      geometry.bindPopup(c, {autoClose: false, minWidth: 165});
                     }
                   }
                 }).addTo(map);
@@ -1192,12 +1192,12 @@ export var MapMLLayer = L.Layer.extend({
         layer = popup._source._templatedLayer;
       }
 
-      if(popup._container.querySelector('div[class="mapml-focus-buttons"]')){
-        L.DomUtil.remove(popup._container.querySelector('div[class="mapml-focus-buttons"]'));
+      if(popup._container.querySelector('nav[class="mapml-focus-buttons"]')){
+        L.DomUtil.remove(popup._container.querySelector('nav[class="mapml-focus-buttons"]'));
         L.DomUtil.remove(popup._container.querySelector('hr'));
       }
       //add when popopen event happens instead
-      let div = L.DomUtil.create("div", "mapml-focus-buttons");
+      let div = L.DomUtil.create("nav", "mapml-focus-buttons");
 
       // creates |< button, focuses map
       let mapFocusButton = L.DomUtil.create('a',"mapml-popup-button", div);
@@ -1251,7 +1251,6 @@ export var MapMLLayer = L.Layer.extend({
       }, popup);
   
       let divider = L.DomUtil.create("hr");
-      divider.style.borderTop = "1px solid #bbb";
 
       popup._navigationBar = div;
       popup._content.appendChild(divider);
diff --git a/test/e2e/layers/queryLink.test.js b/test/e2e/layers/queryLink.test.js
index 7a8e1d9bc..4a13126ea 100644
--- a/test/e2e/layers/queryLink.test.js
+++ b/test/e2e/layers/queryLink.test.js
@@ -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 > div > 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 > a: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 > div > 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 > a: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 > div > 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 > a: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 > div > 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 > a: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 > div > 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 > a: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 > div > 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 > a: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")

From 96127831d3f9ecb1b64405c3033efe5d52f4e4af Mon Sep 17 00:00:00 2001
From: Malvoz <26493779+Malvoz@users.noreply.github.com>
Date: Tue, 18 May 2021 18:46:48 +0200
Subject: [PATCH 2/2] Set `role="dialog"` on popup containers

---
 src/mapml/layers/MapLayer.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js
index 76f81e7bb..2cd89a976 100644
--- a/src/mapml/layers/MapLayer.js
+++ b/src/mapml/layers/MapLayer.js
@@ -1182,6 +1182,7 @@ export var MapMLLayer = L.Layer.extend({
       let popup = e.popup, map = e.target, layer, group,
           content = popup._container.getElementsByClassName("mapml-popup-content")[0];
 
+      popup._container.setAttribute("role", "dialog");
       content.setAttribute("tabindex", "-1");
       popup._count = 0; // used for feature pagination