Triggering event from marker by pressing enter when marker has focus using Leaflet js

Question

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.

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

        }
    })