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 https://github.com/Leaflet/Leaflet/issues/7368 and https://github.com/Leaflet/Leaflet/issues/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 https://github.com/Leaflet/Leaflet/issues/3210#issuecomment-73291846.

we should use the button element here

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

Originally posted by @jonkoops in https://github.com/Leaflet/Leaflet/issues/7368#issuecomment-976742275.

• Related PR: https://github.com/Leaflet/Leaflet/pull/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.

[Chi-teck]

Would be nice it those buttons had accessible name. https://www.drupal.org/project/leaflet/issues/3232474

[Malvoz]

@Chi-teck The buttons would have accessible names as they have now. This issue is about the elements themselves.

https://www.drupal.org/project/leaflet/issues/3232474

An aria-label to give the popup close button a proper accessible name was fixed in #7794.