1

I need to create a leaflet.js map within certain accessibility guidelines.

1) I would like to be able to trigger an event (not just open a popup) by pressing 'enter' when a marker has focus.

2) I would like to be able to trigger an event on focus of a marker

Is any of this possible in leaflet... I have searched a lot but can't find anything on this.

Some basic pseudo code below for illustration purposes -

 addMapMarkers () => {

   this.mapMarkers.map((item) => {

      const mapMarker = L.marker(this.rc.unproject([item.coordinates.latitude, item.coordinates.longitude])).addTo(this.layerGroup)

      L.DomEvent.addListener(mapMarker, 'click', () => {
        // 1) This works fine obviously - BUT I would also like it to trigger when pressing enter when the marker has focus
        this.map.panTo(mapMarker.getLatLng())
      })

      L.DomEvent.addListener(mapMarker, 'focus', () => {
        // 2) For example pan to center when marker has focus
        this.map.panTo(mapMarker.getLatLng())
      })

    })

  this.map.addLayer(this.layerGroup)
}

The map markers in Leaflet are given a tabindex="0" so as one tabs though a page, on reaching the map one can navigate with the keyboard to zoom etc. On continuing to tab the first marker will come into 'focus' then the next and so on. This suggested to me that 'click' behavior should be available by pressing enter. Google chrome certainly returns a marker as having focus.

document.activeElement

<img src="https://unpkg.com/[email protected]/dist/images/marker-icon.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="" tabindex="0" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(94px, 721px, 0px); z-index: 721; outline: none;">

In response to TomazicM comment.... It appears that clicking enter when a marker has focus will open a popup if present. It does not however trigger an onclick event...

For example:

      L.DomEvent.addListener(mapMarker, 'click', () => {
        // 1) This works fine obviously - BUT I would also like it to trigger when pressing enter when the marker has focus
        this.map.panTo(mapMarker.getLatLng())
      })

Am I missing something here..?

RE: The pull request that was not me.

1
  • Your wish no. 1 is already implemented (tested with Leaflet 1.5.1). If marker has focus and Enter is pressed, popup is opened if it exists. Your wish no. 2 was proposed but it looks like it was not implemented. @IvanSanchez What happened to your Add 'focus' and 'blur' event handling pull request github.com/Leaflet/Leaflet/pull/3444/files?
    – TomazicM
    Oct 23, 2019 at 20:02

1 Answer 1

1

I'm a bit late to the game but this has worked for me with jQuery

$(document).on("keydown", "#map", function(e) {
        if(e.keyCode==13){
             $(document.activeElement).trigger('click');

        }
    })

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.