Initial drop target is not always closest droppable element when starting drag operation via keyboard

[LFDanLu]

TODO: ask accessibility for feedback on what the actual behavior should be

🐛 Bug Report

When the user starts a drag operation via hitting Enter on a draggable element, the first drop target that gets focused is not always the closest droppable element. If there are nested droppable elements nested within each other, the deepest child is the initial focused drop target. This is because child elements useLayoutEffect occurs before parent's useLayoutEffect, resulting in the child element registering itself as a drop target first via https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/dnd/src/useDrop.ts#L195. The DragManager then takes the first droppable target to focus when dragging starts.

Use https://reactspectrum.blob.core.windows.net/reactspectrum/8b30af52a4ecdcf087050f0ff9f7926f090ba381/storybook/index.html?path=/story/drag-and-drop--nested-drop-regions for testing. Repro steps

1. Tab onto the draggable element
2. Hit Enter
3. Note that the child drop region is focused first

🤔 Expected Behavior

The closest drop region to the draggable element should be focused first?

😯 Current Behavior

The first drop region in the droppable elements map is focused first.

💁 Possible Solution

Perhaps the function that finds valid drop targets should order the drop targets in such a way that drop targets that contain other drop targets are placed first in the array

🌍 Your Environment

Software	Version(s)
react-spectrum	3.11.0
Browser
Operating System

🧢 Your Company/Team

RSP

[LFDanLu]

Some initial progress/potential fix on https://github.com/adobe/react-spectrum/tree/issue_2071. Bit iffy on the filter change, also investigating the ordering if a new droppable element is added after initial render

EDIT: if a new droppable element is added after initial render, it will be added to the end of the droppable targets map meaning it is last in the tab order when keyboard dragging, regardless of its actual DOM position. Will need to handle this

[devongovett]

I think I fixed this in my work on the docs.

[LFDanLu]

Retested, verified that the closest droppable element is focused first when a drag is started via keyboard but the tab order is somewhat unexpected: https://reactspectrum.blob.core.windows.net/reactspectrum/cd0376c480ef7f554ea0aebac6669f28fa87740a/storybook/index.html?path=/story/drag-and-drop--nested-drop-regions&providerSwitcher-toastPosition=bottom. If you trigger keyboard dnd in the story about and hit tab after focus moves to the outer drop target, focus returns to the draggable item rather than going to the nested drop target.

[LFDanLu]

Repurposing ticket for drop target navigation order refactor