adobe / adobe/react-spectrum

useMove/ColorArea/ColorSlider: Implement autoscrolling on move

Open
#6,299 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.