Increase default size of controls

[Malvoz]

We should strive to meet the requirements of WCAG SC 2.5.5 Target Size by making tap targets at least 44x44px (or maybe even 48x48 per Google's web.dev recommendation: https://web.dev/tap-targets/).

While we'd have to consider all tap targets, including (I suppose) context menu items, the default controls would be a good start. Changes would be needed on the following lines:

https://github.com/Maps4HTML/Web-Map-Custom-Element/blob/a3d084d2e3f88c8b314cce7f98c9bbff0fc29709/src/mapml.css#L44-L47

https://github.com/Maps4HTML/Web-Map-Custom-Element/blob/a3d084d2e3f88c8b314cce7f98c9bbff0fc29709/src/mapml.css#L52-L53

https://github.com/Maps4HTML/Web-Map-Custom-Element/blob/a3d084d2e3f88c8b314cce7f98c9bbff0fc29709/src/mapml.css#L102-L109

IMO we should take the opportunity to make the size of the layer control equal to that of the other controls.

Notably, and sadly, none of the reviewed web map tools conform to this success criterion:
https://github.com/Malvoz/web-maps-wcag-evaluation/blob/master/README.md#255-target-size-level-aaa

Opinions?

[shepazu]

This seems like a sensible first step.

Beyond controls, we need to make sure that tap-target features (e.g. businesses or other geometric areas) also have a minimum size. That could get tricky.

[Malvoz]

@shepazu there's a Leaflet plugin that tries to deal with that by "making an invisible touch surface around paths, like polygons or polylines": https://github.com/perliedman/leaflet-touch-helper

[prushforth]

For features, could such a magnifier be part of a user stylesheet, or user preferences type of situation?

[Malvoz]

Related CSS WG issue to ensuring minimum tap target size: w3c/csswg-drafts#4708.

OTOH in maps it's pretty common that features are stacked on top of each other which is problematic for users with a pointer device/touch, a Feature Index may allow users to interact with stacked features.