Comfy-Org / Comfy-Org/ComfyUI_frontend

a11y: localize aria-valuetext in ColorPickerSaturationValue

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

Description

## Follow-up: Localize `aria-valuetext` in `ColorPickerSaturationValue.vue`

### Context
In PR #9647 (feat: replace PrimeVue ColorPicker with custom component), the `aria-valuetext` attribute in `src/components/ui/color-picker/ColorPickerSaturationValue.vue` was added as a hardcoded string:

```vue
:aria-valuetext="`${saturation}%, ${value}%`"
```

This is user-facing output consumed by screen readers but is not currently localized. This was flagged in the review comment at: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9647#discussion_r2924567331

This item is part of the a11y follow-up work tracked in #9650 / #9651.

### Task
- Add a translation key (e.g. `color.saturationBrightnessValue`) to `src/locales/en/main.json` with placeholders for saturation and value, for example:
```json
"saturationBrightnessValue": "Saturation {saturation}%, brightness {value}%"
```
- Replace the hardcoded `aria-valuetext` with a `vue-i18n` lookup:
```vue
:aria-valuetext="$t('color.saturationBrightnessValue', { saturation, value })"
```
- Update any related tests or assertions targeting `aria-valuetext` in this component.

### References
- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9647
- Review comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9647#discussion_r2924567331
- Related a11y issues: #9650, #9651
- Requested by: @christian-byrne

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-9798-a11y-localize-aria-valuetext-in-ColorPickerSaturationValue-3216d73d36508126b628dd55a1ecc605) 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.