[accessibility] Accessible target size for controls

[Malvoz]

The WCAG 2.1 SC 2.5.5 Target Size requires targets for pointer input to be at least 44 by 44 in CSS pixels. Meeting this requirement has multiple benefits, it'd be great to pass this criteria for the commonly used controls:

• Attribution control (mapboxgl-ctrl-attrib-button)
• Popup close button (mapboxgl-popup-close-button)
• Fullscreen control (mapboxgl-ctrl-fullscreen)
• Location control (mapboxgl-ctrl-geolocate)
• Markers (mapboxgl-marker)
• Navigation controls:
  • Zoom in (mapboxgl-ctrl-zoom-in)
  • Zoom out (mapboxgl-ctrl-zoom-out)
  • Compass/reset bearing (mapboxgl-ctrl-compass)
• etc.?

It may not be desirable to increase the size of the icons themselves, in which case padding can be used to increase the size of the tap targets.

[Malvoz]

As noted in Leaflet/Leaflet#7549 - WCAG 2.2 (which is yet to reach Recommendation status) has a more forgiving (from a designers point of view) success criterion (24x24 px): https://www.w3.org/TR/WCAG22/#target-size-minimum.

My personal opinion is that controls closer to 44x44 is a lot more user friendly on mobile. We use those dimensions for controls in the <mapml-viewer>, once you've become accustomed to it, anything less feels tiny. 😋