Comfy-Org / Comfy-Org/ComfyUI_frontend

feat: keyboard accessibility for ColorPickerSaturationValue and ColorPickerSlider

Open
#9,651 0 comments 0 reactions 1 assignee Claimed by @dante01yoon View on GitHub
area:ui area:widgets
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Summary

The custom color picker components introduced in #9647 currently support pointer interaction only. Keyboard accessibility needs to be added as a follow-up.

## Affected components

- `src/components/ui/color-picker/ColorPickerSaturationValue.vue`
- `src/components/ui/color-picker/ColorPickerSlider.vue`

## Work items

### ColorPickerSaturationValue.vue
- Add `tabindex="0"` to the picker surface `div` so it is reachable via Tab
- Add a `@keydown` handler for `ArrowLeft` / `ArrowRight` (adjust saturation) and `ArrowUp` / `ArrowDown` (adjust value); support `Shift` modifier for larger steps (e.g. ±10) and plain key for small steps (e.g. ±1)
- Add visible `:focus-visible` outline styles
- Expose an accessible name via `aria-label` (e.g. using `$t('colorPicker.saturationValue')`) or `aria-labelledby`
- Consider `role="slider"` with `aria-valuenow` / `aria-valuetext` or a descriptive label so screen readers can announce the current colour position

### ColorPickerSlider.vue
- Same requirements: `tabindex="0"`, `@keydown` handler for arrow keys (±1 / ±10 with Shift), visible focus styles, and an accessible name/ARIA attributes appropriate for a slider (e.g. `role="slider"`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax`)

## References

- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9647
- Review comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9647#discussion_r2903999828
- Requested by: @dante01yoon

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-9651-feat-keyboard-accessibility-for-ColorPickerSaturationValue-and-ColorPickerSlider-31e6d73d365081379dffc6cdf2226909) by [Unito](https://www.unito.io)

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.