useDrag re-renders from useDescription
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
# 🐛 Bug Report
**Background**:
`useDrag` uses `useDescription` to render a hidden div with a description (i.e. Click to start dragging.) that it can refer to via `aria-describedby`. On modality change, this messages is updated (i.e. Press Enter to start dragging.)
**Problem**:
Currently, when this message is changed (i.e. modality change), the description div is removed and a new one is created with a new id. As a result, all draggable items are re-rendered since they all refer to this div. We should be able to improve this and avoid unnecessary re-renders.
A previous attempt at fixing this was to only re-render the draggable item that has focus. However this may cause issues with out of date/inaccurate descriptions for screen readers since focus may not change when moving the screen reader cursor around. A new approach is to not rely on re-rendering the draggable items and instead update the description divs when modality changes
Found via investigation into https://github.com/adobe/react-spectrum/issues/2403.
## 🤔 Expected Behavior
Description text should update without causing every draggable item to re-render.
## 😯 Current Behavior
useDescription causes every draggable item to re-render on modality change.
## 💁 Possible Solution
A few possible solutions we could look into after discussion with @devongovett and @LFDanLu:
1. Add an alternate `useDescription` that returns a setter to update the description div text. If ref count for the description div falls to 0, don't remove the div but store it for future reuse
2. Instantiate and update descriptions at the collection-level. Possible cons: what about standalone draggable items that are using useDrag only
3. Handle within DragManager at page-level. Possible cons: might be hard to clean up those divs if it is unaware of unmount.
## 🔦 Context
useDescription use via useDrag
## 💻 Code Sample
Can be seen in https://codesandbox.io/s/intelligent-sun-pyg93 via https://github.com/adobe/react-spectrum/issues/2403
## 🌍 Your Environment
| Software | Version(s) |
| ---------------- | ---------- |
| react-spectrum |
| Browser |
| Operating System |
## 🧢 Your Company/Team
## 🕷 Tracking Issue (optional)
Contributor guide
Research direction
Start by tracing useDrag's useDescription usage and the DragManager path described in the issue, using the linked CodeSandbox to reproduce modality changes. Compare the possible description-update approaches, then verify that description text changes while draggable items no longer all re-render; account for both collection-level and standalone useDrag usage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100