Fix focusing on feature when number key is pressed

Author: ben-lu-uw

src/mapml/features/featureGroup.js

@@ -79,13 +79,13 @@ export var FeatureGroup = L.FeatureGroup.extend({
           this._map.featureIndex.inBoundFeatures[index].path.setAttribute("tabindex", 0);
         }
       }
-    } else if (!([9, 16, 13, 27].includes(e.keyCode))){
+    } else if (!([9, 16, 13, 27, 49, 50, 51, 52, 53, 54, 55].includes(e.keyCode))){
       this._map.featureIndex.currentIndex = 0;
       this._map.featureIndex.inBoundFeatures[0].path.focus();
     }
 
     if(e.target.tagName.toUpperCase() !== "G") return;
-    if((e.keyCode === 9 || e.keyCode === 16 || e.keyCode === 13) && e.type === "keyup") {
+    if((e.keyCode === 9 || e.keyCode === 16 || e.keyCode === 13 || (e.keyCode >= 49 && e.keyCode <= 55)) && e.type === "keyup") {
       this.openTooltip();
     } else if (e.keyCode === 13 || e.keyCode === 32){
       this.closeTooltip();

src/mapml/layers/FeatureIndexOverlay.js

@@ -16,6 +16,7 @@ export var FeatureIndexOverlay = L.Layer.extend({
     },
 
     _checkOverlap: function () {
+        this._map.fire("mapkeyboardfocused");
         let bounds = this._map.getPixelBounds();
         let center = bounds.getCenter();
         let wRatio = Math.abs(bounds.min.x - bounds.max.x) / (this._map.options.mapEl.width);
@@ -94,8 +95,12 @@ export var FeatureIndexOverlay = L.Layer.extend({
         let body = this._body;
         let key = e.originalEvent.keyCode;
         if (key >= 49 && key <= 55){
-            let group = body.allFeatures[body.index][key - 49].group;
-            if (group) group.focus();
+            let feature = body.allFeatures[body.index][key - 49];
+            let group = feature.group;
+            if (group) {
+                this._map.featureIndex.currentIndex = feature.index - 1;
+                group.focus();
+            }
         } else if(e.originalEvent.keyCode === 56){
             this._newContent(body, -1);
         } else if(e.originalEvent.keyCode === 57){