From 16e20bf2db5c35f5fd1ac0434a1449da3e9af651 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 3 Oct 2022 13:23:22 -0700
Subject: [PATCH 1/2] Fix keyboard order of drop targets relative to drag
 target

---
 packages/@react-aria/dnd/src/DragManager.ts | 22 +++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/@react-aria/dnd/src/DragManager.ts b/packages/@react-aria/dnd/src/DragManager.ts
index 0e707a3cc2d..ddf7a4a866f 100644
--- a/packages/@react-aria/dnd/src/DragManager.ts
+++ b/packages/@react-aria/dnd/src/DragManager.ts
@@ -73,8 +73,7 @@ export function beginDragging(target: DragTarget, stringFormatter: LocalizedStri
   requestAnimationFrame(() => {
     dragSession.setup();
     if (getDragModality() === 'keyboard') {
-      let target = dragSession.findNearestDropTarget();
-      dragSession.setCurrentDropTarget(target);
+      dragSession.next();
     }
   });
 
@@ -338,6 +337,16 @@ class DragSession {
     }
 
     this.validDropTargets = findValidDropTargets(this.dragTarget);
+
+    // Shuffle drop target order based on starting drag target.
+    if (this.validDropTargets.length > 0) {
+      let nearestIndex = this.findNearestDropTarget();
+      this.validDropTargets = [
+        ...this.validDropTargets.slice(nearestIndex),
+        ...this.validDropTargets.slice(0, nearestIndex)
+      ];
+    }
+
     if (this.currentDropTarget && !this.validDropTargets.includes(this.currentDropTarget)) {
       this.setCurrentDropTarget(this.validDropTargets[0]);
     }
@@ -419,19 +428,20 @@ class DragSession {
     }
   }
 
-  findNearestDropTarget(): DropTarget {
+  findNearestDropTarget(): number {
     let dragTargetRect = this.dragTarget.element.getBoundingClientRect();
 
     let minDistance = Infinity;
-    let nearest = null;
-    for (let dropTarget of this.validDropTargets) {
+    let nearest = -1;
+    for (let i = 0; i < this.validDropTargets.length; i++) {
+      let dropTarget = this.validDropTargets[i];
       let rect = dropTarget.element.getBoundingClientRect();
       let dx = rect.left - dragTargetRect.left;
       let dy = rect.top - dragTargetRect.top;
       let dist = (dx * dx) + (dy * dy);
       if (dist < minDistance) {
         minDistance = dist;
-        nearest = dropTarget;
+        nearest = i;
       }
     }
 

From 2b5a5038ec8a1170262d58d2a4d668a44ca3ddce Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 3 Oct 2022 13:24:30 -0700
Subject: [PATCH 2/2] Fix root drop indicator with iOS VO

---
 packages/@react-aria/dnd/docs/useDraggableCollection.mdx | 6 +-----
 packages/@react-aria/dnd/docs/useDroppableCollection.mdx | 6 +-----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/@react-aria/dnd/docs/useDraggableCollection.mdx b/packages/@react-aria/dnd/docs/useDraggableCollection.mdx
index c45772d0621..53d40bda2c8 100644
--- a/packages/@react-aria/dnd/docs/useDraggableCollection.mdx
+++ b/packages/@react-aria/dnd/docs/useDraggableCollection.mdx
@@ -586,16 +586,12 @@ function DropIndicator(props) {
     return null;
   }
 
-  let className = props.target.type === 'item'
-    ? `drop-indicator ${isDropTarget ? 'drop-target' : ''}`
-    : '';
-
   return (
     <li
       {...dropIndicatorProps}
       role="option"
       ref={ref}
-      className={className} />
+      className={`drop-indicator ${isDropTarget ? 'drop-target' : ''}`} />
   );
 }
 ///- end highlight -///
diff --git a/packages/@react-aria/dnd/docs/useDroppableCollection.mdx b/packages/@react-aria/dnd/docs/useDroppableCollection.mdx
index 651dcff0bed..8841b7a2e7c 100644
--- a/packages/@react-aria/dnd/docs/useDroppableCollection.mdx
+++ b/packages/@react-aria/dnd/docs/useDroppableCollection.mdx
@@ -266,16 +266,12 @@ function DropIndicator(props) {
     return null;
   }
 
-  let className = props.target.type === 'item'
-    ? `drop-indicator ${isDropTarget ? 'drop-target' : ''}`
-    : '';
-
   return (
     <li
       {...dropIndicatorProps}
       role="option"
       ref={ref}
-      className={className} />
+      className={`drop-indicator ${isDropTarget ? 'drop-target' : ''}`} />
   );
 }
 ```