feat(slider): Use input with type="range" to back slider component. This ensures that sliders can be adjusted with touch-based assistive technologies, as the current ARIA spec for sliders is not compatible with e.g. TalkBack/Android.

[copybara-service]

feat(slider): Use input with type="range" to back slider component. This ensures that sliders can be adjusted with touch-based assistive technologies, as the current ARIA spec for sliders is not compatible with e.g. TalkBack/Android.

This PR does the following:

• When input is focused, adds focused style to slider thumb, and for discrete sliders, shows value indicator
• On input change event (e.g. key [LEFT/RIGHT/UP/DOWN] events on input that adjust value), change internal slider value
• On internal slider value change (e.g. via pointer events), sync input value attribute and property
• On thumb drag start, focus input (such that users can use a mix of pointer and key events)

BREAKING CHANGE: Slider is now backed by an input of type="range". Additionally, adapter methods (focusInput, isInputFocused, registerInputEventHandler, deregisterInputEventHandler) were added.

[patrickhlauke]

@joyzhong can I ask a naive question? i've been testing https://material-components.github.io/material-components-web-catalog/#/component/slider on iOS with VoiceOver, and the sliders work fine (being able to swipe up/down to change the value), but when I look at the DOM for those sliders, I don't see any actual <input type="range"> elements. are they hidden somehow (something perhaps with shadow DOM that is eluding me? admittedly, I'm not overly familiar with how this framework goes about things)

[joyzhong]

Hey, apologies for the delayed response! The component catalog is out-of-date and unmaintained currently. You can see a demo of the current slider implementation here instead: https://codepen.io/joyzhong/pen/rNmarao

Since it's backed by a native range input, you can use the volume keys to adjust the slider value when using VO/iOS or TalkBack/Android.

[patrickhlauke]

@joyzhong thanks, i since managed to work out how https://material-components.github.io/material-components-web-catalog/#/component/slider also manages to work in iOS/VO without the <input type="range"> ... turns out VO implements the AOM faked/fallback keyboard events https://github.com/WICG/aom/blob/gh-pages/explainer.md#user-action-events-from-assistive-technology which mean the swipe up/down actually generate synthetic key events, which make the outdated catalogue slider still work (but obviously not Talkback). mystery solved. w3c/aria-practices#8 (comment)