[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 (maplibregl-ctrl-attrib-button)
• Popup close button (maplibregl-popup-close-button)
• Fullscreen control (maplibregl-ctrl-fullscreen)
• Location control (maplibregl-ctrl-geolocate)
• Markers (maplibregl-marker)
• Navigation controls:
  • Zoom in (maplibregl-ctrl-zoom-in)
  • Zoom out (maplibregl-ctrl-zoom-out)
  • Compass/reset bearing (maplibregl-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.

---

(The same issue was also reported with MapBox: mapbox/mapbox-gl-js#11037.)

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions]

This issue was closed because it has been stalled for 30 days with no activity.

[alexclaydon]

Shame this was closed - it's a fantastic idea. Particularly - but not only - for those with motor control challenges.

[mjpauly]

Rem scaling would be great. Font/icon/layout sizing can then scale according to the user device's system font size if the root font is set appropriately on a page. E.g. for Apple. A workaround is to add one's own overrides for Maplibre's CSS to change px definitions to rem.

[HarelM]

Feel free to submit a PR.
I'm having a hard time understanding exactly how to solve this issue as I'm not an expert in this field.
I'd be happy to review and merge any PR related to improved accessibility.