Disable dragging when screen reader is enabled

WordPress · May 5, 2022 · 2a5a0ea · 2a5a0ea
1 parent adcd420
commit 2a5a0ea
Showing 1 changed file with 27 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/block-draggable/index.native.js b/packages/block-editor/src/components/block-draggable/index.native.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { AccessibilityInfo } from 'react-native';
 import Animated, {
 	runOnJS,
 	runOnUI,
@@ -265,6 +266,9 @@ const BlockDraggable = ( { clientId, children, enabled = true } ) => {
 	const [ isEditingText, setIsEditingText ] = useState(
 		RCTAztecView.InputState.isFocused()
 	);
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
+		false
+	);
 
 	const draggingAnimation = {
 		opacity: useSharedValue( 1 ),
@@ -327,11 +331,30 @@ const BlockDraggable = ( { clientId, children, enabled = true } ) => {
 	}, [] );
 
 	useEffect( () => {
+		let mounted = true;
+
 		RCTAztecView.InputState.addFocusChangeListener( onFocusChangeAztec );
+
+		const screenReaderChangedListener = AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			setIsScreenReaderEnabled
+		);
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				if ( mounted ) {
+					setIsScreenReaderEnabled( screenReaderEnabled );
+				}
+			}
+		);
+
 		return () => {
+			mounted = false;
+
 			RCTAztecView.InputState.removeFocusChangeListener(
 				onFocusChangeAztec
 			);
+
+			screenReaderChangedListener.remove();
 		};
 	}, [] );
 
@@ -350,7 +373,10 @@ const BlockDraggable = ( { clientId, children, enabled = true } ) => {
 		styles[ 'draggable-wrapper__container' ],
 	];
 
-	const canDragBlock = enabled && ( ! isBlockSelected || ! isEditingText );
+	const canDragBlock =
+		enabled &&
+		! isScreenReaderEnabled &&
+		( ! isBlockSelected || ! isEditingText );
 
 	if ( ! isDraggable ) {
 		return children( { isDraggable: false } );