Handle dragging with NVDA/JAWS in browse mode (#3524)

* Handle dragging with NVDA/JAWS in browse mode

* Don't allow other click events on standalone draggable elements

* Update packages/@react-aria/dnd/src/useDraggableItem.ts

Co-authored-by: Michael Jordan <[email protected]>

* fix lint error after merge from main

* Fix merge

* Update isVirtualEvent.ts

* Move drop on Enter to key up

* Update useDrag.ts

* Fix test

Co-authored-by: Michael Jordan <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>
Co-authored-by: Danni <[email protected]>

Author: 4 people

packages/@react-aria/dnd/src/DragManager.ts

@@ -15,6 +15,7 @@ import {ariaHideOutside} from '@react-aria/overlays';
 import {DragEndEvent, DragItem, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropItem, DropOperation, DropTarget as DroppableCollectionTarget, FocusableElement} from '@react-types/shared';
 import {flushSync} from 'react-dom';
 import {getDragModality, getTypes} from './utils';
+import {isVirtualClick, isVirtualPointerEvent} from '@react-aria/utils';
 import type {LocalizedStringFormatter} from '@internationalized/string';
 import {useEffect, useState} from 'react';
 
@@ -135,7 +136,6 @@ const CANCELED_EVENTS = [
   'touchstart',
   'touchmove',
   'touchend',
-  'keyup',
   'focusin',
   'focusout'
 ];
@@ -169,6 +169,7 @@ class DragSession {
     this.stringFormatter = stringFormatter;
 
     this.onKeyDown = this.onKeyDown.bind(this);
+    this.onKeyUp = this.onKeyUp.bind(this);
     this.onFocus = this.onFocus.bind(this);
     this.onBlur = this.onBlur.bind(this);
     this.onClick = this.onClick.bind(this);
@@ -179,6 +180,7 @@ class DragSession {
 
   setup() {
     document.addEventListener('keydown', this.onKeyDown, true);
+    document.addEventListener('keyup', this.onKeyUp, true);
     window.addEventListener('focus', this.onFocus, true);
     window.addEventListener('blur', this.onBlur, true);
     document.addEventListener('click', this.onClick, true);
@@ -198,6 +200,7 @@ class DragSession {
 
   teardown() {
     document.removeEventListener('keydown', this.onKeyDown, true);
+    document.removeEventListener('keyup', this.onKeyUp, true);
     window.removeEventListener('focus', this.onFocus, true);
     window.removeEventListener('blur', this.onBlur, true);
     document.removeEventListener('click', this.onClick, true);
@@ -219,15 +222,6 @@ class DragSession {
       return;
     }
 
-    if (e.key === 'Enter') {
-      if (e.altKey) {
-        this.activate();
-      } else {
-        this.drop();
-      }
-      return;
-    }
-
     if (e.key === 'Tab' && !(e.metaKey || e.altKey || e.ctrlKey)) {
       if (e.shiftKey) {
         this.previous();
@@ -241,6 +235,18 @@ class DragSession {
     }
   }
 
+  onKeyUp(e: KeyboardEvent) {
+    this.cancelEvent(e);
+
+    if (e.key === 'Enter') {
+      if (e.altKey) {
+        this.activate();
+      } else {
+        this.drop();
+      }
+    }
+  }
+
   onFocus(e: FocusEvent) {
     // Prevent focus events, except to the original drag target.
     if (e.target !== this.dragTarget.element) {
@@ -284,7 +290,7 @@ class DragSession {
 
   onClick(e: MouseEvent) {
     this.cancelEvent(e);
-    if (e.detail === 0 || this.isVirtualClick) {
+    if (isVirtualClick(e) || this.isVirtualClick) {
       if (e.target === this.dragTarget.element) {
         this.cancel();
         return;
@@ -585,19 +591,3 @@ function findValidDropTargets(options: DragTarget) {
     return true;
   });
 }
-
-function isVirtualPointerEvent(event: PointerEvent) {
-  // If the pointer size is zero, then we assume it's from a screen reader.
-  // Android TalkBack double tap will sometimes return a event with width and height of 1
-  // and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
-  // Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
-  // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216
-  return (
-    (event.width === 0 && event.height === 0) ||
-    (event.width === 1 &&
-      event.height === 1 &&
-      event.pressure === 0 &&
-      event.detail === 0
-    )
-  );
-}

packages/@react-aria/dnd/src/useDrag.ts

@@ -18,7 +18,7 @@ import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, EFFECT_ALLOWED} from './c
 import {globalDropEffect, setGlobalAllowedDropOperations, setGlobalDropEffect, useDragModality, writeToDataTransfer} from './utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {useDescription, useGlobalListeners, useLayoutEffect} from '@react-aria/utils';
+import {isVirtualClick, isVirtualPointerEvent, useDescription, useGlobalListeners, useLayoutEffect} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface DragOptions {
@@ -248,16 +248,7 @@ export function useDrag(options: DragOptions): DragResult {
   };
 
   let modality = useDragModality();
-  let message: string;
-  if (!isDraggingRef.current) {
-    if (modality === 'touch' && !hasDragButton) {
-      message = 'dragDescriptionLongPress';
-    } else {
-      message = MESSAGES[modality].start;
-    }
-  } else {
-    message = MESSAGES[modality].end;
-  }
+  let message = !isDraggingRef.current ? MESSAGES[modality].start : MESSAGES[modality].end;
 
   let descriptionProps = useDescription(stringFormatter.format(message));
 
@@ -273,7 +264,9 @@ export function useDrag(options: DragOptions): DragResult {
     interactions = {
       ...descriptionProps,
       onPointerDown(e) {
-        // Try to detect virtual drags.
+        modalityOnPointerDown.current = isVirtualPointerEvent(e.nativeEvent) ? 'virtual' : e.pointerType;
+
+        // Try to detect virtual drag passthrough gestures.
         if (e.width < 1 && e.height < 1) {
           // iOS VoiceOver.
           modalityOnPointerDown.current = 'virtual';
@@ -284,7 +277,7 @@ export function useDrag(options: DragOptions): DragResult {
           let centerX = rect.width / 2;
           let centerY = rect.height / 2;
 
-          if (Math.abs(offsetX - centerX) < 0.5 && Math.abs(offsetY - centerY) < 0.5) {
+          if (Math.abs(offsetX - centerX) <= 0.5 && Math.abs(offsetY - centerY) <= 0.5) {
             // Android TalkBack.
             modalityOnPointerDown.current = 'virtual';
           } else {
@@ -304,6 +297,14 @@ export function useDrag(options: DragOptions): DragResult {
           e.stopPropagation();
           startDragging(e.target as HTMLElement);
         }
+      },
+      onClick(e) {
+        // Handle NVDA/JAWS in browse mode, and touch screen readers. In this case, no keyboard events are fired.
+        if (isVirtualClick(e.nativeEvent) || modalityOnPointerDown.current === 'virtual') {
+          e.preventDefault();
+          e.stopPropagation();
+          startDragging(e.target as HTMLElement);
+        }
       }
     };
   }

packages/@react-aria/dnd/src/useDraggableItem.ts

@@ -92,7 +92,7 @@ export function useDraggableItem(props: DraggableItemProps, state: DraggableColl
 
   // Override description to include selected item count.
   let modality = useDragModality();
-  if (!props.hasDragButton) {
+  if (!props.hasDragButton && state.selectionManager.selectionMode !== 'none') {
     let msg = MESSAGES[modality][isSelected ? 'selected' : 'notSelected'];
     if (props.hasAction && modality === 'keyboard') {
       msg += 'Alt';
@@ -103,6 +103,10 @@ export function useDraggableItem(props: DraggableItemProps, state: DraggableColl
     } else {
       description = stringFormatter.format(msg);
     }
+
+    // Remove the onClick handler from useDrag. Long pressing will be required on touch devices,
+    // and NVDA/JAWS are always in forms mode within collection components.
+    delete dragProps.onClick;
   } else {
     if (isSelected) {
       dragButtonLabel = stringFormatter.format('dragSelectedItems', {count: numKeysForDrag});

packages/@react-aria/dnd/test/dnd.test.js

@@ -1484,9 +1484,10 @@ describe('useDrag and useDrop', function () {
       });
 
       it('should cancel the drag when pressing Enter on the original drag target', () => {
+        let onDragStart = jest.fn();
         let onDragEnd = jest.fn();
         let tree = render(<>
-          <Draggable onDragEnd={onDragEnd} />
+          <Draggable onDragStart={onDragStart} onDragEnd={onDragEnd} />
           <Droppable />
         </>);
 
@@ -1500,15 +1501,18 @@ describe('useDrag and useDrop', function () {
         fireEvent.keyUp(draggable, {key: 'Enter'});
         act(() => jest.runAllTimers());
         expect(document.activeElement).toBe(droppable);
+        expect(onDragStart).toHaveBeenCalledTimes(1);
 
         userEvent.tab();
         expect(document.activeElement).toBe(draggable);
 
         fireEvent.keyDown(draggable, {key: 'Enter'});
         fireEvent.keyUp(draggable, {key: 'Enter'});
+        act(() => jest.runAllTimers());
         expect(document.activeElement).toBe(draggable);
 
         expect(onDragEnd).toHaveBeenCalledTimes(1);
+        expect(onDragStart).toHaveBeenCalledTimes(1);
       });
 
       it('should handle when a drop target is removed', () => {
@@ -2023,6 +2027,7 @@ describe('useDrag and useDrop', function () {
       let droppable = tree.getByText('Drop here');
       let droppable2 = tree.getByText('Drop here 2');
 
+      act(() => draggable.focus());
       fireEvent.focus(draggable);
       expect(draggable).toHaveAttribute('aria-describedby');
       expect(document.getElementById(draggable.getAttribute('aria-describedby'))).toHaveTextContent('Click to start dragging');
@@ -2421,7 +2426,7 @@ describe('useDrag and useDrop', function () {
 
       let draggable = tree.getByText('Drag me');
 
-      fireEvent.focus(draggable);
+      act(() => draggable.focus());
       fireEvent.click(draggable);
       act(() => jest.runAllTimers());
 
@@ -2474,6 +2479,7 @@ describe('useDrag and useDrop', function () {
       let draggable = tree.getByText('Drag me');
       let droppable = tree.getByText('Drop here');
 
+      act(() => draggable.focus());
       fireEvent.focus(draggable);
       expect(draggable).toHaveAttribute('aria-describedby');
       expect(document.getElementById(draggable.getAttribute('aria-describedby'))).toHaveTextContent('Double tap to start dragging');

packages/@react-aria/dnd/test/examples.js

@@ -18,8 +18,7 @@ import {useDrag, useDrop} from '../';
 
 export function Draggable(props) {
   let preview = useRef(null);
-  let {dragProps, dragButtonProps, isDragging} = useDrag({
-    hasDragButton: true,
+  let {dragProps, isDragging} = useDrag({
     getItems() {
       return [{
         'text/plain': 'hello world'
@@ -29,14 +28,12 @@ export function Draggable(props) {
     ...props
   });
 
-  let ref = React.useRef();
-  let {buttonProps} = useButton({...dragButtonProps, elementType: 'div'}, ref);
-
   return (
     <>
       <div
-        ref={ref}
-        {...mergeProps(dragProps, buttonProps)}
+        {...dragProps}
+        role="button"
+        tabIndex={0}
         data-dragging={isDragging}>
         {props.children || 'Drag me'}
       </div>

packages/@react-aria/interactions/src/useFocusVisible.ts

@@ -15,8 +15,7 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import {isMac} from '@react-aria/utils';
-import {isVirtualClick} from './utils';
+import {isMac, isVirtualClick} from '@react-aria/utils';
 import {useEffect, useState} from 'react';
 
 export type Modality = 'keyboard' | 'pointer' | 'virtual';

packages/@react-aria/interactions/src/usePress.ts

@@ -17,8 +17,7 @@
 
 import {disableTextSelection, restoreTextSelection} from './textSelection';
 import {DOMAttributes, FocusableElement, PointerType, PressEvents} from '@react-types/shared';
-import {focusWithoutScrolling, mergeProps, useGlobalListeners, useSyncRef} from '@react-aria/utils';
-import {isVirtualClick} from './utils';
+import {focusWithoutScrolling, isVirtualClick, isVirtualPointerEvent, mergeProps, useGlobalListeners, useSyncRef} from '@react-aria/utils';
 import {PressResponderContext} from './context';
 import {RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react';
 
@@ -803,21 +802,3 @@ function isValidInputKey(target: HTMLInputElement, key: string) {
     ? key === ' '
     : nonTextInputTypes.has(target.type);
 }
-
-function isVirtualPointerEvent(event: PointerEvent) {
-  // If the pointer size is zero, then we assume it's from a screen reader.
-  // Android TalkBack double tap will sometimes return a event with width and height of 1
-  // and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
-  // Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
-  // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216. event.pointerType === 'mouse' is to distingush
-  // Talkback double tap from Windows Firefox touch screen press
-  return (
-    (event.width === 0 && event.height === 0) ||
-    (event.width === 1 &&
-      event.height === 1 &&
-      event.pressure === 0 &&
-      event.detail === 0 &&
-      event.pointerType === 'mouse'
-    )
-  );
-}

packages/@react-aria/interactions/src/utils.ts

@@ -10,35 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {isAndroid, useLayoutEffect} from '@react-aria/utils';
 import {FocusEvent as ReactFocusEvent, useCallback, useRef} from 'react';
-
-// Original licensing for the following method can be found in the
-// NOTICE file in the root directory of this source tree.
-// See https://github.com/facebook/react/blob/3c713d513195a53788b3f8bb4b70279d68b15bcc/packages/react-interactions/events/src/dom/shared/index.js#L74-L87
-
-// Keyboards, Assistive Technologies, and element.click() all produce a "virtual"
-// click event. This is a method of inferring such clicks. Every browser except
-// IE 11 only sets a zero value of "detail" for click events that are "virtual".
-// However, IE 11 uses a zero value for all click events. For IE 11 we rely on
-// the quirk that it produces click events that are of type PointerEvent, and
-// where only the "virtual" click lacks a pointerType field.
-
-export function isVirtualClick(event: MouseEvent | PointerEvent): boolean {
-  // JAWS/NVDA with Firefox.
-  if ((event as any).mozInputSource === 0 && event.isTrusted) {
-    return true;
-  }
-
-  // Android TalkBack's detail value varies depending on the event listener providing the event so we have specific logic here instead
-  // If pointerType is defined, event is from a click listener. For events from mousedown listener, detail === 0 is a sufficient check
-  // to detect TalkBack virtual clicks.
-  if (isAndroid() && (event as PointerEvent).pointerType) {
-    return event.type === 'click' && event.buttons === 1;
-  }
-
-  return event.detail === 0 && !(event as PointerEvent).pointerType;
-}
+import {useLayoutEffect} from '@react-aria/utils';
 
 export class SyntheticFocusEvent implements ReactFocusEvent {
   nativeEvent: FocusEvent;

packages/@react-aria/utils/src/index.ts

@@ -33,3 +33,4 @@ export {useEvent} from './useEvent';
 export {useValueEffect} from './useValueEffect';
 export {scrollIntoView} from './scrollIntoView';
 export {clamp, snapValueToStep} from '@react-stately/utils';
+export {isVirtualClick, isVirtualPointerEvent} from './isVirtualEvent';