Hide dragging ListView row from Talkback during virtual drag (#3492)

if a listview was only draggable, the dragged row element and drag handle was focusable via TalkBack. Hide the row element so that users dont need to perform an extra swipe to focus the drag handle

Co-authored-by: Reid Barber <[email protected]>

Author: LFDanLu

packages/@react-spectrum/dnd/src/useDragHooks.ts

@@ -1,12 +1,13 @@
 import {DraggableCollectionOptions, DraggableCollectionState, useDraggableCollectionState} from '@react-stately/dnd';
 import {DraggableCollectionProps} from '@react-types/shared';
-import {DraggableItemProps, DraggableItemResult, DragPreview, useDraggableItem} from '@react-aria/dnd';
+import {DraggableItemProps, DraggableItemResult, DragPreview, isVirtualDragging, useDraggableItem} from '@react-aria/dnd';
 import {useMemo} from 'react';
 
 export interface DragHooks {
   useDraggableCollectionState(props: Omit<DraggableCollectionOptions, 'getItems'>): DraggableCollectionState,
   useDraggableItem(props: DraggableItemProps, state: DraggableCollectionState): DraggableItemResult,
-  DragPreview: typeof DragPreview
+  DragPreview: typeof DragPreview,
+  isVirtualDragging(): boolean
 }
 
 export interface DragHookOptions extends Omit<DraggableCollectionProps, 'preview'> {}
@@ -17,6 +18,7 @@ export function useDragHooks(options: DragHookOptions): DragHooks {
       return useDraggableCollectionState({...props, ...options});
     },
     useDraggableItem,
-    DragPreview
+    DragPreview,
+    isVirtualDragging
   }), [options]);
 }

packages/@react-spectrum/list/src/ListViewItem.tsx

@@ -129,6 +129,7 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
   let {visuallyHiddenProps} = useVisuallyHidden();
 
   let dropProps = isDroppable ? droppableItem?.dropProps : {'aria-hidden': droppableItem?.dropProps['aria-hidden']};
+  let isVirtualDragging = dropHooks?.isVirtualDragging() || dragHooks?.isVirtualDragging();
   const mergedProps = mergeProps(
     rowProps,
     draggableItem?.dragProps,
@@ -138,7 +139,7 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
     focusProps,
     // Remove tab index from list row if performing a screenreader drag. This prevents TalkBack from focusing the row,
     // allowing for single swipe navigation between row drop indicator
-    dropHooks?.isVirtualDragging() && {tabIndex: null}
+    isVirtualDragging && {tabIndex: null}
   );
 
   let isFirstRow = item.prevKey == null;