Comfy-Org / Comfy-Org/ComfyUI_frontend
a11y: localize aria-valuetext in ColorPickerSaturationValue
- 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
Assessment
This issue has not been assessed yet.