Skip row contents when cycling through droppable ListView rows via TalkBack (#3401)

Author: LFDanLu

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

@@ -100,6 +100,10 @@ export function useDragSession() {
   return session;
 }
 
+export function isVirtualDragging(): boolean {
+  return !!dragSession;
+}
+
 function endDragging() {
   dragSession = null;
   for (let cb of subscriptions) {

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

@@ -29,3 +29,4 @@ export {useDraggableItem} from './useDraggableItem';
 export {useClipboard} from './useClipboard';
 export {DragPreview} from './DragPreview';
 export {ListDropTargetDelegate} from './ListDropTargetDelegate';
+export {isVirtualDragging} from './DragManager';

packages/@react-aria/overlays/src/ariaHideOutside.ts

@@ -36,20 +36,16 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
         }
 
         // Skip this node and its children if it is one of the target nodes, or a live announcer.
-        // Also skip children of already hidden nodes, as aria-hidden is recursive.
+        // Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
+        // made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
+        // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
         if (
           visibleNodes.has(node as Element) ||
-          hiddenNodes.has(node.parentElement)
+          (hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row')
         ) {
           return NodeFilter.FILTER_REJECT;
         }
 
-        // VoiceOver on iOS has issues hiding elements with role="row". Hide the cells inside instead.
-        // https://bugs.webkit.org/show_bug.cgi?id=222623
-        if (node instanceof Element && node.getAttribute('role') === 'row') {
-          return NodeFilter.FILTER_SKIP;
-        }
-
         // Skip this node but continue to children if one of the targets is inside the node.
         if (targets.some(target => node.contains(target))) {
           return NodeFilter.FILTER_SKIP;

packages/@react-aria/overlays/test/ariaHideOutside.test.js

@@ -340,7 +340,9 @@ describe('ariaHideOutside', function () {
 
     let revert = ariaHideOutside([rows[1]]);
 
-    expect(rows[0]).not.toHaveAttribute('aria-hidden', 'true');
+    // Applies aria-hidden to the row and cell despite recursive nature of aria-hidden
+    // for https://bugs.webkit.org/show_bug.cgi?id=222623
+    expect(rows[0]).toHaveAttribute('aria-hidden', 'true');
     expect(cells[0]).toHaveAttribute('aria-hidden', 'true');
     expect(rows[1]).not.toHaveAttribute('aria-hidden', 'true');
     expect(cells[1]).not.toHaveAttribute('aria-hidden', 'true');

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

@@ -5,6 +5,7 @@ import {
   DroppableCollectionResult,
   DroppableItemOptions,
   DroppableItemResult,
+  isVirtualDragging,
   useDropIndicator,
   useDroppableCollection,
   useDroppableItem
@@ -17,7 +18,8 @@ export interface DropHooks {
   useDroppableCollectionState(props: DroppableCollectionStateOptions): DroppableCollectionState,
   useDroppableCollection(props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableCollectionResult,
   useDroppableItem(options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableItemResult,
-  useDropIndicator(props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DropIndicatorAria
+  useDropIndicator(props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DropIndicatorAria,
+  isVirtualDragging(): boolean
 }
 
 export function useDropHooks(options: DroppableCollectionProps): DropHooks {
@@ -29,6 +31,7 @@ export function useDropHooks(options: DroppableCollectionProps): DropHooks {
     useDroppableCollection(props, state, ref) {
       return useDroppableCollection({...props, ...options}, state, ref);
     },
-    useDropIndicator
+    useDropIndicator,
+    isVirtualDragging
   }), [options]);
 }

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

@@ -86,7 +86,6 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
     let target = {type: 'item', key: item.key, dropPosition: 'on'} as DropTarget;
     isDropTarget = dropState.isDropTarget(target);
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    droppableItem = dropHooks.useDroppableItem({target}, dropState, rowRef);
     dropIndicator = dropHooks.useDropIndicator({target}, dropState, dropIndicatorRef);
   }
 
@@ -136,7 +135,10 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
     dropProps,
     hoverProps,
     focusWithinProps,
-    focusProps
+    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}
   );
 
   let isFirstRow = item.prevKey == null;
@@ -226,7 +228,7 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
               }
             </div>
           }
-          {isDropTarget && !dropIndicator?.dropIndicatorProps['aria-hidden'] &&
+          {isListDroppable && !dropIndicator?.isHidden &&
             <div role="button" {...visuallyHiddenProps} {...dropIndicator?.dropIndicatorProps} ref={dropIndicatorRef} />
           }
           <CSSTransition

packages/@react-spectrum/list/test/ListViewDnd.test.js

@@ -1350,9 +1350,19 @@ describe('ListView', function () {
         expect(row).toHaveAttribute('draggable', 'true');
         fireEvent.keyDown(draghandle, {key: 'Enter'});
         fireEvent.keyUp(draghandle, {key: 'Enter'});
+        act(() => jest.runAllTimers());
 
-        for (let row of rows) {
-          expect(row).toHaveAttribute('aria-hidden', 'true');
+        for (let [index, row] of rows.entries()) {
+          let cell = within(row).getByRole('gridcell', {hidden: true});
+          // We hide the cell for iOS Safari and remove the row tab index so TalkBack doesn't focus the row
+          expect(row).not.toHaveAttribute('tabindex');
+          if (index === 0) {
+            expect(row).not.toHaveAttribute('aria-hidden', 'true');
+            expect(cell).not.toHaveAttribute('aria-hidden', 'true');
+          } else {
+            expect(row).toHaveAttribute('aria-hidden', 'true');
+            expect(cell).toHaveAttribute('aria-hidden', 'true');
+          }
         }
 
         fireEvent.keyDown(document.body, {key: 'Escape'});