Comfy-Org / Comfy-Org/ComfyUI_frontend
feat: keyboard accessibility for ColorPickerSaturationValue and ColorPickerSlider
- 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
Assessment
This issue has not been assessed yet.