DnD Nested Drop Regions example can't focus child drop target

[majornista]

🐛 Bug Report

1. Open Drag and Drop, nested drop targets story.
2. Move keyboard focus to the draggable element labelled "Drag me".
3. Press Enter key to start drag and drop operation.
4. Focus should move to the parent of the two nested drop targets.
5. Press Tab key to move focus to the child drop target.

🤔 Expected Behavior

6. Focus should move to the child drop target so that a user can complete the drag and drop operation using the keyboard alone.

😯 Current Behavior

6. Focus does not move to the child drop target, and a user cannot drop an item on the child drop target using the keyboard alone.

💁 Possible Solution

Problem is with how we determine the dropTarget within the DragManager onFocus event handler. We need to prioritize the event.target matching a validDropTarget over a validDropTarget containing the event.target, otherwise the parent element may match first.

Here is a suggested fix, change this:

let dropTarget = this.validDropTargets.find(target => target.element.contains(e.target as HTMLElement));

to this:

let dropTarget =
      this.validDropTargets.find(target => target.element === e.target as HTMLElement) ||
      this.validDropTargets.find(target => target.element.contains(e.target as HTMLElement));

🌍 Your Environment

Software	Version(s)
react-spectrum	@react-aria/dnd@3.0.0
Browser	Chrome Version 108.0.5359.94 (Official Build) (arm64)
Operating System	macOS 13.0.1 (22A400)

🧢 Your Company/Team

Adobe/Accessibility

🕷 Tracking Issue (optional)