Disable cooperative gestures in fullscreen for touch panning and add …

…screen reader alert for cooperative gestures warning message (#12058)

* Allow touch panning in fullscreen

* Adding unit test

* Adding screenreader alert to cooperative gestures warnings

* Adding double bangs to getters

src/ui/handler/scroll_zoom.js

@@ -3,7 +3,7 @@
 import assert from 'assert';
 import * as DOM from '../../util/dom.js';
 
-import {ease as _ease, bindAll, bezier} from '../../util/util.js';
+import {ease as _ease, bindAll, bezier, isFullscreen} from '../../util/util.js';
 import browser from '../../util/browser.js';
 import window from '../../util/window.js';
 import {number as interpolate} from '../../style-spec/util/interpolate.js';
@@ -76,7 +76,7 @@ class ScrollZoomHandler {
         this._defaultZoomRate = defaultZoomRate;
         this._wheelZoomRate = wheelZoomRate;
 
-        bindAll(['_onTimeout', '_addScrollZoomBlocker', '_showBlockerAlert', '_isFullscreen'], this);
+        bindAll(['_onTimeout', '_addScrollZoomBlocker', '_showBlockerAlert'], this);
 
     }
 
@@ -121,7 +121,7 @@ class ScrollZoomHandler {
     * progress.
     */
     isActive(): boolean {
-        return !!this._active || this._finishTimeout !== undefined;
+        return this._active || this._finishTimeout !== undefined;
     }
 
     isZooming(): boolean {
@@ -165,7 +165,7 @@ class ScrollZoomHandler {
         if (!this.isEnabled()) return;
 
         if (this._map._cooperativeGestures) {
-            if (!e.ctrlKey && !e.metaKey && !this.isZooming() && !this._isFullscreen()) {
+            if (!e.ctrlKey && !e.metaKey && !this.isZooming() && !isFullscreen()) {
                 this._showBlockerAlert();
                 return;
             } else if (this._alertContainer.style.visibility !== 'hidden') {
@@ -397,18 +397,16 @@ class ScrollZoomHandler {
         }
     }
 
-    _isFullscreen(): boolean {
-        return !!window.document.fullscreenElement || !!window.document.webkitFullscreenElement;
-    }
-
     _showBlockerAlert() {
-        if (this._alertContainer.style.visibility === 'hidden') this._alertContainer.style.visibility = 'visible';
+        this._alertContainer.style.visibility = 'visible';
         this._alertContainer.classList.add('mapboxgl-scroll-zoom-blocker-show');
+        this._alertContainer.setAttribute("role", "alert");
 
         clearTimeout(this._alertTimer);
 
         this._alertTimer = setTimeout(() => {
             this._alertContainer.classList.remove('mapboxgl-scroll-zoom-blocker-show');
+            this._alertContainer.setAttribute("role", "null");
         }, 200);
     }
 

src/ui/handler/touch_pan.js

@@ -3,7 +3,7 @@
 import Point from '@mapbox/point-geometry';
 import type Map from '../map.js';
 import {indexTouches} from './handler_util.js';
-import {bindAll} from '../../util/util.js';
+import {bindAll, isFullscreen} from '../../util/util.js';
 import * as DOM from '../../util/dom.js';
 import type {HandlerResult} from '../handler_manager.js';
 
@@ -44,7 +44,7 @@ export default class TouchPanHandler {
 
         // if cooperative gesture handling is set to true, require two fingers to touch pan
         if (this._map._cooperativeGestures && !this._map.isMoving()) {
-            if (mapTouches.length === 1) {
+            if (mapTouches.length === 1 && !isFullscreen()) {
                 this._showTouchPanBlockerAlert();
                 return;
             } else if (this._alertContainer.style.visibility !== 'hidden') {
@@ -127,11 +127,11 @@ export default class TouchPanHandler {
     }
 
     isEnabled(): boolean {
-        return this._enabled;
+        return !!this._enabled;
     }
 
     isActive(): boolean {
-        return this._active;
+        return !!this._active;
     }
 
     _addTouchPanBlocker() {
@@ -146,14 +146,15 @@ export default class TouchPanHandler {
     }
 
     _showTouchPanBlockerAlert() {
-        if (this._alertContainer.style.visibility === 'hidden') this._alertContainer.style.visibility = 'visible';
-
+        this._alertContainer.style.visibility = 'visible';
         this._alertContainer.classList.add('mapboxgl-touch-pan-blocker-show');
+        this._alertContainer.setAttribute("role", "alert");
 
         clearTimeout(this._alertTimer);
 
         this._alertTimer = setTimeout(() => {
             this._alertContainer.classList.remove('mapboxgl-touch-pan-blocker-show');
+            this._alertContainer.setAttribute("role", "null");
         }, 500);
     }
 

src/util/util.js

@@ -645,6 +645,10 @@ export function isSafariWithAntialiasingBug(scope: any): ?boolean {
     return userAgent && (userAgent.match('Version/15.4') || userAgent.match('Version/15.5') || userAgent.match(/CPU (OS|iPhone OS) (15_4|15_5) like Mac OS X/));
 }
 
+export function isFullscreen(): boolean {
+    return !!window.document.fullscreenElement || !!window.document.webkitFullscreenElement;
+}
+
 export function storageAvailable(type: string): boolean {
     try {
         const storage = window[type];

test/unit/ui/handler/scroll_zoom.test.js

@@ -456,7 +456,7 @@ test('When cooperativeGestures option is set to true, scroll zoom is activated w
     t.end();
 });
 
-test('When cooperativeGestures option is set to true, scroll zoom is not prevented when map is fullscreen', (t) => {
+test('When cooperativeGestures is true and map is in fullscreen, scroll zoom is not prevented', (t) => {
     window.document.fullscreenElement = true;
     const map = createMapWithCooperativeGestures(t);
 

test/unit/ui/handler/touch_pan.test.js

@@ -54,6 +54,24 @@ test('If cooperativeGestures option is set to true, touch pan is triggered when
     t.end();
 });
 
+test('When cooperativeGestures is true and map is in fullscreen, touch pan is not prevented', (t) => {
+    window.document.fullscreenElement = true;
+    const map = createMapWithCooperativeGestures(t);
+    const target = map.getCanvas();
+
+    const moveSpy = t.spy();
+    map.on('move', moveSpy);
+
+    simulate.touchstart(map.getCanvas(), {touches: [{target, identifier: 1, clientX: 0, clientY: -50}]});
+    map._renderTaskQueue.run();
+
+    simulate.touchmove(map.getCanvas(), {touches: [{target, identifier: 1, clientX: 0, clientY: -40}]});
+    map._renderTaskQueue.run();
+
+    t.equal(moveSpy.callCount, 1);
+    t.end();
+});
+
 test('Disabling touch pan removes the `.mapboxgl-touch-pan-blocker` element', (t) => {
     const map = createMapWithCooperativeGestures(t);