From 3fabcf9e525f494e4de3950be0f04b8db7e190e0 Mon Sep 17 00:00:00 2001
From: Ahmad Ayubi <55214462+ahmadayubi@users.noreply.github.com>
Date: Mon, 1 Mar 2021 16:35:36 -0500
Subject: [PATCH] Add tooltip on focus + hover (#328)

* Add tooltip on focus

* Allow user to set title in markup

* uses featurecaption instead of title

* Update dist folder in action
---
 .github/workflows/sync.yml                | 14 +++++++++++-
 src/mapml/layers/FeatureLayer.js          | 28 ++++++++++++++++-------
 test/e2e/core/keyboardInteraction.test.js |  6 +++++
 test/e2e/layers/mapMLFeatures.html        |  1 +
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/sync.yml b/.github/workflows/sync.yml
index 59feb43ab..cb3ab58f8 100644
--- a/.github/workflows/sync.yml
+++ b/.github/workflows/sync.yml
@@ -42,4 +42,16 @@ jobs:
         user_email: aayub041@uottawa.ca
         user_name: 'ahmadayubi'
         commit_msg: '[AUTO] Sync MapML Build'
-        destination_branch: master
\ No newline at end of file
+        destination_branch: master
+    - name: Pushes to experiments repo
+      uses: ./.github/actions/sync-repo
+      env:
+        API_TOKEN_GITHUB: ${{ secrets.API_TOKEN_GITHUB }}
+      with:
+        source_folder: 'dist'
+        destination_repo: 'Maps4HTML/experiments'
+        destination_folder: 'dist'
+        user_email: aayub041@uottawa.ca
+        user_name: 'ahmadayubi'
+        commit_msg: '[AUTO] Sync MapML Build'
+        destination_branch: main
\ No newline at end of file
diff --git a/src/mapml/layers/FeatureLayer.js b/src/mapml/layers/FeatureLayer.js
index db43e3f02..1879cd8d1 100644
--- a/src/mapml/layers/FeatureLayer.js
+++ b/src/mapml/layers/FeatureLayer.js
@@ -77,10 +77,19 @@ export var MapMLFeatures = L.FeatureGroup.extend({
             }
             if(path._path.childElementCount === 0) {
               let title = document.createElement("title");
-              title.innerText = "Feature";
+              title.innerText = path.accessibleTitle;
               path._path.appendChild(title);
             }
             path._path.setAttribute("aria-expanded", "false");
+            /* jshint ignore:start */
+            L.DomEvent.on(path._path, "keyup keydown", (e)=>{
+              if((e.keyCode === 9 || e.keyCode === 16) && e.type === "keyup"){
+                path.openTooltip();
+              } else {
+                path.closeTooltip(); 
+              }
+            });
+            /* jshint ignore:end */
           }
         }
       }
@@ -281,13 +290,16 @@ export var MapMLFeatures = L.FeatureGroup.extend({
         this.resetStyle(layer);
 
         if (options.onEachFeature) {
-         options.onEachFeature(layer.properties, layer);
-         if(layer._events){
-            layer._events.keypress.push({
-              "ctx": layer,
-              "fn": this._onSpacePress,
-            });
-          }
+          layer.accessibleTitle = mapml.querySelector("featurecaption");
+          layer.accessibleTitle = layer.accessibleTitle ? layer.accessibleTitle.innerHTML : "Feature"; 
+          options.onEachFeature(layer.properties, layer);
+          layer.bindTooltip(layer.accessibleTitle, { interactive:true });
+          if(layer._events){
+              layer._events.keypress.push({
+                "ctx": layer,
+                "fn": this._onSpacePress,
+              });
+            }
         }
         if(this._staticFeature){
           let featureZoom = mapml.getAttribute('zoom') || nativeZoom;
diff --git a/test/e2e/core/keyboardInteraction.test.js b/test/e2e/core/keyboardInteraction.test.js
index a5d622a09..7a5e48f7e 100644
--- a/test/e2e/core/keyboardInteraction.test.js
+++ b/test/e2e/core/keyboardInteraction.test.js
@@ -82,12 +82,18 @@ jest.setTimeout(50000);
             const resultHandle = await page.evaluateHandle(root => root.activeElement, nextHandle);
             const focused = await (await page.evaluateHandle(elem => elem.getAttribute("d"), resultHandle)).jsonValue();
 
+            let tooltipCount = await page.$eval("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-tooltip-pane", div => div.childElementCount);
+
             await page.keyboard.press("Tab");
             const aHandleNext = await page.evaluateHandle(() => document.querySelector("mapml-viewer"));
             const nextHandleNext = await page.evaluateHandle(doc => doc.shadowRoot, aHandleNext);
             const resultHandleNext = await page.evaluateHandle(root => root.activeElement, nextHandleNext);
             const focusedNext = await (await page.evaluateHandle(elem => elem.getAttribute("d"), resultHandleNext)).jsonValue();
 
+            let tooltipCountNext = await page.$eval("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-tooltip-pane", div => div.childElementCount);
+
+            expect(tooltipCount).toEqual(1);
+            expect(tooltipCountNext).toEqual(1);
             expect(focused).toEqual("M330 83L553 83L553 339L330 339z");
             expect(focusedNext).toEqual("M-53 393L140 393L113 146L-53 191z");
           });
diff --git a/test/e2e/layers/mapMLFeatures.html b/test/e2e/layers/mapMLFeatures.html
index 7e0a787e5..a129c086e 100644
--- a/test/e2e/layers/mapMLFeatures.html
+++ b/test/e2e/layers/mapMLFeatures.html
@@ -42,6 +42,7 @@
       </style>
       <link id="forth" rel="stylesheet" type="text/css" href="forth.css">
       <feature zoom="2" class="refDiff">
+        <featurecaption>Accessible Square</featurecaption>
         <properties>
           <h1>Test</h1>
           <a href="www.example.com">test</a>