From 987f68453ddebe9927c2a99fe9943d66a8c4da5f Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Tue, 28 Feb 2023 15:18:56 -0500 Subject: [PATCH 1/4] modify zoom screenreader --- src/mapml/handlers/AnnounceMovement.js | 14 +++++------ test/e2e/core/announceMovement.test.js | 34 +++++++++++++++++++++----- 2 files changed, 35 insertions(+), 13 deletions(-) diff --git a/src/mapml/handlers/AnnounceMovement.js b/src/mapml/handlers/AnnounceMovement.js index f1c5ef931..3bb59107e 100644 --- a/src/mapml/handlers/AnnounceMovement.js +++ b/src/mapml/handlers/AnnounceMovement.js @@ -20,7 +20,7 @@ export var AnnounceMovement = L.Handler.extend({ this._map.options.mapEl.removeEventListener('mapfocused', this.focusAnnouncement); }, - focusAnnouncement: function () { + focusAnnouncement: function () { let mapEl = this; setTimeout(function (){ let el = mapEl.querySelector(".mapml-web-map") ? mapEl.querySelector(".mapml-web-map").shadowRoot.querySelector(".leaflet-container") : @@ -28,7 +28,7 @@ export var AnnounceMovement = L.Handler.extend({ let mapZoom = mapEl._map.getZoom(); let location = M._gcrsToTileMatrix(mapEl); - let standard = M.options.locale.amZoom + " " + mapZoom + " " + M.options.locale.amColumn + " " + location[0] + " " + M.options.locale.amRow + " " + location[1]; + let standard = M.options.locale.amZoom + " " + mapZoom; //+ " " + M.options.locale.amColumn + " " + location[0] + " " + M.options.locale.amRow + " " + location[1]; (for coordinates) if(mapZoom === mapEl._map._layersMaxZoom){ standard = M.options.locale.amMaxZoom + " " + standard; @@ -37,10 +37,10 @@ export var AnnounceMovement = L.Handler.extend({ standard = M.options.locale.amMinZoom + " " + standard; } - el.setAttribute("aria-roledescription", "region " + standard); - setTimeout(function () { - el.removeAttribute("aria-roledescription"); - }, 2000); + // el.setAttribute("aria-roledescription", "region " + standard); + // setTimeout(function () { + // el.removeAttribute("aria-roledescription"); + // }, 2000); }, 0); }, @@ -62,7 +62,7 @@ export var AnnounceMovement = L.Handler.extend({ //GCRS to TileMatrix let location = M._gcrsToTileMatrix(this); - let standard = M.options.locale.amZoom + " " + mapZoom + " " + M.options.locale.amColumn + " " + location[0] + " " + M.options.locale.amRow + " " + location[1]; + let standard = M.options.locale.amZoom + " " + mapZoom;// + " " + M.options.locale.amColumn + " " + location[0] + " " + M.options.locale.amRow + " " + location[1]; (for coordinates) if(!visible){ let outOfBoundsPos = this._history[this._historyIndex]; diff --git a/test/e2e/core/announceMovement.test.js b/test/e2e/core/announceMovement.test.js index d37cc59a9..6103ca813 100644 --- a/test/e2e/core/announceMovement.test.js +++ b/test/e2e/core/announceMovement.test.js @@ -23,7 +23,7 @@ test.describe("Announce movement test", ()=> { "body > mapml-viewer div > output", (output) => output.innerHTML ); - expect(movedUp).toEqual("zoom level 0 column 3 row 3"); + expect(movedUp).toEqual("zoom level 0"); for(let i = 0; i < 2; i++){ await page.keyboard.press("ArrowLeft"); @@ -34,7 +34,7 @@ test.describe("Announce movement test", ()=> { "body > mapml-viewer div > output", (output) => output.innerHTML ); - expect(movedLeft).toEqual("zoom level 0 column 2 row 3"); + expect(movedLeft).toEqual("zoom level 0"); await page.keyboard.press("Equal"); await page.waitForTimeout(1000); @@ -43,11 +43,33 @@ test.describe("Announce movement test", ()=> { "body > mapml-viewer div > output", (output) => output.innerHTML ); - expect(zoomedIn).toEqual("zoom level 1 column 4 row 6"); + expect(zoomedIn).toEqual("zoom level 1"); + + await page.keyboard.press("Minus"); + await page.waitForTimeout(1000); + + const zoomedOut = await page.$eval( + "body > mapml-viewer div > output", + (output) => output.innerHTML + ); + expect(zoomedOut).toEqual("At minimum zoom level, zoom out disabled zoom level 0"); + // testing + button + await page.keyboard.press("Tab"); + await page.keyboard.press("Enter"); + await page.waitForTimeout(1000); + + const zoomedBackIn = await page.$eval( + "body > mapml-viewer div > output", + (output) => output.innerHTML + ); + expect(zoomedBackIn).toEqual("zoom level 1"); + + }); test("Output values are correct at bounds and bounces back", async ()=>{ //Zoom out to min layer bound + await page.keyboard.press("Shift+Tab"); await page.keyboard.press("Minus"); await page.waitForTimeout(1000); @@ -55,7 +77,7 @@ test.describe("Announce movement test", ()=> { "body > mapml-viewer div > output", (output) => output.innerHTML ); - expect(minZoom).toEqual("At minimum zoom level, zoom out disabled zoom level 0 column 2 row 3"); + expect(minZoom).toEqual("At minimum zoom level, zoom out disabled zoom level 0"); //Pan out of west bounds, expect the map to bounce back for(let i = 0; i < 4; i++){ @@ -74,7 +96,7 @@ test.describe("Announce movement test", ()=> { "body > mapml-viewer div > output", (output) => output.innerHTML ); - expect(bouncedBack).toEqual("zoom level 0 column 1 row 3"); + expect(bouncedBack).toEqual("zoom level 0"); //Zoom in out of bounds, expect the map to zoom back await page.keyboard.press("Equal"); @@ -90,7 +112,7 @@ test.describe("Announce movement test", ()=> { "body > mapml-viewer div > output", (output) => output.innerHTML ); - expect(zoomedBack).toEqual("zoom level 0 column 1 row 3"); + expect(zoomedBack).toEqual("zoom level 0"); }); }); \ No newline at end of file From 81efb7663c34889bea4a4312c9ba97c44fb6c44f Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Wed, 1 Mar 2023 17:06:22 -0500 Subject: [PATCH 2/4] update --- src/mapml/handlers/AnnounceMovement.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/mapml/handlers/AnnounceMovement.js b/src/mapml/handlers/AnnounceMovement.js index 3bb59107e..2f62dcce7 100644 --- a/src/mapml/handlers/AnnounceMovement.js +++ b/src/mapml/handlers/AnnounceMovement.js @@ -37,10 +37,10 @@ export var AnnounceMovement = L.Handler.extend({ standard = M.options.locale.amMinZoom + " " + standard; } - // el.setAttribute("aria-roledescription", "region " + standard); - // setTimeout(function () { - // el.removeAttribute("aria-roledescription"); - // }, 2000); + el.setAttribute("aria-roledescription", "region " + standard); + setTimeout(function () { + el.removeAttribute("aria-roledescription"); + }, 2000); }, 0); }, From f7694d9e0222d31fcfa948c9f832ef9d30eb97d0 Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Fri, 3 Mar 2023 15:23:31 -0500 Subject: [PATCH 3/4] fixes --- src/mapml/handlers/AnnounceMovement.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/mapml/handlers/AnnounceMovement.js b/src/mapml/handlers/AnnounceMovement.js index 2f62dcce7..a6d9b1232 100644 --- a/src/mapml/handlers/AnnounceMovement.js +++ b/src/mapml/handlers/AnnounceMovement.js @@ -28,8 +28,8 @@ export var AnnounceMovement = L.Handler.extend({ let mapZoom = mapEl._map.getZoom(); let location = M._gcrsToTileMatrix(mapEl); - let standard = M.options.locale.amZoom + " " + mapZoom; //+ " " + M.options.locale.amColumn + " " + location[0] + " " + M.options.locale.amRow + " " + location[1]; (for coordinates) - + let standard = M.options.locale.amZoom + " " + mapZoom; + if(mapZoom === mapEl._map._layersMaxZoom){ standard = M.options.locale.amMaxZoom + " " + standard; } @@ -62,7 +62,7 @@ export var AnnounceMovement = L.Handler.extend({ //GCRS to TileMatrix let location = M._gcrsToTileMatrix(this); - let standard = M.options.locale.amZoom + " " + mapZoom;// + " " + M.options.locale.amColumn + " " + location[0] + " " + M.options.locale.amRow + " " + location[1]; (for coordinates) + let standard = M.options.locale.amZoom + " " + mapZoom; if(!visible){ let outOfBoundsPos = this._history[this._historyIndex]; From e95b793e2178d5d192c69d8392e429a404b60ed7 Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Mon, 13 Mar 2023 14:20:20 -0400 Subject: [PATCH 4/4] create scalebar control module --- src/mapml/control/ScaleBar.js | 20 ++++++++++++++++++++ src/mapml/handlers/AnnounceScale.js | 0 src/mapml/index.js | 4 ++++ 3 files changed, 24 insertions(+) create mode 100644 src/mapml/control/ScaleBar.js create mode 100644 src/mapml/handlers/AnnounceScale.js diff --git a/src/mapml/control/ScaleBar.js b/src/mapml/control/ScaleBar.js new file mode 100644 index 000000000..553f7d92a --- /dev/null +++ b/src/mapml/control/ScaleBar.js @@ -0,0 +1,20 @@ +export var ScaleBar = L.Control.extend({ + options: { + metric: true, + imperial: true, + maxWidth: 100, + updateWhenIdle: true, + position: 'bottomleft' + }, + + onAdd: function (map) { + let container = L.DomUtil.create('div','leaflet-control-scale'); + + L.control.scale(this.options).addTo(map); + + return container; + }, + }); +export var scaleBar = function (options) { + return new ScaleBar(options); +}; diff --git a/src/mapml/handlers/AnnounceScale.js b/src/mapml/handlers/AnnounceScale.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/mapml/index.js b/src/mapml/index.js index 938a47deb..d5fea5d94 100644 --- a/src/mapml/index.js +++ b/src/mapml/index.js @@ -52,6 +52,7 @@ import { QueryHandler } from './handlers/QueryHandler'; import { ContextMenu } from './handlers/ContextMenu'; import { Util } from './utils/Util'; import { ReloadButton, reloadButton } from './control/ReloadButton'; +import { ScaleBar, scaleBar } from './control/ScaleBar'; import { FullscreenButton, fullscreenButton } from './control/FullscreenButton'; import {attributionControl} from "./control/AttributionControl"; import { Crosshair, crosshair } from "./layers/Crosshair"; @@ -654,6 +655,9 @@ M.layerControl = layerControl; M.ReloadButton = ReloadButton; M.reloadButton = reloadButton; +M.ScaleBar = ScaleBar; +M.scaleBar = scaleBar; + M.FullscreenButton = FullscreenButton; M.fullscreenButton = fullscreenButton;