Add button role to <a> element for a11y (#721) (patch)

* Add button role to <a> element

* Add tabindex to <a> element

* add focus css

* enable buttons with enter

* fix test

src/css/controls.css

@@ -77,7 +77,7 @@
   background-image: url('../assets/icons/Magnet.svg');
 }
 
-.leaflet-buttons-control-button:hover {
+.leaflet-buttons-control-button:hover,.leaflet-buttons-control-button:focus {
   cursor: pointer;
   background-color: #f4f4f4;
 }
@@ -135,7 +135,7 @@
   user-select: none;
 }
 
-.button-container .leaflet-pm-actions-container .leaflet-pm-action:hover {
+.button-container .leaflet-pm-actions-container .leaflet-pm-action:hover, .button-container .leaflet-pm-actions-container .leaflet-pm-action:focus {
   cursor: pointer;
   background-color: #777;
 }

src/js/Toolbar/L.Controls.js

@@ -62,6 +62,10 @@ const PMButton = L.Control.extend({
     this.toggle(false);
   },
   _triggerClick(e) {
+    if(e) {
+      // is needed to prevent scrolling when clicking on a-element with href="a"
+      e.preventDefault();
+    }
     // TODO is this a big change when we change from e to a object with the event and the button? Now it's the second argument
     this._button.onClick(e, { button: this, event: e });
     this._clicked(e);
@@ -83,6 +87,9 @@ const PMButton = L.Control.extend({
       'leaflet-buttons-control-button',
       buttonContainer
     );
+    newButton.setAttribute('role','button');
+    newButton.setAttribute('tabindex','0');
+    newButton.href = '#';
 
     // the buttons actions
     const actionContainer = L.DomUtil.create(
@@ -134,12 +141,17 @@ const PMButton = L.Control.extend({
         `leaflet-pm-action ${pos} action-${name}`,
         actionContainer
       );
+      actionNode.setAttribute('role','button');
+      actionNode.setAttribute('tabindex','0');
+      actionNode.href = '#';
 
       actionNode.innerHTML = action.text;
 
       if(!button.disabled) {
         if (action.onClick) {
-          const actionClick = () => {
+          const actionClick = (e) => {
+            // is needed to prevent scrolling when clicking on a-element with href="a"
+            e.preventDefault();
             let btnName = "";
             const {buttons} = this._map.pm.Toolbar;
             for (const btn in buttons) {