From 93430ecd180dc9da4c05e007ff8510c95d6a22a3 Mon Sep 17 00:00:00 2001 From: yushan-mu Date: Tue, 5 Nov 2024 16:19:55 -0500 Subject: [PATCH 1/3] Re-focus after a layer in checked/unchecked in the layer menu, added tests --- .../layers/createLayerControlForLayer.js | 1 + test/e2e/core/kbdFocusLayerMenu.html | 38 ++++++++++ test/e2e/core/kbdFocusLayerMenu.test.js | 75 +++++++++++++++++++ 3 files changed, 114 insertions(+) create mode 100644 test/e2e/core/kbdFocusLayerMenu.html create mode 100644 test/e2e/core/kbdFocusLayerMenu.test.js 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/core/kbdFocusLayerMenu.html b/test/e2e/core/kbdFocusLayerMenu.html new file mode 100644 index 000000000..fc327bcd9 --- /dev/null +++ b/test/e2e/core/kbdFocusLayerMenu.html @@ -0,0 +1,38 @@ + + + + + Keyboard Focus Layer Menu test + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/e2e/core/kbdFocusLayerMenu.test.js b/test/e2e/core/kbdFocusLayerMenu.test.js new file mode 100644 index 000000000..4d59e6a64 --- /dev/null +++ b/test/e2e/core/kbdFocusLayerMenu.test.js @@ -0,0 +1,75 @@ +import { test, expect, chromium } from '@playwright/test'; + +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('kbdFocusLayerMenu.html'); + }); + + test.afterAll(async function () { + await context.close(); + }); + + test('Focus stays on checkbox after checking and unchecking layers in the layer menu', async () => { + 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(); + }); +}); From 346b8f023cf5494dcb154ce67b7bdc2aa4a21b28 Mon Sep 17 00:00:00 2001 From: yushan-mu Date: Wed, 6 Nov 2024 10:02:30 -0500 Subject: [PATCH 2/3] Moved test to layerControl.test.js --- test/e2e/core/kbdFocusLayerMenu.html | 38 -------- test/e2e/core/kbdFocusLayerMenu.test.js | 75 ---------------- test/e2e/layers/layerControl.html | 110 ++++++++++++------------ test/e2e/layers/layerControl.test.js | 78 +++++++++++++++++ 4 files changed, 132 insertions(+), 169 deletions(-) delete mode 100644 test/e2e/core/kbdFocusLayerMenu.html delete mode 100644 test/e2e/core/kbdFocusLayerMenu.test.js diff --git a/test/e2e/core/kbdFocusLayerMenu.html b/test/e2e/core/kbdFocusLayerMenu.html deleted file mode 100644 index fc327bcd9..000000000 --- a/test/e2e/core/kbdFocusLayerMenu.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - Keyboard Focus Layer Menu test - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/test/e2e/core/kbdFocusLayerMenu.test.js b/test/e2e/core/kbdFocusLayerMenu.test.js deleted file mode 100644 index 4d59e6a64..000000000 --- a/test/e2e/core/kbdFocusLayerMenu.test.js +++ /dev/null @@ -1,75 +0,0 @@ -import { test, expect, chromium } from '@playwright/test'; - -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('kbdFocusLayerMenu.html'); - }); - - test.afterAll(async function () { - await context.close(); - }); - - test('Focus stays on checkbox after checking and unchecking layers in the layer menu', async () => { - 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(); - }); -}); diff --git a/test/e2e/layers/layerControl.html b/test/e2e/layers/layerControl.html index 41f2218d1..80b062a2e 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(); + }); + }); }); From 3b6f4037ee87c85446c17facfe9ac183ae5ddd05 Mon Sep 17 00:00:00 2001 From: yushan-mu Date: Wed, 6 Nov 2024 13:51:56 -0500 Subject: [PATCH 3/3] Modified test file --- test/e2e/layers/layerControl.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/layers/layerControl.html b/test/e2e/layers/layerControl.html index 80b062a2e..ceddef94b 100644 --- a/test/e2e/layers/layerControl.html +++ b/test/e2e/layers/layerControl.html @@ -50,7 +50,7 @@ - +