Sliders aria-valuetext should match output element

[snowystinger]

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. 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]

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?