From 3b5eacd91a7d8245ba2c7dbcac863cbd9a0081ec Mon Sep 17 00:00:00 2001
From: Anshpreet8 <34603452+Anshpreet8@users.noreply.github.com>
Date: Fri, 26 Nov 2021 12:56:41 -0500
Subject: [PATCH] Focus on Layer Menu Item or Link if Remove Button is clicked
 (#600)

* focus on layer menu item/link if remove button clicked

* fixed getting the shadow root

* removed unused function

* made some fixes

* added timeouts to featureLinks test

Co-authored-by: Anshpreet <anshpreet5678@github.com>
---
 src/mapml/layers/MapLayer.js       | 14 ++++++++++++++
 test/e2e/core/featureLinks.test.js |  2 ++
 2 files changed, 16 insertions(+)

diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js
index 11777521e..10cdf5268 100644
--- a/src/mapml/layers/MapLayer.js
+++ b/src/mapml/layers/MapLayer.js
@@ -425,7 +425,21 @@ export var MapMLLayer = L.Layer.extend({
         //L.DomEvent.disableClickPropagation(removeControlButton);
         L.DomEvent.on(removeControlButton, 'click', L.DomEvent.stop);
         L.DomEvent.on(removeControlButton, 'click', (e)=>{
+          let fieldset = 0, elem, root;
+          root = mapEl.tagName === "MAPML-VIEWER" ? mapEl.shadowRoot : mapEl.querySelector(".mapml-web-map").shadowRoot;
+          if(e.target.closest("fieldset").nextElementSibling && !e.target.closest("fieldset").nextElementSibling.disbaled){
+            elem = e.target.closest("fieldset").previousElementSibling;
+            while(elem){
+              fieldset += 2; // find the next layer menu item
+              elem = elem.previousElementSibling;
+            }
+          } else {
+            // focus on the link
+            elem = "link";
+          }
           mapEl.removeChild(e.target.closest("fieldset").querySelector("span").layer._layerEl);
+          elem = elem ? root.querySelector(".leaflet-control-attribution").firstElementChild: elem = root.querySelectorAll('input')[fieldset];
+          setTimeout(() => elem.focus(), 800); // a timeout is set so "pressed remove layer" is announced first
         }, this);
 
         let itemSettingControlButton = L.DomUtil.create('button', 'mapml-layer-item-settings-control', layerItemControls);
diff --git a/test/e2e/core/featureLinks.test.js b/test/e2e/core/featureLinks.test.js
index c881fae28..684509388 100644
--- a/test/e2e/core/featureLinks.test.js
+++ b/test/e2e/core/featureLinks.test.js
@@ -25,6 +25,7 @@ describe("Playwright Feature Links Tests", () => {
       test("Sub-point inplace link adds new layer, parent feature has separate link", async () => {
         await page.hover(".leaflet-top.leaflet-right");
         await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > div > button:nth-child(1)");
+        await page.waitForTimeout(850);
         await page.click("body > map");
         for(let i = 0; i < 6; i++) {
           await page.keyboard.press("Tab");
@@ -59,6 +60,7 @@ describe("Playwright Feature Links Tests", () => {
       test("Main part adds new layer", async () => {
         await page.hover(".leaflet-top.leaflet-right");
         await page.click("div > div.leaflet-control-container > div.leaflet-top.leaflet-right > div > section > div.leaflet-control-layers-overlays > fieldset:nth-child(2) > div:nth-child(1) > div > button:nth-child(1)");
+        await page.waitForTimeout(850);
         await page.click("body > map");
         for(let i = 0; i < 5; i++) {
           await page.keyboard.press("Tab");