-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Announce move and zoom and implement bounce back at bounds
Create util function for zoom/movement screen reader support Fix setTimeout Focus on the map Focus on the map Fix focus on the map Add announceMoveAndZoom functionality to all layer types Use aria-label for announce zoom and move Use output element for announcing zoom and move Add/Fix zoom and pan bounds Add dragging bounds Create new handler to listen for move events Add bounds Implement combined bounds to handle multiple layers bound check [work in progress] Implement combined bounds to handle multiple layers bound check [work in progress] Fix total bounds and bounds check Add total bounds rectangle to debug layer Change output element and total layer bounds rectangle position in dom to satisfy tests Disable bounds check when no bounds are present Refactor output element Set initial bounds to center of first bounds instead of [0,0] Clean up code Refactor output element class name Resolve indexing issues [work in progress] Make deselected layers not considered for the total bounds Use layeradd/layerremove instead of checkdisable for timing reasons Announce location on focus Fix max/min zoom announcements Fix dragged out of bounds condition Fix dragged out of bounds condition Merge in history fix Fix double moveend call issue Remove console log Add announceMovement test
- Loading branch information
Showing
10 changed files
with
285 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -73,7 +73,7 @@ | |
| .mapml-layer-item-name a { | ||
| color: revert; | ||
| } | ||
|
|
||
| .leaflet-top .leaflet-control { | ||
| margin-top: 5px; | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| export var AnnounceMovement = L.Handler.extend({ | ||
| addHooks: function () { | ||
| this._map.on({ | ||
| layeradd: this.totalBounds, | ||
| layerremove: this.totalBounds, | ||
| }); | ||
|
|
||
| this._map.options.mapEl.addEventListener('moveend', this.announceBounds); | ||
| this._map.options.mapEl.addEventListener('focus', this.focusAnnouncement); | ||
| this._map.dragging._draggable.addEventListener('dragstart', this.dragged); | ||
| }, | ||
| removeHooks: function () { | ||
| this._map.off({ | ||
| layeradd: this.totalBounds, | ||
| layerremove: this.totalBounds, | ||
| }); | ||
|
|
||
| this._map.options.mapEl.removeEventListener('moveend', this.announceBounds); | ||
| this._map.options.mapEl.removeEventListener('focus', this.focusAnnouncement); | ||
| this._map.dragging._draggable.removeEventListener('dragstart', this.dragged); | ||
| }, | ||
|
|
||
| focusAnnouncement: function () { | ||
| let el = this.querySelector(".mapml-web-map") ? this.querySelector(".mapml-web-map").shadowRoot.querySelector(".leaflet-container") : | ||
| this.shadowRoot.querySelector(".leaflet-container"); | ||
|
|
||
| let mapZoom = this._map.getZoom(); | ||
| let location = M.gcrsToTileMatrix(this); | ||
| let standard = " zoom level " + mapZoom + " column " + location[0] + " row " + location[1]; | ||
|
|
||
| if(mapZoom === this._map._layersMaxZoom){ | ||
| standard = "At maximum zoom level, zoom in disabled " + standard; | ||
| } | ||
| else if(mapZoom === this._map._layersMinZoom){ | ||
| standard = "At minimum zoom level, zoom out disabled " + standard; | ||
| } | ||
|
|
||
| el.setAttribute("aria-roledescription", "region " + standard); | ||
| }, | ||
|
|
||
| announceBounds: function () { | ||
| if(this._traversalCall > 0){ | ||
| return; | ||
| } | ||
| let mapZoom = this._map.getZoom(); | ||
| let mapBounds = M.pixelToPCRSBounds(this._map.getPixelBounds(),mapZoom,this._map.options.projection); | ||
|
|
||
| let visible = true; | ||
| if(this._map.totalLayerBounds){ | ||
| visible = mapZoom <= this._map._layersMaxZoom && mapZoom >= this._map._layersMinZoom && | ||
| this._map.totalLayerBounds.overlaps(mapBounds); | ||
| } | ||
|
|
||
| let output = this.querySelector(".mapml-web-map") ? this.querySelector(".mapml-web-map").shadowRoot.querySelector(".mapml-screen-reader-output") : | ||
| this.shadowRoot.querySelector(".mapml-screen-reader-output"); | ||
|
|
||
| //GCRS to TileMatrix | ||
| let location = M.gcrsToTileMatrix(this); | ||
| let standard = "zoom level " + mapZoom + " column " + location[0] + " row " + location[1]; | ||
|
|
||
| if(!visible){ | ||
| let outOfBoundsPos = this._history[this._historyIndex]; | ||
| let inBoundsPos = this._history[this._historyIndex - 1]; | ||
| this.back(); | ||
| this._history.pop(); | ||
|
|
||
| if(outOfBoundsPos.zoom !== inBoundsPos.zoom){ | ||
| output.innerText = "Zoomed out of bounds, returning to"; | ||
| } | ||
| else if(this._map.dragging._draggable.wasDragged){ | ||
| output.innerText = "Dragged out of bounds, returning to "; | ||
| } | ||
| else if(outOfBoundsPos.x > inBoundsPos.x){ | ||
| output.innerText = "Reached east bound, panning east disabled"; | ||
| } | ||
| else if(outOfBoundsPos.x < inBoundsPos.x){ | ||
| output.innerText = "Reached west bound, panning west disabled"; | ||
| } | ||
| else if(outOfBoundsPos.y < inBoundsPos.y){ | ||
| output.innerText = "Reached north bound, panning north disabled"; | ||
| } | ||
| else if(outOfBoundsPos.y > inBoundsPos.y){ | ||
| output.innerText = "Reached south bound, panning south disabled"; | ||
| } | ||
|
|
||
| } | ||
| else{ | ||
| let prevZoom = this._history[this._historyIndex - 1].zoom; | ||
| if(mapZoom === this._map._layersMaxZoom && mapZoom !== prevZoom){ | ||
| output.innerText = "At maximum zoom level, zoom in disabled " + standard; | ||
| } | ||
| else if(mapZoom === this._map._layersMinZoom && mapZoom !== prevZoom){ | ||
| output.innerText = "At minimum zoom level, zoom out disabled " + standard; | ||
| } | ||
| else { | ||
| output.innerText = standard; | ||
| } | ||
| } | ||
| this._map.dragging._draggable.wasDragged = false; | ||
| }, | ||
|
|
||
| totalBounds: function () { | ||
| let layers = Object.keys(this._layers); | ||
| let bounds = L.bounds(); | ||
|
|
||
| layers.forEach(i => { | ||
| if(this._layers[i].layerBounds){ | ||
| if(!bounds){ | ||
| let point = this._layers[i].layerBounds.getCenter(); | ||
| bounds = L.bounds(point, point); | ||
| } | ||
| bounds.extend(this._layers[i].layerBounds.min); | ||
| bounds.extend(this._layers[i].layerBounds.max); | ||
| } | ||
| }); | ||
|
|
||
| this.totalLayerBounds = bounds; | ||
| }, | ||
|
|
||
| dragged: function () { | ||
| this.wasDragged = true; | ||
| } | ||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| const playwright = require("playwright"); | ||
| jest.setTimeout(50000); | ||
| (async () => { | ||
| for (const browserType of BROWSER) { | ||
| describe( | ||
| "Announce movement test " + browserType, | ||
| ()=> { | ||
| beforeAll(async () => { | ||
| browser = await playwright[browserType].launch({ | ||
| headless: ISHEADLESS, | ||
| slowMo: 100, | ||
| }); | ||
| context = await browser.newContext(); | ||
| page = await context.newPage(); | ||
| if (browserType === "firefox") { | ||
| await page.waitForNavigation(); | ||
| } | ||
| await page.goto(PATH + "mapml-viewer.html"); | ||
| }); | ||
| afterAll(async function () { | ||
| await browser.close(); | ||
| }); | ||
|
|
||
| test("[" + browserType + "]" + " Output values are correct during regular movement", async ()=>{ | ||
| const announceMovement = await page.$eval( | ||
| "body > mapml-viewer", | ||
| (map) => map._map.announceMovement._enabled | ||
| ); | ||
| if(!announceMovement){ | ||
| return; | ||
| } | ||
| await page.keyboard.press("Tab"); | ||
| await page.keyboard.press("ArrowUp"); | ||
| await page.waitForTimeout(100); | ||
|
|
||
| const movedUp = await page.$eval( | ||
| "body > mapml-viewer div > output", | ||
| (output) => output.innerHTML | ||
| ); | ||
| expect(movedUp).toEqual("zoom level 0 column 3 row 3"); | ||
|
|
||
| for(let i = 0; i < 2; i++){ | ||
| await page.keyboard.press("ArrowLeft"); | ||
| await page.waitForTimeout(100); | ||
| } | ||
|
|
||
| const movedLeft = await page.$eval( | ||
| "body > mapml-viewer div > output", | ||
| (output) => output.innerHTML | ||
| ); | ||
| expect(movedLeft).toEqual("zoom level 0 column 2 row 3"); | ||
|
|
||
| await page.keyboard.press("Equal"); | ||
| await page.waitForTimeout(100); | ||
|
|
||
| const zoomedIn = await page.$eval( | ||
| "body > mapml-viewer div > output", | ||
| (output) => output.innerHTML | ||
| ); | ||
| expect(zoomedIn).toEqual("zoom level 1 column 4 row 6"); | ||
| }); | ||
|
|
||
| test("[" + browserType + "]" + " Output values are correct at bounds and bounces back", async ()=>{ | ||
| const announceMovement = await page.$eval( | ||
| "body > mapml-viewer", | ||
| (map) => map._map.announceMovement._enabled | ||
| ); | ||
| if(!announceMovement){ | ||
| return; | ||
| } | ||
| //Zoom out to min layer bound | ||
| await page.keyboard.press("Minus"); | ||
| await page.waitForTimeout(100); | ||
|
|
||
| const minZoom = await page.$eval( | ||
| "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"); | ||
|
|
||
| //Pan out of west bounds, expect the map to bounce back | ||
| for(let i = 0; i < 4; i++){ | ||
| await page.waitForTimeout(100); | ||
| await page.keyboard.press("ArrowLeft"); | ||
| } | ||
|
|
||
| const westBound = await page.waitForFunction(() => | ||
| document.querySelector("body > mapml-viewer").shadowRoot.querySelector("div > output").innerHTML === "Reached west bound, panning west disabled", | ||
| {}, {timeout: 1000} | ||
| ); | ||
| expect(await westBound.jsonValue()).toEqual(true); | ||
|
|
||
| const bouncedBack = await page.$eval( | ||
| "body > mapml-viewer div > output", | ||
| (output) => output.innerHTML | ||
| ); | ||
| expect(bouncedBack).toEqual("zoom level 0 column 1 row 3"); | ||
|
|
||
| //Zoom in out of bounds, expect the map to zoom back | ||
| await page.keyboard.press("Equal"); | ||
|
|
||
| const zoomedOutOfBounds = await page.waitForFunction(() => | ||
| document.querySelector("body > mapml-viewer").shadowRoot.querySelector("div > output").innerHTML === "Zoomed out of bounds, returning to", | ||
| {}, {timeout: 1000} | ||
| ); | ||
| expect(await zoomedOutOfBounds.jsonValue()).toEqual(true); | ||
|
|
||
| const zoomedBack = await page.$eval( | ||
| "body > mapml-viewer div > output", | ||
| (output) => output.innerHTML | ||
| ); | ||
| expect(zoomedBack).toEqual("zoom level 0 column 1 row 3"); | ||
|
|
||
| }); | ||
|
|
||
| } | ||
| ); | ||
| } | ||
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters