Pressing Esc while dragging with the keyboard does not return focus in lists
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### 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](https://react-spectrum.adobe.com/react-aria/useDraggableCollection.html#reordering) 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_
Contributor guide
Assessment
This issue has not been assessed yet.