react-native-web
react-native-web copied to clipboard
Using touchAction 'none' on disabled scrollviews affect accessibility
The problem
Please see: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#accessibility_concerns
Disabling scroll on some ScrollView should not prevent ALL touch actions in this area. Currently it prevents:
- zoom
- wrapping scrollview's scroll (when parent scrollview is enabled, child scrollview is disabled, parent can't be scrolled if dragging by child)
How to reproduce Render scrollview with prop scrollEnabled={false}.
Simplified test case: https://codesandbox.io/s/determined-carlos-37nym?file=/src/App.js
Steps to reproduce:
- go and try zooming green scrollview
- try using area outside red boxes
- drag using red box
- try pinching red box
Expected behavior A11y compatible way to disable scroll view. Also, nested scrollview that is disabled should not prevent scrolling of outer scroll view.
Environment (include versions). Did this work in previous versions?
- React Native for Web (version): see sandbox
- React (version): see sandbox
- Browser: any
has any way to solve this problem?