Skip to content

Slider component won't work on touch+AT devices #1285

@patrickhlauke

Description

@patrickhlauke

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:

  1. On a mobile/tablet device, with AT running, navigate to the Slider example
  2. Set focus to the slider
  3. 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

Metadata

Metadata

Assignees

Labels

Type: BugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions