react-native-web icon indicating copy to clipboard operation
react-native-web copied to clipboard

Using touchAction 'none' on disabled scrollviews affect accessibility

Open DrRefactor opened this issue 3 years ago • 1 comments

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:

  1. go and try zooming green scrollview
  2. try using area outside red boxes
  3. drag using red box
  4. 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

DrRefactor avatar Oct 21 '21 13:10 DrRefactor

has any way to solve this problem?

laszhiai avatar Jan 19 '22 06:01 laszhiai