adobe / adobe/react-spectrum

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

Open
#6,649 1 comment 0 reactions 0 assignees View on GitHub
bug needs investigation
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.