Add new event mapfocused

Author: ben-lu-uw

src/mapml-viewer.js

@@ -364,6 +364,19 @@ export class MapViewer extends HTMLElement {
         this.dispatchEvent(new CustomEvent("layerchange", {details:{target: this, originalEvent: e}}));
       }
     }, false);
+
+    this.parentElement.addEventListener('keyup', function (e) {
+      if(e.keyCode === 9 && document.activeElement.nodeName === "MAPML-VIEWER"){
+        document.activeElement.dispatchEvent(new CustomEvent('mapfocused', {detail:
+              {target: this}}));
+      }
+    });
+    this.parentElement.addEventListener('mousedown', function (e) {
+      if(document.activeElement.nodeName === "MAPML-VIEWER"){
+        document.activeElement.dispatchEvent(new CustomEvent('mapfocused', {detail:
+              {target: this}}));
+      }
+    });
     this._map.on('load',
       function () {
         this.dispatchEvent(new CustomEvent('load', {detail: {target: this}}));

src/mapml/handlers/AnnounceMovement.js

@@ -6,8 +6,8 @@ export var AnnounceMovement = L.Handler.extend({
         });
 
         this._map.options.mapEl.addEventListener('moveend', this.announceBounds);
-        this._map.options.mapEl.addEventListener('focus', this.focusAnnouncement);
         this._map.dragging._draggable.addEventListener('dragstart', this.dragged);
+        this._map.options.mapEl.addEventListener('mapfocused', this.focusAnnouncement);
     },
     removeHooks: function () {
         this._map.off({
@@ -16,26 +16,32 @@ export var AnnounceMovement = L.Handler.extend({
         });
 
         this._map.options.mapEl.removeEventListener('moveend', this.announceBounds);
-        this._map.options.mapEl.removeEventListener('focus', this.focusAnnouncement);
         this._map.dragging._draggable.removeEventListener('dragstart', this.dragged);
+        this._map.options.mapEl.removeEventListener('mapfocused', this.focusAnnouncement);
     },
 
      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);
+         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 = " zoom level " + mapZoom + " column " + location[0] + " row " + location[1];
+
+             if(mapZoom === mapEl._map._layersMaxZoom){
+                 standard = "At maximum zoom level, zoom in disabled " + standard;
+             }
+             else if(mapZoom === mapEl._map._layersMinZoom){
+                 standard = "At minimum zoom level, zoom out disabled " + standard;
+             }
+
+             el.setAttribute("aria-roledescription", "region " + standard);
+             setTimeout(function () {
+                 el.removeAttribute("aria-roledescription");
+             }, 2000);
+         }, 0);
      },
 
     announceBounds: function () {

src/web-map.js

@@ -402,6 +402,19 @@ export class WebMap extends HTMLMapElement {
         this.dispatchEvent(new CustomEvent("layerchange", {details:{target: this, originalEvent: e}}));
       }
     }, false);
+
+    this.parentElement.addEventListener('keyup', function (e) {
+      if(e.keyCode === 9 && document.activeElement.nodeName === "MAPML-VIEWER"){
+        document.activeElement.dispatchEvent(new CustomEvent('mapfocused', {detail:
+              {target: this}}));
+      }
+    });
+    this.parentElement.addEventListener('mousedown', function (e) {
+      if(document.activeElement.nodeName === "MAPML-VIEWER"){
+        document.activeElement.dispatchEvent(new CustomEvent('mapfocused', {detail:
+              {target: this}}));
+      }
+    });
     this._map.on('load',
       function () {
         this.dispatchEvent(new CustomEvent('load', {detail: {target: this}}));