[accessibility] The × character in the close button of popups should be explicitly hidden from ATs

[Malvoz]

Although the contents of aria-label overrides the × character in the close button of popups, it is still announced as multiplication or times (depending on the screen reader) when the user is hovering the control with a mouse pointer.

To solve this issue, the × character:

maplibre-gl-js/src/ui/popup.ts

Line 497 in 9e6d57a

this._closeButton.innerHTML = '×';

should be wrapped in <span aria-hidden="true">.

(This would also align and be more consistent with other controls that hide icons from ATs, such as the zoom in control)

maplibre-gl-js/src/ui/control/navigation_control.ts

Line 58 in e78ad79

DOM.create('span', 'maplibregl-ctrl-icon mapboxgl-ctrl-icon', this._zoomInButton).setAttribute('aria-hidden', 'true');

---

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

[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.