Add attribution for keyboard shortcuts (#683)

* Add attribution for keyboard shortcuts

* Modularize the attribution control code

* Add kbdAttribution.test.js

* Add accessible name to close button

Co-authored-by: Robert Linder <[email protected]>

* Localize keyboard shortcut attribution button

Co-authored-by: Robert Linder <[email protected]>

Author: ben-lu-uw

src/mapml-viewer.js

@@ -213,9 +213,7 @@ export class MapViewer extends HTMLElement {
           });
           this._addToHistory();
           // the attribution control is not optional
-          this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps for HTML Community Group">Maps4HTML</a> | <img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTIiIGhlaWdodD0iOCI+PHBhdGggZmlsbD0iIzRDN0JFMSIgZD0iTTAgMGgxMnY0SDB6Ii8+PHBhdGggZmlsbD0iI0ZGRDUwMCIgZD0iTTAgNGgxMnYzSDB6Ii8+PHBhdGggZmlsbD0iI0UwQkMwMCIgZD0iTTAgN2gxMnYxSDB6Ii8+PC9zdmc+" style="padding-right: 0.3em;" alt="Slava Ukraini"> <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
-          this._attributionControl.getContainer().setAttribute("role","group");
-          this._attributionControl.getContainer().setAttribute("aria-label","Map data attribution");
+          M.attributionControl(this);
 
           this.setControls(false,false,true);
           this._crosshair = M.crosshair().addTo(this._map);

src/mapml.css

@@ -860,6 +860,7 @@ label.mapml-layer-item-toggle {
   padding-right: 5px;
 }
 
+.shortcuts-dialog > ul > li > kbd,
 .mapml-feature-index-content > span > kbd{
   background-color: lightgrey;
   padding-right: 4px;
@@ -877,3 +878,11 @@ label.mapml-layer-item-toggle {
   width: 1px;
 }
 
+.shortcuts-dialog > button{
+  font-size: inherit;
+}
+
+.shortcuts-dialog > ul {
+  padding: 0;
+  list-style-type:none;
+}

src/mapml/control/AttributionControl.js

@@ -53,6 +53,7 @@ import { ContextMenu } from './handlers/ContextMenu';
 import { Util } from './utils/Util';
 import { ReloadButton, reloadButton } from './control/ReloadButton';
 import { FullscreenButton, fullscreenButton } from './control/FullscreenButton';
+import {attributionControl} from "./control/AttributionControl";
 import { Crosshair, crosshair } from "./layers/Crosshair";
 import { Feature, feature } from "./features/feature";
 import { FeatureRenderer, featureRenderer } from './features/featureRenderer';
@@ -647,6 +648,8 @@ M.reloadButton = reloadButton;
 M.FullscreenButton = FullscreenButton;
 M.fullscreenButton = fullscreenButton;
 
+M.attributionControl = attributionControl;
+
 M.MapMLStaticTileLayer = MapMLStaticTileLayer;
 M.mapMLStaticTileLayer = mapMLStaticTileLayer;
 

src/mapml/index.js

@@ -27,6 +27,17 @@ export var Options = {
     amEastBound: "Reached east bound, panning east disabled",
     amWestBound: "Reached west bound, panning west disabled",
     amNorthBound: "Reached north bound, panning north disabled",
-    amSouthBound: "Reached south bound, panning south disabled"
+    amSouthBound: "Reached south bound, panning south disabled",
+    kbdShortcuts: "Keyboard shortcuts",
+    kbdMovement: "Movement keys",
+    kbdFeature: "Feature navigation keys",
+    kbdPanUp: "Pan up",
+    kbdPanDown: "Pan down",
+    kbdPanLeft: "Pan left",
+    kbdPanRight: "Pan right",
+    kbdPanIncrement: "pan increment",
+    kbdZoom: "Zoom in/out 3 levels",
+    kbdPrevFeature: "Previous feature",
+    kbdNextFeature: "Next feature",
   }
 };

src/mapml/options.js

@@ -228,9 +228,7 @@ export class WebMap extends HTMLMapElement {
           });
           this._addToHistory();
           // the attribution control is not optional
-          this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps for HTML Community Group">Maps4HTML</a> | <img src="data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTIiIGhlaWdodD0iOCI+PHBhdGggZmlsbD0iIzRDN0JFMSIgZD0iTTAgMGgxMnY0SDB6Ii8+PHBhdGggZmlsbD0iI0ZGRDUwMCIgZD0iTTAgNGgxMnYzSDB6Ii8+PHBhdGggZmlsbD0iI0UwQkMwMCIgZD0iTTAgN2gxMnYxSDB6Ii8+PC9zdmc+" style="padding-right: 0.3em;" alt="Slava Ukraini"><a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
-          this._attributionControl.getContainer().setAttribute("role","group");
-          this._attributionControl.getContainer().setAttribute("aria-label","Map data attribution");
+          M.attributionControl(this);
 
           this.setControls(false,false,true);
           this._crosshair = M.crosshair().addTo(this._map);

src/web-map.js

@@ -0,0 +1,36 @@
+import { test, expect, chromium } from '@playwright/test';
+
+test.describe("Keyboard shortcut attribution test", ()=> {
+    let page;
+    let context;
+    test.beforeAll(async () => {
+        context = await chromium.launchPersistentContext('');
+        page = context.pages().find((page) => page.url() === 'about:blank') || await context.newPage();
+        await page.goto("mapml-viewer.html");
+    });
+
+    test.afterAll(async function () {
+        await context.close();
+    });
+
+    test("Keyboard shortcuts attribution opens up dialog", async () => {
+        for(let i = 0; i < 7; i++) {
+            await page.keyboard.press("Tab");
+        }
+
+        await page.keyboard.press("Enter");
+        const dialog = await page.$eval("body > mapml-viewer div > dialog",
+            (dialog) => dialog.hasAttribute("open")
+        );
+
+        expect(dialog).toBe(true);
+    });
+
+    test("X button closes dialog", async () => {
+        await page.keyboard.press("Enter");
+        const dialog = await page.$eval("body > mapml-viewer div > dialog",
+            (dialog) => dialog.hasAttribute("open")
+        );
+        expect(dialog).toBe(false);
+    });
+});