From 68edcea0b8ecf54ddad636ea0c755cd17d2df46b Mon Sep 17 00:00:00 2001 From: ben-lu-uw Date: Tue, 28 Sep 2021 09:35:26 -0400 Subject: [PATCH 1/4] Use e.composedPath in addition to e.path for firefox compatibility --- src/mapml/handlers/ContextMenu.js | 5 ++++- src/mapml/layers/MapLayer.js | 12 +++++++----- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index 18665d9b1..0a94acf54 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -529,7 +529,10 @@ export var ContextMenu = L.Handler.extend({ if(!this._mapMenuVisible) return; let key = e.keyCode; - if(key !== 16 && key!== 9 && !(!this._layerClicked && key === 67) && e.path[0].innerText !== "Copy Coordinates (C) >") + let path = e.path || e.composedPath(); + console.log(path + e.path + e.composedPath()); + + if(key !== 16 && key!== 9 && !(!this._layerClicked && key === 67) && path[0].innerText !== "Copy Coordinates (C) >") this._hide(); switch(key){ case 32: //SPACE KEY diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index c7501e741..596a5071c 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -1290,13 +1290,14 @@ export var MapMLLayer = L.Layer.extend({ } // When popup is open, what gets focused with tab needs to be done using JS as the DOM order is not in an accessibility friendly manner function focusFeature(focusEvent){ + let path = focusEvent.originalEvent.path || focusEvent.originalEvent.composedPath(); let isTab = focusEvent.originalEvent.keyCode === 9, shiftPressed = focusEvent.originalEvent.shiftKey; - if((focusEvent.originalEvent.path[0].classList.contains("leaflet-popup-close-button") && isTab && !shiftPressed) || focusEvent.originalEvent.keyCode === 27){ + if((path[0].classList.contains("leaflet-popup-close-button") && isTab && !shiftPressed) || focusEvent.originalEvent.keyCode === 27){ L.DomEvent.stop(focusEvent); map.closePopup(popup); group.focus(); - } else if ((focusEvent.originalEvent.path[0].title==="Focus Map" || focusEvent.originalEvent.path[0].classList.contains("mapml-popup-content")) && isTab && shiftPressed){ + } else if ((path[0].title==="Focus Map" || path[0].classList.contains("mapml-popup-content")) && isTab && shiftPressed){ setTimeout(() => { //timeout needed so focus of the feature is done even after the keypressup event occurs L.DomEvent.stop(focusEvent); map.closePopup(popup); @@ -1306,17 +1307,18 @@ export var MapMLLayer = L.Layer.extend({ } function focusMap(focusEvent){ + let path = focusEvent.originalEvent.path || focusEvent.originalEvent.composedPath(); let isTab = focusEvent.originalEvent.keyCode === 9, shiftPressed = focusEvent.originalEvent.shiftKey; - if((focusEvent.originalEvent.keyCode === 13 && focusEvent.originalEvent.path[0].classList.contains("leaflet-popup-close-button")) || focusEvent.originalEvent.keyCode === 27 ){ + if((focusEvent.originalEvent.keyCode === 13 && path[0].classList.contains("leaflet-popup-close-button")) || focusEvent.originalEvent.keyCode === 27 ){ L.DomEvent.stopPropagation(focusEvent); map._container.focus(); map.closePopup(popup); if(focusEvent.originalEvent.keyCode !== 27)map._popupClosed = true; - } else if (isTab && focusEvent.originalEvent.path[0].classList.contains("leaflet-popup-close-button")){ + } else if (isTab && path[0].classList.contains("leaflet-popup-close-button")){ map.closePopup(popup); - } else if ((focusEvent.originalEvent.path[0].title==="Focus Map" || focusEvent.originalEvent.path[0].classList.contains("mapml-popup-content")) && isTab && shiftPressed){ + } else if ((path[0].title==="Focus Map" || path[0].classList.contains("mapml-popup-content")) && isTab && shiftPressed){ setTimeout(() => { //timeout needed so focus of the feature is done even after the keypressup event occurs L.DomEvent.stop(focusEvent); map.closePopup(popup); From f5fb49bde7c4f6c711f00c6ff65f5ceb9abb51ff Mon Sep 17 00:00:00 2001 From: ben-lu-uw Date: Tue, 28 Sep 2021 09:39:13 -0400 Subject: [PATCH 2/4] Remove test console.log --- src/mapml/handlers/ContextMenu.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index 0a94acf54..d0168ac76 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -530,7 +530,6 @@ export var ContextMenu = L.Handler.extend({ let key = e.keyCode; let path = e.path || e.composedPath(); - console.log(path + e.path + e.composedPath()); if(key !== 16 && key!== 9 && !(!this._layerClicked && key === 67) && path[0].innerText !== "Copy Coordinates (C) >") this._hide(); From 3d144aeb44befacdce28ebf061fcf896387710c4 Mon Sep 17 00:00:00 2001 From: ben-lu-uw Date: Wed, 29 Sep 2021 09:09:11 -0400 Subject: [PATCH 3/4] Fix issue where enter does not activate menu items --- src/mapml/handlers/ContextMenu.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index d0168ac76..cdc2fe2c1 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -531,9 +531,15 @@ export var ContextMenu = L.Handler.extend({ let key = e.keyCode; let path = e.path || e.composedPath(); + if(key === 13) + e.preventDefault(); if(key !== 16 && key!== 9 && !(!this._layerClicked && key === 67) && path[0].innerText !== "Copy Coordinates (C) >") this._hide(); switch(key){ + case 13: //ENTER KEY + if(this._map._container.parentNode.activeElement.parentNode.classList.contains("mapml-contextmenu")) + this._map._container.parentNode.activeElement.click(); + break; case 32: //SPACE KEY if(this._map._container.parentNode.activeElement.parentNode.classList.contains("mapml-contextmenu")) this._map._container.parentNode.activeElement.click(); From acfe6332bdb9f4e4941d17f87c7c6ed321540d14 Mon Sep 17 00:00:00 2001 From: ben-lu-uw Date: Wed, 29 Sep 2021 09:18:07 -0400 Subject: [PATCH 4/4] Clean up code --- src/mapml/handlers/ContextMenu.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/mapml/handlers/ContextMenu.js b/src/mapml/handlers/ContextMenu.js index cdc2fe2c1..c6cd88603 100644 --- a/src/mapml/handlers/ContextMenu.js +++ b/src/mapml/handlers/ContextMenu.js @@ -537,9 +537,6 @@ export var ContextMenu = L.Handler.extend({ this._hide(); switch(key){ case 13: //ENTER KEY - if(this._map._container.parentNode.activeElement.parentNode.classList.contains("mapml-contextmenu")) - this._map._container.parentNode.activeElement.click(); - break; case 32: //SPACE KEY if(this._map._container.parentNode.activeElement.parentNode.classList.contains("mapml-contextmenu")) this._map._container.parentNode.activeElement.click();