Pressing Esc while dragging with the keyboard does not return focus in lists

[nazar-ch]

Provide a general summary of the issue here

In some situations when using a keyboard for d'n'd in ListBox/GridList, pressing Esc doesn't return the focus back to the list item that was focused before dragging started.

🤔 Expected Behavior?

Pressing Esc reliably returns focus to the focused list item.

😯 Current Behavior

Some ListBox/GridList elements lose focus when pressing Esc instead of returning to the list item that was focused before dragging.

Oddly, I found one example in the docs that works correctly, and another identically looking example that consistently fails across browsers and devices.

💁 Possible Solution

When dragging starts, useDroppableItem sets aria-hidden to true for all items in the list, so that screen readers stop interacting with the list items and instead offer to select the drop position: https://github.com/adobe/react-spectrum/blob/bd458c1ed166a5ff1fd93f0c1a397e1540b3d880/packages/%40react-aria/dnd/src/useDroppableItem.ts#L79

Pressing Esc calls cancel() in DragManager, which only returns the focus if the item is not aria-hidden. https://github.com/adobe/react-spectrum/blob/bd458c1ed166a5ff1fd93f0c1a397e1540b3d880/packages/%40react-aria/dnd/src/DragManager.ts#L537

Possibly in some situations aria-hidden is set to false later than the check is executed.

Removing this check resolves the issue.

It's not clear to me why this check is needed at least for the lists, as it seems like the only situation where aria-hidden might be true is when dragging, and in cancel() we clearly have a situation where dragging stops.

🔦 Context

No response

🖥️ Steps to Reproduce

1. Go to https://react-spectrum.adobe.com/react-aria/useDroppableCollection.html#reordering (scroll down to see the list with "Dog", "Cat", ... in the end of the section)
2. Select an item from the list
3. Press Return to start dragging
4. Press Esc to stop dragging and see that focus has been lost

My screen recording of the failure: https://github.com/adobe/react-spectrum/assets/8333702/a39f1c12-19f6-4d95-b45b-3287c6ff293b

The similarly looking list on another page returns the focus. The recording with the correct behavior on this page: https://github.com/adobe/react-spectrum/assets/8333702/b8369e96-1a3a-4231-ab5c-237818077bfb

Version

3.33.1

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I see it get lost to the body. Looks like a bug. Thanks for reporting.