Address accessibility issues

[avpeery]

Addresses accessibility milestone issues: #11036, #11034, #11032, and #11031.

1. [accessibility] Consider conveying only one of aria-label and title in controls #11036 Removes title in preference for only using aria-label in controls. Some screen-readers will announce both title and aria-label. Docs on aria-label, accessibility concerns with using title attribute.

2. [accessibility] Consider replacing aria-pressed with aria-expanded on the attribution control #11034 Aria-pressed on attribution control is replaced with aria-expanded. Aria-expanded indicates that a grouping of other elements is displayed ("expanded") or hidden ("collapsed"). Here is the difference between aria-pressed and aria-expanded

3. [accessibility] Interactive markers should convey the aria-expanded state of the controlled popup #11032 Interactive markers with popups should also use aria-expanded to reveal if the state of the marker is expanded or collapsed.

4. [accessibility] Interactive markers should be role="button" #11031 role="button" should be set on interactive markers (aka markers with popups). Setting role="button" reveals that the element is clickable to screen readers. Docs on role button

Launch Checklist

• briefly describe the changes in this PR
• write tests for all new functionality
• manually test the debug page
• apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
• add an entry inside this element for inclusion in the mapbox-gl-js changelog: Improvements to accessibility: conveying only aria-label in controls, replaced aria-pressed with aria-expanded in the attribution control, interactive markers with popups express an aria-expanded state, and interactive markers have the role "button".

[mourner]

Overall this looks great. The only reservation I have is removing the title attribute — I'm wondering if this also removes the tooltip that's shown when hovering the control, and if so, whether we should try the suggestion in the reported issue instead (where title and aria-label are put on different nested elements) so that we keep the current behavior.

[avpeery]

The only reservation I have is removing the title attribute — I'm wondering if this also removes the tooltip that's shown when hovering the control, and if so, whether we should try the suggestion in the reported issue instead (where title and aria-label are put on different nested elements) so that we keep the current behavior.

@mourner I checked it out and it did remove the native tooltips. I used the nested element as suggested to add the title attribute, and tooltips now work as expected. Thanks!