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/leaflet@1.5.1/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.

  • 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 at 20:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.