Adding "markers" for clusters in aria-label for accessibility

[tmiaa]

trafficstars

This is adding invisible "markers" information with aria-label for each marker cluster to fix https://github.com/Leaflet/Leaflet.markercluster/issues/1006 and each marker cluster now reads better "N markers" not just "N".

[Malvoz]

I tested in Narrator, attaching screen and audio capture (you may have to unmute the videos):

Before (no contextual information for marker clusters):

After (with contextual information aria-label="markers"):

[Malvoz]

@ykzeng do you think you can merge this? If there's a need for more reviews, maybe @Falke-design can take a look?

[Falke-Design]

@Malvoz would not be better html: '<div><span aria-label="' + childCount + ' markers">' + childCount + '</span></div>'?

[Malvoz]

@Falke-Design I wonder if there are any cases where screen readers would then announce "<childCount> markers <childCount>". That shouldn't be the case, and would probably be a screen reader bug. But the current approach wouldn't have that potential issue so I think it's fine. 👍🏼

I guess you could do html: '<div><span aria-label="' + childCount + ' markers">' + '<span aria-hidden="true"' + childCount + '</span>' + '</span></div>' to be sure in that case.

[Falke-Design]

Ok then the current solutions looks better 👍

[Malvoz]

Thanks for the review @Falke-Design!

[Malvoz]

@mourner This change provides the necessary contextual information to cluster markers for screen reader users (per https://github.com/Leaflet/Leaflet.markercluster/issues/1006). If you have the time, can you please merge this, since @ykzeng is not responding?

[brorlarsnicklas]

@Malvoz @Falke-Design I think it would be nice to add an option so the aria-label can be set to any label of choice, e.g. other languages as well. Any suggestions?

[Malvoz]

@brorlarsnicklas Indeed that would be an improvement, though it could be considered a separate issue as an enhancement to this PR.