Material-components-web-components: Slider component won't work on touch+AT devices

Created on 8 May 2020 · 5Comments · Source: material-components/material-components-web-components

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

Slider Components Medium Bug Improve accessibility

Source