You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
snowystinger
changed the title
Sliders aria-valuetext should be customizable to match output element
Sliders aria-valuetext should match output element
May 17, 2024
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?
Discussed in #6401
Originally posted by robin-kestrel May 17, 2024
The
Slider
component currently accepts aformatOptions
prop; if specified, it is used in conjunction withIntl.NumberFormat
to (a) set the content of theSliderOutput
component and (b) set thearia-valuetext
property on theinput
hidden inside eachThumb
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 thearia-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 aformat
prop for theSlider
component that would accept a(value: number) => string
, and would otherwise function basically the same way asformatOptions
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.
The text was updated successfully, but these errors were encountered: