Accessible buttons

[Malvoz]

<a> buttons (such as <a class="leaflet-buttons-control-button"> and <a class="leaflet-pm-action">) are not keyboard focusable/operable. Additionally, they're announced as "link" using a screen reader (missing role="button"). Otherwise <button type="button"> is recommended, but requires additional styling to reset browser defaults.

See related resources:

• https://github.com/Leaflet/Leaflet/blob/bdd7ebf836201550f6d173943b728098b83f40d5/src/control/Control.Zoom.js#L85-L91
• https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/button/button.html

[Falke-Design]

@Malvoz can you please look if the PR #721 is working for you. It was not possible to add href = '#' because then the page was scrolling to the top

[Malvoz]

@Falke-Design In that case tabindex="0" could be used (see https://web.dev/control-focus-with-tabindex/).

[Falke-Design]

Ok I added the tabindex. Did you ment to use the tabindex togheter with the href? Because then it is the same problem as before, the page is scrolling.

[Malvoz]

Yes tabindex=0 alone is sufficient to get the controls into tab order, along with appropriate keyboard event listener, would make them accessible and operable for keyboard-only users.

[Falke-Design]

@Malvoz is it possible to make a click on keyboard enter like a click in leaflet without adding a key-event listener? A browser default function like tabindex?

Because now it is possible to tab through the draw buttons but it is not possible to activate them with enter

[Falke-Design]

To make buttons accessible with enter, the button needs href="#", but then the page is scrolling to the clicked element. To prevent this e.preventDefault(); have to be added to the click event:

    newButton.setAttribute('role','button');
    newButton.setAttribute('tabindex','0');
    newButton.href = '#';
    L.DomEvent.on(newButton, 'click', (e)=>{
        e.preventDefault(); 
        console.log(e);
    }); // click event