Use <button> for controls

[Malvoz]

Is your feature request related to a problem? Please describe.

<button> behaves a bit differently from <a href="#" role="button">, this would supersede #7368 and #7369 (these describe some of the problems with <a> controls).

Describe the solution you'd like

Use <button type="button"> over <a href="#"> for controls.

Additional context

Use buttons, not links, for controls

Agreed!

Originally posted by @mourner in #3210 (comment).

we should use the button element here

This would be a breaking change we can make in Leaflet 2.

Originally posted by @jonkoops in #7368 (comment).

• Related PR: Enhance Map accessibility #6248
• Reference: https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/button/button.html

[Malvoz]

It may be desirable to use a CSS reset for buttons, something along the lines of:

.leaflet-control button {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-transform: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

This is just a generic class I've been using before (inspired by normalize.css, sanitize.css, Boostrap's reboot.css), however if a default value is set for any of these properties for all controls, there's probably no reason to first reset that property.

[Falke-Design]

I only want to document this: We should not remove the existing css classes because they are used for many custom controls

[jonkoops]

I've created a label to keep track of breaking changes like these.