Use native buttons for interactive map markers - keyboard accessibility

[nfreear]

Problem

At present, default map markers use <img tabindex="0" role="button" ...>. Only the Return/Enter key can be used to activate these markers to launch a popup. That is, only Return/Enter can be used to trigger a click event handler, and not the Spacebar. The expected behaviour is that both Spacebar and Return/Enter keys activate a button.

• WCAG Success Criteria: 2.1.1 Keyboard
• Core Leaflet bug(s): (none ??)

Solution

Adopt native <input type="image"> or <button>. With these, the Spacebar and Return/Enter keys can be used to trigger a click event handler and launch a popup or other interactive functionality.

<input type="image" alt="My marker ..." src="marker.png" ...>

<button aria-label="My marker ..." class="marker-icon" ...></button>

Non-interactive versions of these markers - ??

<input type="image" alt="My marker ..." src="marker.png" ... disabled>

<button aria-label="My marker ..." class="marker" ... disabled></button>