diff --git a/src/ui/control/navigation_control.js b/src/ui/control/navigation_control.js index c03940f9cbb..395fefd2e45 100644 --- a/src/ui/control/navigation_control.js +++ b/src/ui/control/navigation_control.js @@ -46,14 +46,14 @@ class NavigationControl { this._container.addEventListener('contextmenu', (e) => e.preventDefault()); if (this.options.showZoom) { - this._zoomInButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-in', 'Zoom In', () => this._map.zoomIn()); - this._zoomOutButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-out', 'Zoom Out', () => this._map.zoomOut()); + this._zoomInButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-in', 'Zoom in', () => this._map.zoomIn()); + this._zoomOutButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-out', 'Zoom out', () => this._map.zoomOut()); } if (this.options.showCompass) { bindAll([ '_rotateCompassArrow' ], this); - this._compass = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-compass', 'Reset North', () => this._map.resetNorth()); + this._compass = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-compass', 'Reset bearing to north', () => this._map.resetNorth()); this._compassArrow = DOM.create('span', 'mapboxgl-ctrl-compass-arrow', this._compass); } } @@ -90,6 +90,7 @@ class NavigationControl { _createButton(className: string, ariaLabel: string, fn: () => mixed) { const a = DOM.create('button', className, this._container); a.type = 'button'; + a.title = ariaLabel; a.setAttribute('aria-label', ariaLabel); a.addEventListener('click', fn); return a;