Adding tabbing navigation and accessibility to map

src/mapml-viewer.js

@@ -211,6 +211,7 @@ export class MapViewer extends HTMLElement {
           this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps for HTML Community Group">Maps4HTML</a> | <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
 
           this.setControls(false,false,true);
+          this._crosshair = M.crosshair().addTo(this._map);
 
           // Make the Leaflet container element programmatically identifiable
           // (https://github.com/Leaflet/Leaflet/issues/7193).

src/mapml.css

@@ -375,3 +375,33 @@ summary {
 .leaflet-container .leaflet-control-container {
   visibility: unset!important;
 }
+
+.mapml-crosshair {
+  margin: -18px 0 0 -18px;
+  width: 36px;
+  height: 36px;
+  left: 50%;
+  top: 50%;
+  content: '';
+  display: block;
+  position: absolute;
+  z-index: 10000;
+}
+
+.mapml-popup-button {
+	padding: 4px 4px 0 0;
+	border: none;
+	text-align: center;
+	width: 18px;
+	height: 14px;
+	font: 16px/14px Tahoma, Verdana, sans-serif;
+	color: #c3c3c3;
+	text-decoration: none;
+	font-weight: bold;
+  background: transparent;
+  float: left;
+}
+
+.mapml-focus-buttons {
+  margin-left: 4px;
+}

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 { Crosshair, crosshair } from "./layers/Crosshair";
 
 /* global L, Node */
 (function (window, document, undefined) {
@@ -627,4 +628,7 @@ M.mapMLStaticTileLayer = mapMLStaticTileLayer;
 M.DebugOverlay = DebugOverlay;
 M.debugOverlay = debugOverlay;
 
+M.Crosshair = Crosshair;
+M.crosshair = crosshair;
+
 }(window, document));

src/mapml/layers/Crosshair.js

@@ -0,0 +1,95 @@
+export var Crosshair = L.Layer.extend({
+  onAdd: function (map) {
+
+    //SVG crosshair design from https://github.com/xguaita/Leaflet.MapCenterCoord/blob/master/src/icons/MapCenterCoordIcon1.svg?short_path=81a5c76
+    let svgInnerHTML = `<svg
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+    xmlns:cc="http://creativecommons.org/ns#"
+    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+    xmlns:svg="http://www.w3.org/2000/svg"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    x="0px"
+    y="0px"
+    viewBox="0 0 99.999998 99.999998"
+    xml:space="preserve">
+    <g><circle
+        r="3.9234731"
+        cy="50.21946"
+        cx="50.027821"
+        style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /><path
+        d="m 4.9734042,54.423642 31.7671398,0 c 2.322349,0 4.204185,-1.881836 4.204185,-4.204185 0,-2.322349 -1.881836,-4.204184 -4.204185,-4.204184 l -31.7671398,0 c -2.3223489,-2.82e-4 -4.20418433,1.881554 -4.20418433,4.204184 0,2.322631 1.88183543,4.204185 4.20418433,4.204185 z"
+        style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /><path
+        d="m 54.232003,5.1650429 c 0,-2.3223489 -1.881836,-4.20418433 -4.204184,-4.20418433 -2.322349,0 -4.204185,1.88183543 -4.204185,4.20418433 l 0,31.7671401 c 0,2.322349 1.881836,4.204184 4.204185,4.204184 2.322348,0 4.204184,-1.881835 4.204184,-4.204184 l 0,-31.7671401 z"
+        style="fill:#000000;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path
+        d="m 99.287826,50.219457 c 0,-2.322349 -1.881835,-4.204184 -4.204184,-4.204184 l -31.76714,0 c -2.322349,0 -4.204184,1.881835 -4.204184,4.204184 0,2.322349 1.881835,4.204185 4.204184,4.204185 l 31.76714,0 c 2.320658,0 4.204184,-1.881836 4.204184,-4.204185 z"
+        style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /><path
+        d="m 45.823352,95.27359 c 0,2.322349 1.881836,4.204184 4.204185,4.204184 2.322349,0 4.204184,-1.881835 4.204184,-4.204184 l 0,-31.76714 c 0,-2.322349 -1.881835,-4.204185 -4.204184,-4.204185 -2.322349,0 -4.204185,1.881836 -4.204185,4.204185 l 0,31.76714 z"
+        style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /></g></svg>
+ `;
+
+    this._container = L.DomUtil.create("div", "mapml-crosshair", map._container);
+    this._container.innerHTML = svgInnerHTML;
+    this._mapFocused = false;
+    this._isQueryable = false;
+
+    map.on("layerchange layeradd layerremove overlayremove", this._toggleEvents, this);
+    L.DomEvent.on(map._container, "keydown keyup mousedown", this._onKey, this);
+
+
+    this._addOrRemoveCrosshair();
+  },
+
+  _toggleEvents: function () {
+    if (this._hasQueryableLayer()) {
+      this._map.on("viewreset move moveend", this._addOrRemoveCrosshair, this);
+    } else {
+      this._map.off("viewreset move moveend", this._addOrRemoveCrosshair, this);
+    }
+    this._addOrRemoveCrosshair();
+  },
+
+  _addOrRemoveCrosshair: function (e) {
+    if (this._hasQueryableLayer()) {
+      this._container.style.visibility = null;
+    } else {
+      this._container.style.visibility = "hidden";
+    }
+  },
+
+  _hasQueryableLayer: function () {
+    let layers = this._map.options.mapEl.layers;
+    if (this._mapFocused) {
+      for (let layer of layers) {
+        if (layer.checked && layer._layer.queryable) {
+          return true;
+        }
+      }
+    }
+    return false;
+  },
+
+  _onKey: function (e) {
+    //set mapFocused = true if arrow buttons are used
+    if (["keydown", "keyup"].includes(e.type) && e.target.classList.contains("leaflet-container") && [32, 37, 38, 39, 40, 187, 189].includes(+e.keyCode)) {
+      this._mapFocused = true;
+    //set mapFocused = true if map is focued using tab
+    } else if (e.type === "keyup" && e.target.classList.contains("leaflet-container") && +e.keyCode === 9) {
+      this._mapFocused = true;
+    // set mapFocused = false and close all popups if tab or escape is used
+    } else if((e.type === "keyup" && e.target.classList.contains("leaflet-interactive") && +e.keyCode === 9) || +e.keyCode === 27){
+      this._mapFocused = false;
+      this._map.closePopup();
+    // set mapFocused = false if any other key is pressed
+    } else {
+      this._mapFocused = false;
+    }
+    this._addOrRemoveCrosshair();
+  },
+
+});
+
+
+export var crosshair = function (options) {
+  return new Crosshair(options);
+};

src/mapml/layers/FeatureLayer.js

@@ -36,6 +36,12 @@ export var MapMLFeatures = L.FeatureGroup.extend({
       }
     },
 
+    onAdd: function(map){
+      L.FeatureGroup.prototype.onAdd.call(this, map);
+      map.on("popupopen", this._attachSkipButtons, this);
+      this._updateTabIndex();
+    },
+
     getEvents: function(){
       if(this._staticFeature){
         return {
@@ -47,6 +53,78 @@ export var MapMLFeatures = L.FeatureGroup.extend({
       };
     },
 
+    _updateTabIndex: function(){
+      for(let feature in this._features){
+        for(let path of this._features[feature]){
+          if(path._path){
+            if(path._path.getAttribute("d") !== "M0 0"){
+              path._path.setAttribute("tabindex", 0);
+            } else {
+              path._path.removeAttribute("tabindex");
+            }
+            if(path._path.childElementCount === 0) {
+              let title = document.createElement("title");
+              title.innerText = "Feature";
+              path._path.appendChild(title);
+            }
+          }
+        }
+      }
+    },
+
+    _attachSkipButtons: function(e){
+      if(!e.popup._source._path) return;
+      if(!e.popup._container.querySelector('div[class="mapml-focus-buttons"]')){
+        //add when popopen event happens instead
+        let div = L.DomUtil.create("div", "mapml-focus-buttons");
+        let backButton = L.DomUtil.create('a',"mapml-popup-button", div);
+        backButton.href = '#';
+        backButton.role = "button";
+        backButton.title = "Skip Backwards";
+        backButton.innerHTML = '❮';
+        L.DomEvent.disableClickPropagation(backButton);
+        L.DomEvent.on(backButton, 'click', L.DomEvent.stop);
+        L.DomEvent.on(backButton, 'click', this._skipBackward, this);
+
+        let forwardButton = L.DomUtil.create('a',"mapml-popup-button", div);
+        forwardButton.href = '#';
+        forwardButton.role = "button";
+        forwardButton.title = "Skip Forwards";
+        forwardButton.innerHTML = '❯';
+        L.DomEvent.disableClickPropagation(forwardButton);
+        L.DomEvent.on(forwardButton, 'click', L.DomEvent.stop);
+        L.DomEvent.on(forwardButton, 'click', this._skipForward, this);
+        e.popup._container.prepend(div);
+      }
+
+      function focusFeature(focusEvent){
+        if(focusEvent.originalEvent.path[0].title==="Skip Forwards" && e.popup._source._path.nextSibling && +focusEvent.originalEvent.keyCode === 9){
+          L.DomEvent.stopPropagation(focusEvent);
+          e.popup._source._path.nextSibling.focus();
+        }
+      };
+
+      this._map.on("keydown", focusFeature);
+      this._map.off("popupclose", (closeEvent)=>{
+        if (closeEvent.popup === e.popup){
+          this._map.off("keydown", focusFeature);
+        }
+      });
+
+      e.popup._container.querySelector("a").focus();
+
+    },
+
+    _skipBackward: function(e){
+      this._map.closePopup();
+      this._map._container.focus();
+    },
+
+    _skipForward: function(e){
+      this._map.closePopup();
+      this._map._controlContainer.focus();
+    },
+
     _handleMoveEnd : function(){
       let mapZoom = this._map.getZoom();
       if(mapZoom > this.zoomBounds.maxZoom || mapZoom < this.zoomBounds.minZoom){
@@ -62,6 +140,7 @@ export var MapMLFeatures = L.FeatureGroup.extend({
                             this._map.getPixelBounds(),
                             mapZoom,this._map.options.projection));
       this._removeCSS();
+      this._updateTabIndex();
     },
 
     //sets default if any are missing, better to only replace ones that are missing

src/mapml/layers/MapLayer.js

@@ -94,7 +94,7 @@ export var MapMLLayer = L.Layer.extend({
                 if (properties) {
                   var c = document.createElement('div');
                   c.insertAdjacentHTML('afterbegin', properties.innerHTML);
-                  geometry.bindPopup(c, {autoPan:false});
+                  geometry.bindPopup(c, {autoPan:false, closeButton: false});
                 }
               }
             });
@@ -123,7 +123,7 @@ export var MapMLLayer = L.Layer.extend({
                     if (properties) {
                       var c = document.createElement('div');
                       c.insertAdjacentHTML('afterbegin', properties.innerHTML);
-                      geometry.bindPopup(c, {autoPan:false});
+                      geometry.bindPopup(c, {autoPan:false, closeButton: false});
                     }
                   }
                 }).addTo(map);

src/mapml/layers/TemplatedFeaturesLayer.js

@@ -39,7 +39,7 @@ export var TemplatedFeaturesLayer =  L.Layer.extend({
             // need to parse as HTML to preserve semantics and styles
             var c = document.createElement('div');
             c.insertAdjacentHTML('afterbegin', properties.innerHTML);
-            geometry.bindPopup(c, {autoPan:false});
+            geometry.bindPopup(c, {autoPan:false, closeButton: false});
           }
         });
       }
@@ -87,6 +87,7 @@ export var TemplatedFeaturesLayer =  L.Layer.extend({
           parser = new DOMParser(),
           features = this._features,
           map = this._map,
+          context = this,
           MAX_PAGES = 10,
         _pullFeatureFeed = function (url, limit) {
           return (fetch (url,{redirect: 'follow',headers: headers})
@@ -111,6 +112,7 @@ export var TemplatedFeaturesLayer =  L.Layer.extend({
       _pullFeatureFeed(this._getfeaturesUrl(), MAX_PAGES)
         .then(function() { 
           map.addLayer(features);
+          M.TemplatedFeaturesLayer.prototype._updateTabIndex(context);
         })
         .catch(function (error) { console.log(error);});
     },
@@ -119,6 +121,24 @@ export var TemplatedFeaturesLayer =  L.Layer.extend({
         this._updateZIndex();
         return this;
     },
+    _updateTabIndex: function(context){
+      let c = context || this;
+      for(let layerNum in c._features._layers){
+        let layer = c._features._layers[layerNum];
+        if(layer._path){
+          if(layer._path.getAttribute("d") !== "M0 0"){
+            layer._path.setAttribute("tabindex", 0);
+          } else {
+            layer._path.removeAttribute("tabindex");
+          }
+          if(layer._path.childElementCount === 0) {
+            let title = document.createElement("title");
+            title.innerText = "Feature";
+            layer._path.appendChild(title);
+          }
+        }
+      }
+    },
     _updateZIndex: function () {
         if (this._container && this.options.zIndex !== undefined && this.options.zIndex !== null) {
             this._container.style.zIndex = this.options.zIndex;

src/web-map.js

@@ -224,6 +224,7 @@ export class WebMap extends HTMLMapElement {
           this._attributionControl =  this._map.attributionControl.setPrefix('<a href="https://www.w3.org/community/maps4html/" title="W3C Maps for HTML Community Group">Maps4HTML</a> | <a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');
 
           this.setControls(false,false,true);
+          this._crosshair = M.crosshair().addTo(this._map);
           if (this.hasAttribute('name')) {
             var name = this.getAttribute('name');
             if (name) {