Address accessibility issues

src/ui/control/attribution_control.js

@@ -57,6 +57,7 @@ class AttributionControl {
         this._map = map;
         this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-attrib');
         this._compactButton = DOM.create('button', 'mapboxgl-ctrl-attrib-button', this._container);
+        DOM.create('span', `mapboxgl-ctrl-icon`, this._compactButton).setAttribute('aria-hidden', true);
         this._compactButton.type = 'button';
         this._compactButton.addEventListener('click', this._toggleAttribution);
         this._setElementTitle(this._compactButton, 'ToggleAttribution');
@@ -96,17 +97,17 @@ class AttributionControl {
 
     _setElementTitle(element: HTMLElement, title: string) {
         const str = this._map._getUIString(`AttributionControl.${title}`);
-        element.title = str;
         element.setAttribute('aria-label', str);
+        if (element.firstElementChild) element.firstElementChild.setAttribute('title', str);
     }
 
     _toggleAttribution() {
         if (this._container.classList.contains('mapboxgl-compact-show')) {
             this._container.classList.remove('mapboxgl-compact-show');
-            this._compactButton.setAttribute('aria-pressed', 'false');
+            this._compactButton.setAttribute('aria-expanded', 'false');
         } else {
             this._container.classList.add('mapboxgl-compact-show');
-            this._compactButton.setAttribute('aria-pressed', 'true');
+            this._compactButton.setAttribute('aria-expanded', 'true');
         }
     }
 

src/ui/control/fullscreen_control.js

@@ -90,7 +90,7 @@ class FullscreenControl {
     _updateTitle() {
         const title = this._getTitle();
         this._fullscreenButton.setAttribute("aria-label", title);
-        this._fullscreenButton.title = title;
+        if (this._fullscreenButton.firstElementChild) this._fullscreenButton.firstElementChild.setAttribute('title', title);
     }
 
     _getTitle() {

src/ui/control/geolocate_control.js

@@ -379,8 +379,8 @@ class GeolocateControl extends Evented {
                 this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background-error');
                 this._geolocateButton.disabled = true;
                 const title = this._map._getUIString('GeolocateControl.LocationNotAvailable');
-                this._geolocateButton.title = title;
                 this._geolocateButton.setAttribute('aria-label', title);
+                if (this._geolocateButton.firstElementChild) this._geolocateButton.firstElementChild.setAttribute('title', title);
 
                 if (this._geolocationWatchID !== undefined) {
                     this._clearWatch();
@@ -414,18 +414,19 @@ class GeolocateControl extends Evented {
         this._container.addEventListener('contextmenu', (e: MouseEvent) => e.preventDefault());
         this._geolocateButton = DOM.create('button', `mapboxgl-ctrl-geolocate`, this._container);
         DOM.create('span', `mapboxgl-ctrl-icon`, this._geolocateButton).setAttribute('aria-hidden', true);
+
         this._geolocateButton.type = 'button';
 
         if (supported === false) {
             warnOnce('Geolocation support is not available so the GeolocateControl will be disabled.');
             const title = this._map._getUIString('GeolocateControl.LocationNotAvailable');
             this._geolocateButton.disabled = true;
-            this._geolocateButton.title = title;
             this._geolocateButton.setAttribute('aria-label', title);
+            if (this._geolocateButton.firstElementChild) this._geolocateButton.firstElementChild.setAttribute('title', title);
         } else {
             const title = this._map._getUIString('GeolocateControl.FindMyLocation');
-            this._geolocateButton.title = title;
             this._geolocateButton.setAttribute('aria-label', title);
+            if (this._geolocateButton.firstElementChild) this._geolocateButton.firstElementChild.setAttribute('title', title);
         }
 
         if (this.options.trackUserLocation) {

src/ui/control/navigation_control.js

@@ -149,8 +149,8 @@ class NavigationControl {
 
     _setButtonTitle(button: HTMLButtonElement, title: string) {
         const str = this._map._getUIString(`NavigationControl.${title}`);
-        button.title = str;
         button.setAttribute('aria-label', str);
+        if (button.firstElementChild) button.firstElementChild.setAttribute('title', str);
     }
 }
 

src/ui/marker.js

@@ -369,6 +369,7 @@ export default class Marker extends Evented {
         if (this._popup) {
             this._popup.remove();
             this._popup = null;
+            this._element.removeAttribute('role');
             this._element.removeEventListener('keypress', this._onKeyPress);
 
             if (!this._originalTabIndex) {
@@ -395,11 +396,13 @@ export default class Marker extends Evented {
             this._popup = popup;
             if (this._lngLat) this._popup.setLngLat(this._lngLat);
 
+            this._element.setAttribute('role', 'button');
             this._originalTabIndex = this._element.getAttribute('tabindex');
             if (!this._originalTabIndex) {
                 this._element.setAttribute('tabindex', '0');
             }
             this._element.addEventListener('keypress', this._onKeyPress);
+            this._element.setAttribute('aria-expanded', 'false');
         }
 
         return this;
@@ -456,10 +459,15 @@ export default class Marker extends Evented {
      */
     togglePopup() {
         const popup = this._popup;
-
-        if (!popup) return this;
-        else if (popup.isOpen()) popup.remove();
-        else popup.addTo(this._map);
+        if (!popup) {
+            return this;
+        } else if (popup.isOpen()) {
+            popup.remove();
+            this._element.setAttribute('aria-expanded', 'false');
+        } else {
+            popup.addTo(this._map);
+            this._element.setAttribute('aria-expanded', 'true');
+        }
         return this;
     }
 

test/unit/ui/marker.test.js

@@ -135,6 +135,7 @@ test('Marker#togglePopup opens a popup that was closed', (t) => {
         .togglePopup();
 
     t.ok(marker.getPopup().isOpen());
+    t.equal(marker.getElement().getAttribute('aria-expanded'), 'true');
 
     map.remove();
     t.end();
@@ -150,6 +151,7 @@ test('Marker#togglePopup closes a popup that was open', (t) => {
         .togglePopup();
 
     t.ok(!marker.getPopup().isOpen());
+    t.equal(marker.getElement().getAttribute('aria-expanded'), 'false');
 
     map.remove();
     t.end();