Add a dynamic scale bar and announce a scale ratio for each map view for screen readers

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);
+};

src/mapml/handlers/AnnounceMovement.js

@@ -20,16 +20,16 @@ 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") :
                  mapEl.shadowRoot.querySelector(".leaflet-container");
 
              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; 
+             
              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];
+        let standard = M.options.locale.amZoom + " " + mapZoom;
 
         if(!visible){
             let outOfBoundsPos = this._history[this._historyIndex];

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;
 

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,19 +43,41 @@ 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);
 
         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");
+        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");
 
     });
 });