-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding tabbing navigation and accessibility to map (#270)
* Allow features to be focused * Adds crosshair, shows on keyboard movement * Shows crosshair on tab * Only run on moveend if there are queryable layers * Revert listener change * Adds tests for keyboard interaction * Remove close button from feature popup * Add bypass navigation * Query popup fix * Add feature count, move controls to bottom * Test update to consider skip buttons * Test update * Adds next and previous focus buttons * Add tests for keyboard interaction * Rename variables and add comments * Remove handlers on close Co-authored-by: Peter Rushforth <peter.rushforth@canada.ca>
- Loading branch information
1 parent
cf8d242
commit 4f8ff65
Showing
14 changed files
with
637 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
export var Crosshair = L.Layer.extend({ | ||
onAdd: function (map) { | ||
|
||
//SVG crosshair design from https://github.com/xguaita/Leaflet.MapCenterCoord/blob/master/src/icons/MapCenterCoordIcon1.svg?short_path=81a5c76 | ||
let svgInnerHTML = `<svg | ||
xmlns:dc="http://purl.org/dc/elements/1.1/" | ||
xmlns:cc="http://creativecommons.org/ns#" | ||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | ||
xmlns:svg="http://www.w3.org/2000/svg" | ||
xmlns="http://www.w3.org/2000/svg" | ||
version="1.1" | ||
x="0px" | ||
y="0px" | ||
viewBox="0 0 99.999998 99.999998" | ||
xml:space="preserve"> | ||
<g><circle | ||
r="3.9234731" | ||
cy="50.21946" | ||
cx="50.027821" | ||
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /><path | ||
d="m 4.9734042,54.423642 31.7671398,0 c 2.322349,0 4.204185,-1.881836 4.204185,-4.204185 0,-2.322349 -1.881836,-4.204184 -4.204185,-4.204184 l -31.7671398,0 c -2.3223489,-2.82e-4 -4.20418433,1.881554 -4.20418433,4.204184 0,2.322631 1.88183543,4.204185 4.20418433,4.204185 z" | ||
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /><path | ||
d="m 54.232003,5.1650429 c 0,-2.3223489 -1.881836,-4.20418433 -4.204184,-4.20418433 -2.322349,0 -4.204185,1.88183543 -4.204185,4.20418433 l 0,31.7671401 c 0,2.322349 1.881836,4.204184 4.204185,4.204184 2.322348,0 4.204184,-1.881835 4.204184,-4.204184 l 0,-31.7671401 z" | ||
style="fill:#000000;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" /><path | ||
d="m 99.287826,50.219457 c 0,-2.322349 -1.881835,-4.204184 -4.204184,-4.204184 l -31.76714,0 c -2.322349,0 -4.204184,1.881835 -4.204184,4.204184 0,2.322349 1.881835,4.204185 4.204184,4.204185 l 31.76714,0 c 2.320658,0 4.204184,-1.881836 4.204184,-4.204185 z" | ||
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /><path | ||
d="m 45.823352,95.27359 c 0,2.322349 1.881836,4.204184 4.204185,4.204184 2.322349,0 4.204184,-1.881835 4.204184,-4.204184 l 0,-31.76714 c 0,-2.322349 -1.881835,-4.204185 -4.204184,-4.204185 -2.322349,0 -4.204185,1.881836 -4.204185,4.204185 l 0,31.76714 z" | ||
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /></g></svg> | ||
`; | ||
|
||
this._container = L.DomUtil.create("div", "mapml-crosshair", map._container); | ||
this._container.innerHTML = svgInnerHTML; | ||
this._mapFocused = false; | ||
this._isQueryable = false; | ||
|
||
map.on("layerchange layeradd layerremove overlayremove", this._toggleEvents, this); | ||
L.DomEvent.on(map._container, "keydown keyup mousedown", this._onKey, this); | ||
|
||
|
||
this._addOrRemoveCrosshair(); | ||
}, | ||
|
||
_toggleEvents: function () { | ||
if (this._hasQueryableLayer()) { | ||
this._map.on("viewreset move moveend", this._addOrRemoveCrosshair, this); | ||
} else { | ||
this._map.off("viewreset move moveend", this._addOrRemoveCrosshair, this); | ||
} | ||
this._addOrRemoveCrosshair(); | ||
}, | ||
|
||
_addOrRemoveCrosshair: function (e) { | ||
if (this._hasQueryableLayer()) { | ||
this._container.style.visibility = null; | ||
} else { | ||
this._container.style.visibility = "hidden"; | ||
} | ||
}, | ||
|
||
_hasQueryableLayer: function () { | ||
let layers = this._map.options.mapEl.layers; | ||
if (this._mapFocused) { | ||
for (let layer of layers) { | ||
if (layer.checked && layer._layer.queryable) { | ||
return true; | ||
} | ||
} | ||
} | ||
return false; | ||
}, | ||
|
||
_onKey: function (e) { | ||
//set mapFocused = true if arrow buttons are used | ||
if (["keydown", "keyup"].includes(e.type) && e.target.classList.contains("leaflet-container") && [32, 37, 38, 39, 40, 187, 189].includes(+e.keyCode)) { | ||
this._mapFocused = true; | ||
//set mapFocused = true if map is focued using tab | ||
} else if (e.type === "keyup" && e.target.classList.contains("leaflet-container") && +e.keyCode === 9) { | ||
this._mapFocused = true; | ||
// set mapFocused = false and close all popups if tab or escape is used | ||
} else if((e.type === "keyup" && e.target.classList.contains("leaflet-interactive") && +e.keyCode === 9) || +e.keyCode === 27){ | ||
this._mapFocused = false; | ||
this._map.closePopup(); | ||
// set mapFocused = false if any other key is pressed | ||
} else { | ||
this._mapFocused = false; | ||
} | ||
this._addOrRemoveCrosshair(); | ||
}, | ||
|
||
}); | ||
|
||
|
||
export var crosshair = function (options) { | ||
return new Crosshair(options); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.