Controls' text can catch selection

[premeq]

• I've looked at the documentation to make sure the behavior is documented and expected
• I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• I've searched through the issues to make sure it's not yet reported

Steps to reproduce
Steps to reproduce the behavior:

• open leafletjs.com on mobile
• put your finger on the map and wait for a moment
  Note: holding finger on the is not dragging per se, yet this also happens to me while dragging slowly; users may also want to pause while dragging, as they explore the map.

Expected behavior
the '+' in the zoom control or text in attribution control are not selected

Current behavior
see screenshot

Environment

• Leaflet version: 1.5.1
• Browser (with version): Safari mobile
• OS/Platform (with version): iOS 13.1.3

Additional context
I got a React app, using react-leaflet.js.org, but I can also reproduce this on leafletjs.com, as mentioned above

• this example is as simple as possible
• this example does not rely on any third party code

[Malvoz]

The controls are also highlighted on desktop after double-clicking the map area with the mouse pointer.

One potential solution could be to disallow text selection using CSS user-select, e.g.:

.leaflet-control a {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

Google Maps, OpenLayers and MapBox Studio embed is also using this for their controls:

[johnd0e]

@Malvoz
It seems not good to disable user-selection unconditionally.
That is right for controls like zoom, but wrong for others, like attribution.

Even worse: with proposed code when user tries to select whole text - only some fragments get selected:

[Malvoz]

My "potential solution" derived from rather quickly looking into how other map tools have handled this. Google Maps (embed and API) seem content in disabling selection for attribution altogether, Bing Maps is using pointer-events: none (with auto for links) which seems less reliable.

And even if you'd be okay with disabling text selection for controls and attribution, there would still be a problem: content outside of the map viewer (unless it's embedded in an iframe) would be the next available target for text selection. So I don't think there's a quick CSS solution here, if only we had user-select: contain (caniuse), for e.g. .leaflet-map-pane.

[johnd0e]

I see similar behavior on taphold (contextmenu) in android Chrome:
https://pomf.pyonpyon.moe/jvlscs.html

[johnd0e]

As appeared, tap handler was able to prevent unwanted selection, with this code:

Leaflet/src/map/handler/Map.Tap.js

Lines 40 to 43 in 32ea41b

	_onDown: function (e) {
	if (!e.touches) { return; }
	DomEvent.preventDefault(e);

This is not working atm, because touch events handling is currently emulated using pointer events (which was not intended btw, and still could be changed, see #7077).

Anyway, I do not feel that preventing touchstart is right way.

@Malvoz

if only we had user-select: contain (caniuse),

But we could try to emulate that behavior, adding some class on touchstart, and removing it on touchend/cancel..

[Malvoz]

if only we had user-select: contain (caniuse),

But we could try to emulate that behavior

Github has a polyfill: https://github.com/github/user-select-contain-polyfill. Perhaps Leaflet has a policy not to use polyfills, in which case it may serve as inspiration.

[Malvoz]

Possible solution, from #5449 (comment):

SVG icons wouldn't catch text selection.