useMove/ColorArea/ColorSlider: Implement autoscrolling on move
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the feature here
For components that use the `useMove` hook, there are cases where the element being moved should autoscroll into view at viewport edges. For example, in a ColorArea or ColorSlider rendered within a scrolling dialog, the ColorThumb updates to show the new color on move or when using the keyboard. If the ColorArea or ColorSlider is larger than the scrolling dialog viewport, the viewport should autoscroll so that the ColorThumb remains in view and the user can see the color value.
### 🤔 Expected Behavior?
If the ColorArea or ColorSlider, is larger than a scrolling viewport, the viewport should autoscroll so that the ColorThumb or object being moved remains in view and the user can see the color value.
### 😯 Current Behavior
The container element for a ColorArea or ColorSlider does not scroll automatically to keep the ColorThumb within the viewport on `useMove` or keyboard input.
### 💁 Possible Solution
_No response_
### 🔦 Context
Testing ColorPicker behavior when the ColorPicker dialog scrolls: https://reactspectrum.blob.core.windows.net/reactspectrum/5890d06349284910c74d2d028d65341b73c8b5fd/storybook/index.html?path=/story/colorpicker--default&providerSwitcher-express=false
### 💻 Examples
_No response_
### 🧢 Your Company/Team
Adobe/Accessibility
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start by tracing the useMove hook and the ColorArea and ColorSlider components, then use the linked ColorPicker Storybook example to reproduce the scrolling case. The work is complete when moving the ColorThumb with pointer or keyboard input keeps it visible within a scrolling viewport.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100