Re-focus after a layer in checked/unchecked in the layer menu, added …

…tests (#1009) * Re-focus after a layer in checked/unchecked in the layer menu, added tests * Moved test to layerControl.test.js * Modified test file
Maps4HTML · Nov 6, 2024 · 9f737ad · 9f737ad
1 parent dc67a5d
commit 9f737ad
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 56 deletions.
diff --git a/src/mapml/elementSupport/layers/createLayerControlForLayer.js b/src/mapml/elementSupport/layers/createLayerControlForLayer.js
@@ -134,6 +134,7 @@ export var createLayerControlHTML = async function () {
   layerItemName.layer = this._layer;
   const changeCheck = function () {
     this.checked = !this.checked;
+    this._layerControlCheckbox.focus();
   };
   input.addEventListener('change', changeCheck.bind(this));
   if (this._layer._legendUrl) {

diff --git a/test/e2e/layers/layerControl.html b/test/e2e/layers/layerControl.html
@@ -1,68 +1,66 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>Layer Control Tests</title>
-  <script type="module" src="mapml.js"></script>
-  <style>
-    html,
-    body {
-      height: 100%;
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-    }
-
-    /* Specifying the `:defined` selector is recommended to style the map 
-       element, such that styles don't apply when fallback content is in use 
-       (e.g. when scripting is disabled or when custom/built-in elements isn't 
-       supported in the browser). */
-    mapml-viewer:defined {
-      /* Responsive map. */
-      max-width: 100%;
-
-      /* Full viewport. */
-      width: 100%;
-      height: 100%;
-
-      /* Remove default (native-like) border. */
-      /* border: none; */
-    }
-
-    /* Pre-style to avoid FOUC of inline map-layer and fallback content. */
-    mapml-viewer:not(:defined)>* {
-      display: none;
-    }
-
-    /* Ensure inline layer content is hidden if custom/built-in elements isn't 
-       supported, or if javascript is disabled. This needs to be defined separately 
-       from the above, because the `:not(:defined)` selector invalidates the entire 
-       declaration in browsers that do not support it. */
-    map-layer {
-      display: none;
-    }
-  </style>
-  <noscript>
+    <title>Layer Control Tests</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="module" src="mapml.js"></script>
     <style>
-      /* Ensure fallback content (children of the map element) is displayed if 
-         custom/built-in elements is supported but javascript is disabled. */
-      mapml-viewer:not(:defined)> :not(map-layer) {
-        display: initial;
+      html, body {
+        height: 100%;
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+      }
+
+      /* Specifying the `:defined` selector is recommended to style the map 
+         element, such that styles don't apply when fallback content is in use 
+         (e.g. when scripting is disabled or when custom/built-in elements isn't 
+         supported in the browser). */
+      mapml-viewer:defined {
+        /* Responsive map. */
+        max-width: 100%;
+
+        /* Full viewport. */
+        width: 100%;
+        height: 100%;
+
+        /* Remove default (native-like) border. */
+        /* border: none; */
+      }
+
+      /* Pre-style to avoid FOUC of inline map-layer and fallback content. */
+      mapml-viewer:not(:defined)>* {
+        display: none;
+      }
+
+      /* Ensure inline layer content is hidden if custom/built-in elements isn't 
+         supported, or if javascript is disabled. This needs to be defined separately 
+         from the above, because the `:not(:defined)` selector invalidates the entire 
+         declaration in browsers that do not support it. */
+      map-layer {
+        display: none;
       }
     </style>
-  </noscript>
 </head>
 
 <body>
-  <mapml-viewer projection="CBMTILE" zoom="2" lat="61.2091250" lon="-90.8508370" controls>
-    <map-layer hidden label="Canada Base Map - Transportation (CBMT)" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/"
-      checked>
-    </map-layer>
-  </mapml-viewer>
+    <mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls=""
+        controlslist="geolocation">
+        <map-layer data-testid="osm-layer" label="OpenStreetMap" checked="" hidden="">
+            <map-link rel="license" title="Â© OpenStreetMap contributors CC BY-SA"
+                href="https://www.openstreetmap.org/copyright"></map-link>
+            <map-extent units="OSMTILE" checked="checked">
+                <map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
+                <map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
+                <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
+                <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
+            </map-extent>
+        </map-layer>
+    </mapml-viewer>
 </body>
 
 </html>
diff --git a/test/e2e/layers/layerControl.test.js b/test/e2e/layers/layerControl.test.js
@@ -37,4 +37,82 @@ test.describe('Playwright layerControl Tests', () => {
       expect(controlsHidden).toEqual(false);
     });
   });
+
+  test.describe('Focus stays on checkboxes when using keyboard navigation', () => {
+    let page;
+    let context;
+    test.beforeAll(async () => {
+      context = await chromium.launchPersistentContext('', {
+        slowMo: 250
+      });
+      page =
+        context.pages().find((page) => page.url() === 'about:blank') ||
+        (await context.newPage());
+      page = await context.newPage();
+      await page.goto('layerControl.html');
+    });
+
+    test.afterAll(async function () {
+      await context.close();
+    });
+
+    test('Focus stays on checkbox after checking and unchecking layers in the layer menu', async () => {
+      const map = await page.locator('body > mapml-viewer');
+      await map.evaluate((map) =>
+        map.querySelector('map-layer').removeAttribute('hidden')
+      );
+      const layer = await page.locator('map-layer');
+      let layerChecked = await layer.getAttribute('checked');
+      expect(layerChecked).not.toBeNull();
+
+      // use keyboard to uncheck layer
+      await page.locator('mapml-viewer').click();
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Enter');
+      await page.keyboard.press('Space');
+
+      // layer should be unchecked
+      layerChecked = await layer.getAttribute('checked');
+      expect(layerChecked).toBeNull();
+
+      // pressing space again should check the layer
+      await page.keyboard.press('Space');
+      layerChecked = await layer.getAttribute('checked');
+      expect(layerChecked).not.toBeNull();
+    });
+
+    test('Focus stays on checkbox after checking and unchecking extents in the layer menu', async () => {
+      const extent = await page.locator('map-extent');
+      let extentChecked = await extent.getAttribute('checked');
+      expect(extentChecked).not.toBeNull();
+
+      // use keyboard to uncheck map-extent
+      await page.locator('mapml-viewer').click();
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Enter');
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Enter');
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Space');
+
+      // extent should be unchecked
+      extentChecked = await extent.getAttribute('checked');
+      expect(extentChecked).toBeNull();
+
+      // pressing space again should check the extent
+      await page.keyboard.press('Space');
+      extentChecked = await extent.getAttribute('checked');
+      expect(extentChecked).not.toBeNull();
+    });
+  });
 });