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

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.

The issue names the map container, canvas, mapboxgl-control-container, and the tabindex, aria-label, role, and aria-owns attributes, but no files or tests. Start by locating where these accessibility attributes are assigned and inspect the accessibility tree for controls and custom UI; done means the map and its components form a programmatically determinable semantic structure under WCAG 2.1 SC 1.3.1.