@react-spectrum/list 3.0.1-nightly.3451 → 3.0.1-nightly.3458

package/src/ListView.tsx

@@ -15,7 +15,7 @@ import type {DraggableCollectionState, DroppableCollectionState} from '@react-st
 import {DragHooks, DropHooks} from '@react-spectrum/dnd';
 import type {DroppableCollectionResult} from '@react-aria/dnd';
 import {filterDOMProps, useLayoutEffect} from '@react-aria/utils';
-import {FocusRing} from '@react-aria/focus';
+import {FocusRing, FocusScope} from '@react-aria/focus';
 import InsertionIndicator from './InsertionIndicator';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -180,84 +180,86 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
 
   return (
     <ListViewContext.Provider value={{state, dragState, dropState, dragHooks, dropHooks, onAction, isListDraggable, isListDroppable, layout, loadingState}}>
-      <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>
-        <Virtualizer
-          {...mergeProps(isListDroppable && droppableCollection?.collectionProps, gridProps)}
-          {...filterDOMProps(otherProps)}
-          {...gridProps}
-          {...styleProps}
-          isLoading={isLoading}
-          onLoadMore={onLoadMore}
-          ref={domRef}
-          focusedKey={focusedKey}
-          scrollDirection="vertical"
-          className={
-            classNames(
-              listStyles,
-              'react-spectrum-ListView',
-              `react-spectrum-ListView--${density}`,
-              'react-spectrum-ListView--emphasized',
-              {
-                'react-spectrum-ListView--quiet': isQuiet,
-                'react-spectrum-ListView--loadingMore': loadingState === 'loadingMore',
-                'react-spectrum-ListView--draggable': !!isListDraggable,
-                'react-spectrum-ListView--dropTarget': !!isRootDropTarget,
-                'react-spectrum-ListView--isVerticalScrollbarVisible': isVerticalScrollbarVisible,
-                'react-spectrum-ListView--isHorizontalScrollbarVisible': isHorizontalScrollbarVisible,
-                'react-spectrum-ListView--hasAnyChildren': hasAnyChildren,
-                'react-spectrum-ListView--wrap': overflowMode === 'wrap'
-              },
-              styleProps.className
-            )
-          }
-          layout={layout}
-          collection={collection}
-          transitionDuration={isLoading ? 160 : 220}>
-          {(type, item) => {
-            if (type === 'item') {
-              return (
-                <>
-                  {isListDroppable && collection.getKeyBefore(item.key) == null &&
-                    <RootDropIndicator key="root" />
-                  }
-                  {isListDroppable &&
-                    <InsertionIndicator
-                      key={`${item.key}-before`}
-                      target={{key: item.key, type: 'item', dropPosition: 'before'}} />
-                  }
-                  <ListViewItem item={item} isEmphasized hasActions={!!onAction} />
-                  {isListDroppable &&
-                    <InsertionIndicator
-                      key={`${item.key}-after`}
-                      target={{key: item.key, type: 'item', dropPosition: 'after'}}
-                      isPresentationOnly={collection.getKeyAfter(item.key) != null} />
-                  }
-                </>
-              );
-            } else if (type === 'loader') {
-              return (
-                <CenteredWrapper>
-                  <ProgressCircle
-                    isIndeterminate
-                    aria-label={collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />
-                </CenteredWrapper>
-              );
-            } else if (type === 'placeholder') {
-              let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;
-              if (emptyState == null) {
-                return null;
-              }
-
-              return (
-                <CenteredWrapper>
-                  {emptyState}
-                </CenteredWrapper>
-              );
+      <FocusScope>
+        <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>
+          <Virtualizer
+            {...mergeProps(isListDroppable && droppableCollection?.collectionProps, gridProps)}
+            {...filterDOMProps(otherProps)}
+            {...gridProps}
+            {...styleProps}
+            isLoading={isLoading}
+            onLoadMore={onLoadMore}
+            ref={domRef}
+            focusedKey={focusedKey}
+            scrollDirection="vertical"
+            className={
+              classNames(
+                listStyles,
+                'react-spectrum-ListView',
+                `react-spectrum-ListView--${density}`,
+                'react-spectrum-ListView--emphasized',
+                {
+                  'react-spectrum-ListView--quiet': isQuiet,
+                  'react-spectrum-ListView--loadingMore': loadingState === 'loadingMore',
+                  'react-spectrum-ListView--draggable': !!isListDraggable,
+                  'react-spectrum-ListView--dropTarget': !!isRootDropTarget,
+                  'react-spectrum-ListView--isVerticalScrollbarVisible': isVerticalScrollbarVisible,
+                  'react-spectrum-ListView--isHorizontalScrollbarVisible': isHorizontalScrollbarVisible,
+                  'react-spectrum-ListView--hasAnyChildren': hasAnyChildren,
+                  'react-spectrum-ListView--wrap': overflowMode === 'wrap'
+                },
+                styleProps.className
+              )
             }
+            layout={layout}
+            collection={collection}
+            transitionDuration={isLoading ? 160 : 220}>
+            {(type, item) => {
+              if (type === 'item') {
+                return (
+                  <>
+                    {isListDroppable && collection.getKeyBefore(item.key) == null &&
+                      <RootDropIndicator key="root" />
+                    }
+                    {isListDroppable &&
+                      <InsertionIndicator
+                        key={`${item.key}-before`}
+                        target={{key: item.key, type: 'item', dropPosition: 'before'}} />
+                    }
+                    <ListViewItem item={item} isEmphasized hasActions={!!onAction} />
+                    {isListDroppable &&
+                      <InsertionIndicator
+                        key={`${item.key}-after`}
+                        target={{key: item.key, type: 'item', dropPosition: 'after'}}
+                        isPresentationOnly={collection.getKeyAfter(item.key) != null} />
+                    }
+                  </>
+                );
+              } else if (type === 'loader') {
+                return (
+                  <CenteredWrapper>
+                    <ProgressCircle
+                      isIndeterminate
+                      aria-label={collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />
+                  </CenteredWrapper>
+                );
+              } else if (type === 'placeholder') {
+                let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;
+                if (emptyState == null) {
+                  return null;
+                }
 
-          }}
-        </Virtualizer>
-      </FocusRing>
+                return (
+                  <CenteredWrapper>
+                    {emptyState}
+                  </CenteredWrapper>
+                );
+              }
+
+            }}
+          </Virtualizer>
+        </FocusRing>
+      </FocusScope>
       {DragPreview && isListDraggable &&
         <DragPreview ref={preview}>
           {() => {

package/src/ListViewItem.tsx

@@ -73,7 +73,7 @@ export function ListViewItem<T>(props: ListViewItemProps<T>) {
   let draggableItem: DraggableItemResult;
   if (isListDraggable) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    draggableItem = dragHooks.useDraggableItem({key: item.key}, dragState);
+    draggableItem = dragHooks.useDraggableItem({key: item.key, hasDragButton: true}, dragState);
     if (isDisabled) {
       draggableItem = null;
     }
@@ -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