WIP on map-link:

- fix bug in "Focus Controls" popup navigation button - closes Maps4HTML#828
prushforth · Feb 23, 2024 · dabd75c · dabd75c
1 parent 7cb1984
commit dabd75c
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 2 deletions.
diff --git a/src/mapml/layers/MapMLLayer.js b/src/mapml/layers/MapMLLayer.js
@@ -489,10 +489,10 @@ export var MapMLLayer = L.LayerGroup.extend({
         map.featureIndex._sortIndex();
         map.featureIndex.currentIndex =
           map.featureIndex.inBoundFeatures.length - 1;
-        map.featureIndex.inBoundFeatures[0].path.setAttribute('tabindex', -1);
+        map.featureIndex.inBoundFeatures[0]?.path.setAttribute('tabindex', -1);
         map.featureIndex.inBoundFeatures[
           map.featureIndex.currentIndex
-        ].path.setAttribute('tabindex', 0);
+        ]?.path.setAttribute('tabindex', 0);
         L.DomEvent.stop(e);
         map.closePopup();
         map._controlContainer.querySelector('A:not([hidden])').focus();

diff --git a/test/e2e/core/focusControls.html b/test/e2e/core/focusControls.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <title>Query Popup Navigation test</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="module" src="mapml-viewer.js"></script>
+  </head>
+
+  <body>
+  <mapml-viewer data-testid="viewer" style="width: 500px;height: 500px;" projection="CBMTILE" zoom="1" lat="46.17" lon="-88.9" controls>
+    <layer- id="query" label="Fire" checked>
+      <map-extent units="CBMTILE" checked hidden>
+        <map-input name="z" type="zoom" value="18" min="0" max="18" ></map-input>
+        <map-input name="txmin" type="location" units="tilematrix" position="top-left" axis="easting"  ></map-input>
+        <map-input name="tymin" type="location" units="tilematrix" position="bottom-left" axis="northing"></map-input>
+        <map-input name="txmax" type="location" units="tilematrix" position="top-right" axis="easting"></map-input>
+        <map-input name="tymax" type="location" units="tilematrix" position="top-left" axis="northing"></map-input>
+        <map-input name="i" type="location" units="map" axis="i" ></map-input>
+        <map-input name="j" type="location" units="map" axis="j" ></map-input>
+        <map-input name="xmin" type="location" units="pcrs" position="top-left" axis="easting"></map-input>
+        <map-input name="ymin" type="location" units="pcrs" position="bottom-left" axis="northing"></map-input>
+        <map-input name="xmax" type="location" units="pcrs" position="top-right" axis="easting"></map-input>
+        <map-input name="ymax" type="location" units="pcrs" position="top-left" axis="northing"></map-input>
+        <map-input name="w" type="width" ></map-input>
+        <map-input name="h" type="height" ></map-input>
+        <map-link rel="query" tref="data/query-feature.mapml?service=WMS&version=1.3.0&request=GetFeatureInfo&i={i}&j={j}&query_layers=FBP_FuelLayer_wBurnScars&layers=FBP_FuelLayer_wBurnScars&info_format=text/html&bbox={xmin},{ymin},{xmax},{ymax}&width={w}&height={h}&CRS=EPSG:3857"></map-link>
+      </map-extent>
+    </layer->
+
+  </mapml-viewer>
+</body>
+
+</html>
diff --git a/test/e2e/core/focusControls.test.js b/test/e2e/core/focusControls.test.js
@@ -0,0 +1,24 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe('Playwright Keyboard Navigation + Query Layer Tests', () => {
+  let page;
+  let context;
+  test.beforeAll(async () => {
+    context = await chromium.launchPersistentContext('');
+    page =
+      context.pages().find((page) => page.url() === 'about:blank') ||
+      (await context.newPage());
+    await page.goto('focusControl.html');
+    await page.waitForTimeout(1000);
+  });
+
+  test.afterAll(async function () {
+    await context.close();
+  });
+
+  test('Focus Controls button after query focuses the zoom in control', async () => {
+    await page.getByTestId('viewer').click();
+    await page.getByTitle('Focus Controls').click();
+    await expect(page.getByTitle('Zoom in')).toBeFocused();
+  });
+});
diff --git a/test/e2e/data/tiles/cbmt/query-feature.mapml b/test/e2e/data/tiles/cbmt/query-feature.mapml
@@ -0,0 +1,18 @@
+<mapml- xmlns="http://www.w3.org/1999/xhtml">
+    <map-head>
+        <map-title>A Feature, Returned by a Query</map-title>
+        <map-meta name="projection" content="CBMTILE"></map-meta>
+    </map-head>
+    <map-body>
+        <map-feature data-testid="pcrsgeometry" zoom="1">
+            <map-properties>
+                <h1>Test</h1>
+            </map-properties>
+            <map-geometry cs="pcrs">
+                <map-polygon>
+                    <map-coordinates>-2826361 3009094 3788235 3009094 3788235 -3605502 -2826361 -3605502 -2826361 3009094</map-coordinates>
+                </map-polygon>
+            </map-geometry>
+        </map-feature>
+    </map-body>
+</mapml->