[accessibility] Make the map container a distinct semantic structure that entails all its components

[Malvoz]

When visual users look at a map they can easily tell that the controls, attribution, and other (potentially custom) UI components that are placed on the map belong to it. AT users rely on HTML semantics, DOM structure, and ARIA to convey these things and their relationships.

Currently, the tabindex="0", aria-label="Map" and role="region" (which together convey the focusable "map component") are set on the <canvas> which means that any components that are placed outside of it (e.g. the mapboxgl-control-container controls and potential custom UI components) aren't programmatically determinable as related to the map's structure.

Notice how in the accessibility tree the button is seemingly not part of any particular semantic structure:

If tabindex="0", aria-label="Map" and role="region" were moved from <canvas> to <div class="mapboxgl-map"> the correct structure would be accomplished (and logical focus order guaranteed). However, in this case I suppose the div would have to act as a proxy for canvas in terms of user input, and probably other things, which might get messy.

Another option is to use aria-owns which is seemingly widely supported, straight forward to use, and produces the desired result:

Although, the number 1 rule of using ARIA is to avoid using ARIA if you can. And there's also the consideration of how aria-owns should work with developers' custom UI components.

---

Relates to WCAG 2.1 SC 1.3.1 Info and Relationships.

[lpizzinidev]

Hi @mourner ✋ can I work on this issue?

[mourner]

@lpizzinidev sure! 🙏