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 <[email protected]>

Author: Anshpreet8

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);

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");