Change github tests to ignore featureIndexOverlay, run playwright

directly at the command prompt, hopefully.

Delete to do list, tracked on PR notes

WIP on getting featureIndexOverlay to behave

Add localized message to feature index output for 'No features found'

Remove commented code

Remove unused / uncovered code, add comments.
Update _handleLink to focus map when finished handling, so that
the feature index shows up again (if enabled).

Ensure feature index and reticle displayed after reload
Ensure feature index and reticle displayed before and after fullscreen

Upgrade playwright

Add tests for feature index and reticle display after fullscreen,
history navigation, link activation.

De-flake a test that got really bad post-upgrade of playwright

Remove layerchange layeradd layerremove overlayremove events from
feature index handlers; the index and reticle display on map focus,
disappear when focus moves off map.  This seems a bit odd when adding
or removing layers, but it is simple, and reticle returns with focus.

Update GeolocationButton to focus the map after it locates the user.
Update geolocation tests to adapt to changes.

Add feature index tests for after reload, fullscreen, history nav,
geolocation activation,

Add test feature index presence post-geolocation activation,
deactivation, and link following actions

Formatting by prettier

Split up slow test

Make feature index overlay responsive to map width

Change x client from npx to npm for ci testing

Author: prushforth

package-lock.json

@@ -32,7 +32,7 @@
     }
   ],
   "scripts": {
-    "test": "npx playwright test --grep-invert='featureIndexOverlay.*'",
+    "test": "npx playwright test --retries=3",
     "jest": "jest --verbose --noStackTrace"
   },
   "devDependencies": {

package.json

@@ -1118,6 +1118,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-viewer.js

@@ -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.css

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

src/mapml/control/FullscreenButton.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/control/GeolocationButton.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/FeatureIndexOverlay.js

@@ -2017,6 +2017,7 @@ export var MapMLLayer = L.Layer.extend({
           e.preventDefault();
           featureEl.zoomTo();
           featureEl._map.closePopup();
+          featureEl._map.getContainer().focus();
         };
         // we found that the popupopen event is fired as many times as there
         // are layers on the map (<layer-> elements / MapMLLayers that is).