-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Description
Describe the bug
While the slider seems to follow the ARIA 1.1 pattern correctly, it - as the pattern itself - doesn't work for users on a touch device using AT (e.g. iOS/VoiceOver, Android/TalkBack). The ARIA makes it announce like a native <input type="range">, and gives the hint to users that they can use gestures like "swipe up or down to change the value" (on iOS) / "use the volume buttons to change the value" (Android). However, as the slider can't actually intercept those (just yet anyway, until it uses Accessibility Object Model user action events https://wicg.github.io/aom/spec/#user-action-events), it is essentially broken for these users.
To Reproduce
Steps to reproduce the behavior:
- On a mobile/tablet device, with AT running, navigate to the Slider example
- Set focus to the slider
- Attempt to change the value by following the prompt given by the AT (e.g. "swipe up or down" / "use volume keys" depending on the specific OS/AT)
Expected behavior
The slider values change
Browser Version (please complete the following information):
- OS: iOS, Android
- Browser: All
Additional context
The most robust way to make this universally work, currently, is to actually have a proper <input type="range"> which is either heavily styled, or which is being "piggy-backed" via CSS/JS. See https://codepen.io/patrickhlauke/pen/byWPMX for demo and explanation