Comfy-Org / Comfy-Org/ComfyUI_frontend
a11y: Add keyboard accessibility to custom ColorPicker slider and saturation/value controls
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Summary
The custom color picker components introduced in PR #9647 are missing keyboard accessibility support. The following components use pointer-only interaction and lack ARIA slider semantics, making them inaccessible to keyboard and screen-reader users:
- `src/components/ui/color-picker/ColorPickerSlider.vue`
- `src/components/ui/color-picker/ColorPickerSaturationValue.vue`
## Required changes
### `ColorPickerSlider.vue`
- Add `role="slider"` to the outer container `
- Add `tabindex="0"` to make it focusable
- Add `aria-valuemin`, `aria-valuemax`, `aria-valuenow` (derived from the current `fraction` and `max` values)
- Add `aria-valuetext` with human-readable labels (e.g. "180°" for hue, "50%" for alpha)
- Add a `@keydown` handler (`handleKeyDown`) implementing:
- `ArrowLeft` / `ArrowDown`: decrement value by one step
- `ArrowRight` / `ArrowUp`: increment value by one step
- `Home`: set value to minimum (0)
- `End`: set value to maximum (`max`)
- Changes should emit consistently via the same path as pointer-based updates
### `ColorPickerSaturationValue.vue`
- Add `role="application"` or `role="group"` with a descriptive `aria-label` (e.g. "Color saturation and brightness")
- Add `tabindex="0"` to make it focusable
- Add keyboard handlers for 2D navigation:
- `ArrowLeft` / `ArrowRight`: adjust saturation
- `ArrowUp` / `ArrowDown`: adjust value/brightness
- `Home` / `End`: jump to min/max saturation or value
## References
- Flagged in PR #9647 (review comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9647#discussion_r2903974325)
- Deferred from PR #9647 as out of scope
## Requested by
@dante01yoon
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-9650-a11y-Add-keyboard-accessibility-to-custom-ColorPicker-slider-and-saturation-value-con-31e6d73d365081e79a4af04aafc47368) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.