Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sliders aria-valuetext should match output element #6402

Open
snowystinger opened this issue May 17, 2024 Discussed in #6401 · 1 comment · May be fixed by #6411
Open

Sliders aria-valuetext should match output element #6402

snowystinger opened this issue May 17, 2024 Discussed in #6401 · 1 comment · May be fixed by #6411

Comments

@snowystinger
Copy link
Member

Discussed in #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.
@snowystinger snowystinger changed the title Sliders aria-valuetext should be customizable to match output element Sliders aria-valuetext should match output element May 17, 2024
@robin-kestrel
Copy link

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?

@robin-kestrel robin-kestrel linked a pull request May 18, 2024 that will close this issue
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add format prop to RAC Slider to support arbitrary aria-valuetext. robin-kestrel/react-spectrum
2 participants
@snowystinger @robin-kestrel