search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.76k stars 1.09k forks source link

Sliders aria-valuetext should match output element #6402

Open snowystinger opened 4 months ago

snowystinger commented 4 months ago

Discussed in https://github.com/adobe/react-spectrum/discussions/6401

Originally posted by **robin-kestrel** May 17, 2024 The `Slider` component currently accepts a `formatOptions` prop; if specified, it is used in conjunction with `Intl.NumberFormat` to (a) set the content of the `SliderOutput` component and (b) set the `aria-valuetext` property on the `input` hidden inside each `Thumb` component. This API is perfectly fine for simple cases, but seems limiting for more complex ones. [Here's a sandbox with some motivating examples.](https://codesandbox.io/p/devbox/recursing-dubinsky-77kpw7?file=%2Fsrc%2FApp.tsx%3A4%2C10) The first group of sliders shows what is currently possible; the second group of sliders shows what I think is _almost_ currently possible. Replacing the `SliderOutput` component with a custom label is trivial, but propagating that label to the `aria-valuetext` property of the corresponding input doesn't seem like it's currently doable — at least, not without a lot of messing around with hooks. Is there an option I'm missing that would allow custom labels to be propagated to `aria-valuetext`, for screen readers to pick up? If not, could such an option be added? The simplest thing that comes to mind is a `format` prop for the `Slider` component that would accept a `(value: number) => string`, and would otherwise function basically the same way as `formatOptions` does now.

@snowystinger : I chatted with our accessibility team and they agree, it'd be nice if the aria-valuetext matched the output element. This may be difficult because the output accepts a ReactNode. The API will need some thought.

robin-kestrel commented 4 months ago

I don't actually think that it's possible to have the input's aria-valuetext match the output's content in the general case, because sliders support an arbitrary number of inputs but only one output. It could be done if sliders were modified to support one output per input, but this seems like a big change and probably not a good idea.

I think the best thing that can be done with the current model might be to create a more flexible way of setting the aria-valuetext of each individual thumb to an arbitrary user-specified value?