Feature index overlay bug

package.json

@@ -56,8 +56,8 @@
     "leaflet": "^1.9.4",
     "leaflet.locatecontrol": "^0.79.0",
     "path": "^0.12.7",
-    "@playwright/test": "^1.24.2",
-    "playwright": "^1.24.2",
+    "@playwright/test": "^1.27.0",
+    "playwright": "^1.27.0",
     "proj4": "^2.6.2",
     "proj4leaflet": "^1.0.2",
     "rollup": "^2.23.1"

src/mapml-viewer.js

@@ -1087,6 +1087,7 @@ export class MapViewer extends HTMLElement {
       this._traversalCall = 1;
       this._map.panBy([initialLocation.x - curr.x, initialLocation.y - curr.y]);
     }
+    this._map.getContainer().focus();
   }
 
   _toggleFullScreen() {

src/mapml.css

@@ -51,7 +51,7 @@
         left: 45px; 
     }
 }
- 
+
  /* Generic class for seamless buttons */
  .mapml-button {
   background-color: transparent;
@@ -909,7 +909,16 @@ label.mapml-layer-item-toggle {
   width: 450px;
   font-size: 16px;
 }
-
+@container leafletmap (max-width: 650px ) {
+    .mapml-feature-index {
+        width: 70cqw; 
+    }
+}
+@container leafletmap (max-width: 390px ) {
+    .mapml-feature-index {
+        bottom: 100px; 
+    }
+}
 .mapml-feature-index-content > span{
   width: 140px;
   white-space: nowrap;

src/mapml/control/FullscreenButton.js

@@ -84,6 +84,7 @@ L.Map.include({
         this._enablePseudoFullscreen(container);
       }
     }
+    this.getContainer().focus();
   },
 
   _enablePseudoFullscreen: function (container) {

src/mapml/control/GeolocationButton.js

@@ -4,18 +4,28 @@ export var GeolocationButton = L.Control.extend({
   },
 
   onAdd: function (map) {
-    this.locateControl = L.control
-      .locate({
-        showPopup: false,
-        strings: {
-          title: M.options.locale.btnLocTrackOff
-        },
-        position: this.options.position,
-        locateOptions: {
-          maxZoom: 16
-        }
-      })
-      .addTo(map);
+    // customize locate control to focus map after start/stop, so that
+    // featureIndexOverlay is correctly displayed
+    L.Control.CustomLocate = L.Control.Locate.extend({
+      start: function () {
+        L.Control.Locate.prototype.start.call(this);
+        map.getContainer().focus();
+      },
+      stop: function () {
+        L.Control.Locate.prototype.stop.call(this);
+        map.getContainer().focus();
+      }
+    });
+    this.locateControl = new L.Control.CustomLocate({
+      showPopup: false,
+      strings: {
+        title: M.options.locale.btnLocTrackOff
+      },
+      position: this.options.position,
+      locateOptions: {
+        maxZoom: 16
+      }
+    }).addTo(map);
 
     var container = this.locateControl._container;
     var button = this.locateControl;

src/mapml/layers/FeatureIndexOverlay.js

@@ -24,11 +24,7 @@ export var FeatureIndexOverlay = L.Layer.extend({
     );
     this._body.index = 0;
     this._output.initialFocus = false;
-    map.on(
-      'layerchange layeradd layerremove overlayremove',
-      this._toggleEvents,
-      this
-    );
+    map.on('focus blur popupclose', this._addOrRemoveFeatureIndex, this);
     map.on('moveend focus templatedfeatureslayeradd', this._checkOverlap, this);
     map.on('keydown', this._onKeyDown, this);
     this._addOrRemoveFeatureIndex();
@@ -77,6 +73,8 @@ export var FeatureIndexOverlay = L.Layer.extend({
     let index = 1;
     let keys = Object.keys(features);
     let body = this._body;
+    let noFeaturesMessage = document.createElement('span');
+    noFeaturesMessage.innerHTML = M.options.locale.fIndexNoFeatures;
 
     body.innerHTML = '';
     body.index = 0;
@@ -123,6 +121,9 @@ export var FeatureIndexOverlay = L.Layer.extend({
       }
     });
     this._addToggleKeys();
+    if (index === 1) {
+      body.appendChild(noFeaturesMessage);
+    }
   },
 
   _updateOutput: function (label, index, key) {
@@ -189,16 +190,7 @@ export var FeatureIndexOverlay = L.Layer.extend({
     }
   },
 
-  _toggleEvents: function () {
-    this._map.on(
-      'viewreset move moveend focus blur popupclose',
-      this._addOrRemoveFeatureIndex,
-      this
-    );
-  },
-
   _addOrRemoveFeatureIndex: function (e) {
-    let features = this._body.allFeatures ? this._body.allFeatures.length : 0;
     //Toggle aria-hidden attribute so screen reader rereads the feature index on focus
     if (!this._output.initialFocus) {
       this._output.setAttribute('aria-hidden', 'true');
@@ -214,26 +206,24 @@ export var FeatureIndexOverlay = L.Layer.extend({
       this._output.popupClosed = true;
     } else if (e && e.type === 'focus') {
       this._container.removeAttribute('hidden');
-      if (features !== 0)
-        this._output.classList.remove('mapml-screen-reader-output');
-    } else if (e && e.originalEvent && e.originalEvent.type === 'pointermove') {
-      this._container.setAttribute('hidden', '');
-      this._output.classList.add('mapml-screen-reader-output');
+      this._output.classList.remove('mapml-screen-reader-output');
+      // this is a very subtle branch.  The event that gets handled below is a blur
+      // event, which happens to have the e.target._popup property
+      // when there will be a popup.  Because blur gets handled here, it doesn't
+      // get handled in the next else if block, which would hide both the reticle
+      // and the index menu, and then recursively call this method with no event
+      // argument, which manipulates the aria-hidden attribute on the output
+      // in order to have the screenreader read its contents when the focus returns
+      // to (what exactly???).
     } else if (e && e.target._popup) {
       this._container.setAttribute('hidden', '');
     } else if (e && e.type === 'blur') {
       this._container.setAttribute('hidden', '');
       this._output.classList.add('mapml-screen-reader-output');
       this._output.initialFocus = false;
       this._addOrRemoveFeatureIndex();
-    } else if (this._map.isFocused && e) {
-      this._container.removeAttribute('hidden');
-      if (features !== 0) {
-        this._output.classList.remove('mapml-screen-reader-output');
-      } else {
-        this._output.classList.add('mapml-screen-reader-output');
-      }
     } else {
+      // this is the default block, called when no event is passed (recursive call)
       this._container.setAttribute('hidden', '');
       this._output.classList.add('mapml-screen-reader-output');
     }

src/mapml/layers/MapMLLayer.js

@@ -2057,6 +2057,7 @@ export var MapMLLayer = L.Layer.extend({
         e.preventDefault();
         featureEl.zoomTo();
         featureEl._map.closePopup();
+        featureEl._map.getContainer().focus();
       };
       content.insertBefore(
         zoomLink,