From 165950b3e540f4ceac219f733aa02402c286a840 Mon Sep 17 00:00:00 2001
From: Carlos Garcia <fluiddot@gmail.com>
Date: Thu, 5 May 2022 14:22:04 +0200
Subject: [PATCH] Disable dragging when screen reader is enabled

---
 .../block-draggable/index.native.js           | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 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
index 6d127782980f8e..825a2ea59baeab 100644
--- 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,
@@ -263,6 +264,9 @@ const BlockDraggableWrapper = ( { children } ) => {
 const BlockDraggable = ( { clientId, children, enabled = true } ) => {
 	const wasBeingDragged = useRef( false );
 	const [ isEditingText, setIsEditingText ] = useState( false );
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
+		false
+	);
 
 	const draggingAnimation = {
 		opacity: useSharedValue( 1 ),
@@ -325,16 +329,35 @@ const BlockDraggable = ( { clientId, children, enabled = true } ) => {
 	}, [] );
 
 	useEffect( () => {
+		let mounted = true;
+
 		const isAnyAztecInputFocused = RCTAztecView.InputState.isFocused();
 		if ( isAnyAztecInputFocused ) {
 			setIsEditingText( isAnyAztecInputFocused );
 		}
 
 		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();
 		};
 	}, [] );
 
@@ -353,7 +376,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 } );