Remove tabindex when non-interactive map

mapbox · Aug 15, 2023 · 7cf0f15 · 7cf0f15
1 parent 068a7f3
commit 7cf0f15
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/ui/map.js b/src/ui/map.js
@@ -3140,16 +3140,17 @@ class Map extends Camera {
         this._detectMissingCSS();
 
         const canvasContainer = this._canvasContainer = DOM.create('div', 'mapboxgl-canvas-container', container);
+        this._canvas = DOM.create('canvas', 'mapboxgl-canvas', canvasContainer);
+
         if (this._interactive) {
             canvasContainer.classList.add('mapboxgl-interactive');
+            this._canvas.setAttribute('tabindex', '0');
         }
 
-        this._canvas = DOM.create('canvas', 'mapboxgl-canvas', canvasContainer);
         // $FlowFixMe[method-unbinding]
         this._canvas.addEventListener('webglcontextlost', this._contextLost, false);
         // $FlowFixMe[method-unbinding]
         this._canvas.addEventListener('webglcontextrestored', this._contextRestored, false);
-        this._canvas.setAttribute('tabindex', '0');
         this._canvas.setAttribute('aria-label', this._getUIString('Map.Title'));
         this._canvas.setAttribute('role', 'region');
 

diff --git a/test/unit/ui/map.test.js b/test/unit/ui/map.test.js
@@ -3857,6 +3857,15 @@ test('Map', (t) => {
         t.end();
     });
 
+    t.test('should not have tabindex attribute when non-interactive', (t) => {
+        const map = createMap(t, {interactive: false});
+
+        t.notOk(map.getCanvas().getAttribute('tabindex'));
+
+        map.remove();
+        t.end();
+    });
+
     t.test('should calculate correct canvas size when transform css property is applied', (t) => {
         const map = createMap(t);
         Object.defineProperty(window, 'getComputedStyle',