Slider is not operable when using VoiceOver on iOS

What is the expected behavior?

It must be possible to adjust the value of the slider component while using VoiceOver on iOS.

What is the current behavior?

It is not possible to adjust the value of the slider component while using VoiceOver on iOS.

What are the steps to reproduce?

1. Using VoiceOver for IOS (12.1.3) + Safari
2. Open the slider example
3. Navigate to one slider the example
   • In VoiceOver for iOS you can swipe right until you reach the slider
4. Observe that Voice Over announces “0%, adjustable. Swipe up or down with one finger to adjust the value”
5. Swipe up or down to adjust the value
6. Observe that the value was not changed

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

• Angular Material Example 7.2.2 located at https://material.angular.io/components/
• VoiceOver for IOS (12.1.3) + Safari (12.1.3)

Is there anything else we should know?

To my knowedge, it is not currently possible for JS to listen to the events fired by VoiceOver to adjust the value. This also likely applies to other touch-based screen readers, including Talkback for android. There is a relevent discussion about this in the aria-practices repo. This issue will likely be addressed by the future AOM standard, which creates several new inputEvent types.

Until then, it might be possible to use an html range input in most situations.

[cyrilledjdj]

Is anyone still interested for a solution to this issue?

[jelbourn]

Status: we’re working on a new version of the slider based on MDC Web that should fix this issue by using a native <input type="range"> in the template