diff --git a/src/mapml/elementSupport/layers/createLayerControlForLayer.js b/src/mapml/elementSupport/layers/createLayerControlForLayer.js
index 44e3388b9..ca7305c0e 100644
--- 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
index 41f2218d1..ceddef94b 100644
--- a/test/e2e/layers/layerControl.html
+++ b/test/e2e/layers/layerControl.html
@@ -1,68 +1,66 @@
-
+
-
-
- Layer Control Tests
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test/e2e/layers/layerControl.test.js b/test/e2e/layers/layerControl.test.js
index 0b2392feb..99b6a92ea 100644
--- 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();
+ });
+ });
});