search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.32k stars 2.72k forks source link

Slider does not work for touch+AT users #31498

Open patrickhlauke opened 4 years ago

patrickhlauke commented 4 years ago

While the slider https://fast.design/docs/components/slider works well with AT and keyboard, it does currently not work in touch+AT scenarios. This is not a new problem...it's a problem that affects the ARIA 1.1 slider design pattern as well. In short: generally, touch+AT users that land on a slider (that announces itself as a native slider, e.g. with role="slider"), then AT will generally tell the user how to interact with the slider (on iOS/VO, "swipe up or down to change the value"; on Android/TalkBack "use the volume up/down ..."; etc). Of course, these types of interactions are not caught (and even using something like touch or pointer events at least for the swipe up/down won't work, as those gestures won't be passed to the page's JS as they'll be caught by AT).

See https://codepen.io/patrickhlauke/pen/byWPMX and https://github.com/w3c/aria-practices/issues/8

nicholasrice commented 4 years ago

Awesome, thanks for the resources @patrickhlauke!

nicholasrice commented 4 years ago

My understanding from the resources linked above is that the platform is actually lacking the APIs to properly support a custom slider component.

The only known work-around (referenced in the issues above) is to render a visually hidden <input type="range"> that controls the control's value and correctly interprets touch + AT interactions.

patrickhlauke commented 4 years ago

@nicholasrice correct, at this point in time

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

chrisdholt commented 1 year ago

It's come to my attention that with Safari 13.1 the issue with VoiceOver may be solved. I don't know if this has been fixed with Android/Talkback yet though. I'll see if we can test and follow up with more details.

patrickhlauke commented 1 year ago

I don't know if this has been fixed with Android/Talkback yet though

It hasn't, no (at least from my recent testing). For context, what VO does now is to effectively send "fake"/synthetic cursor up/down keyboard events when swiping up/down on a an element that exposes (either intrinsically or explicitly) a role of slider or scrollbar - see the User action events from Assistive Technologies section in the AOM explainer.

chrisdholt commented 1 year ago

I don't know if this has been fixed with Android/Talkback yet though

It hasn't, no (at least from my recent testing). For context, what VO does now is to effectively send "fake"/synthetic cursor up/down keyboard events when swiping up/down on a an element that exposes (either intrinsically or explicitly) a role of slider or scrollbar - see the User action events from Assistive Technologies section in the AOM explainer.

Thanks @patrickhlauke! This confirms exactly what I heard during a conversation on this today. I'm going to keep this open to track the reality that Android/Talkback isn't updated yet but perhaps that domino will fall soon.

janechu commented 3 months ago

Transferred this as it should pertain to https://github.com/microsoft/fluentui/tree/master/packages/web-components but due to https://github.com/microsoft/fast/issues/6955 the issue is obsolete for FAST.