Extract useIsScreenReaderEnabled hook, set state only if enabled=true

packages/block-editor/src/components/block-draggable/index.native.js

@@ -285,6 +285,58 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 	);
 };
 
+function useIsScreenReaderEnabled() {
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
+
+	useEffect( () => {
+		let mounted = true;
+
+		const changeListener = AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			( enabled ) => setIsScreenReaderEnabled( enabled )
+		);
+
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				if ( mounted && screenReaderEnabled ) {
+					setIsScreenReaderEnabled( screenReaderEnabled );
+				}
+			}
+		);
+
+		return () => {
+			mounted = false;
+
+			changeListener.remove();
+		};
+	}, [] );
+
+	return isScreenReaderEnabled;
+}
+
+function useIsEditingText() {
+	const [ isEditingText, setIsEditingText ] = useState( () =>
+		RCTAztecView.InputState.isFocused()
+	);
+
+	useEffect( () => {
+		const onFocusChangeAztec = ( { isFocused } ) => {
+			setIsEditingText( isFocused );
+		};
+
+		RCTAztecView.InputState.addFocusChangeListener( onFocusChangeAztec );
+
+		return () => {
+			RCTAztecView.InputState.removeFocusChangeListener(
+				onFocusChangeAztec
+			);
+		};
+	}, [] );
+
+	return isEditingText;
+}
+
 /**
  * Block draggable component
  *
@@ -308,9 +360,8 @@ const BlockDraggable = ( {
 	testID,
 } ) => {
 	const wasBeingDragged = useRef( false );
-	const [ isEditingText, setIsEditingText ] = useState( false );
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
-		useState( false );
+	const isEditingText = useIsEditingText();
+	const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
 	const draggingAnimation = {
 		opacity: useSharedValue( 1 ),
@@ -365,43 +416,6 @@ const BlockDraggable = ( {
 		wasBeingDragged.current = isBeingDragged;
 	}, [ isBeingDragged ] );
 
-	const onFocusChangeAztec = useCallback( ( { isFocused } ) => {
-		setIsEditingText( isFocused );
-	}, [] );
-
-	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();
-		};
-	}, [] );
-
 	const onLongPressDraggable = useCallback( () => {
 		// Ensure that no text input is focused when starting the dragging gesture in order to prevent conflicts with text editing.
 		RCTAztecView.InputState.blurCurrentFocusedElement();

packages/block-library/src/cover/edit.native.js

@@ -88,6 +88,36 @@ const INNER_BLOCKS_TEMPLATE = [
 	],
 ];
 
+function useIsScreenReaderEnabled() {
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
+
+	useEffect( () => {
+		let mounted = true;
+
+		const changeListener = AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			( enabled ) => setIsScreenReaderEnabled( enabled )
+		);
+
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				if ( mounted && screenReaderEnabled ) {
+					setIsScreenReaderEnabled( screenReaderEnabled );
+				}
+			}
+		);
+
+		return () => {
+			mounted = false;
+
+			changeListener.remove();
+		};
+	}, [] );
+
+	return isScreenReaderEnabled;
+}
+
 const Cover = ( {
 	attributes,
 	getStylesFromColorScheme,
@@ -118,29 +148,11 @@ const Cover = ( {
 		overlayColor,
 		isDark,
 	} = attributes;
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
-		useState( false );
+	const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
 	useEffect( () => {
-		let isCurrent = true;
-
 		// Sync with local media store.
 		mediaUploadSync();
-		const a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
-			'screenReaderChanged',
-			setIsScreenReaderEnabled
-		);
-
-		AccessibilityInfo.isScreenReaderEnabled().then( () => {
-			if ( isCurrent ) {
-				setIsScreenReaderEnabled();
-			}
-		} );
-
-		return () => {
-			isCurrent = false;
-			a11yInfoChangeSubscription.remove();
-		};
 	}, [] );
 
 	const convertedMinHeight = useConvertUnitToMobile(

packages/block-library/src/cover/test/edit.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { AccessibilityInfo, Image } from 'react-native';
+import { Image } from 'react-native';
 import {
 	getEditorHtml,
 	initializeEditor,
@@ -90,10 +90,6 @@ beforeAll( () => {
 	const getSizeSpy = jest.spyOn( Image, 'getSize' );
 	getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
 
-	AccessibilityInfo.isScreenReaderEnabled.mockResolvedValue(
-		Promise.resolve( true )
-	);
-
 	// Register required blocks.
 	paragraph.init();
 	cover.init();
@@ -103,7 +99,6 @@ beforeAll( () => {
 afterAll( () => {
 	// Restore mocks.
 	Image.getSize.mockRestore();
-	AccessibilityInfo.isScreenReaderEnabled.mockReset();
 
 	// Clean up registered blocks.
 	unregisterBlockType( paragraph.name );

packages/block-library/src/search/edit.native.js

@@ -42,6 +42,36 @@ const BUTTON_OPTIONS = [
 	{ value: 'no-button', label: __( 'No button' ) },
 ];
 
+function useIsScreenReaderEnabled() {
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
+
+	useEffect( () => {
+		let mounted = true;
+
+		const changeListener = AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			( enabled ) => setIsScreenReaderEnabled( enabled )
+		);
+
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				if ( mounted && screenReaderEnabled ) {
+					setIsScreenReaderEnabled( screenReaderEnabled );
+				}
+			}
+		);
+
+		return () => {
+			mounted = false;
+
+			changeListener.remove();
+		};
+	}, [] );
+
+	return isScreenReaderEnabled;
+}
+
 export default function SearchEdit( {
 	onFocus,
 	isSelected,
@@ -57,8 +87,7 @@ export default function SearchEdit( {
 		useState( false );
 	const [ isLongButton, setIsLongButton ] = useState( false );
 	const [ buttonWidth, setButtonWidth ] = useState( MIN_BUTTON_WIDTH );
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
-		useState( false );
+	const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
 	const textInputRef = useRef( null );
 
@@ -71,31 +100,6 @@ export default function SearchEdit( {
 		buttonText,
 	} = attributes;
 
-	/*
-	 * Check if screenreader is enabled and save to state. This is important for
-	 * properly creating accessibilityLabel text.
-	 */
-	useEffect( () => {
-		const a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
-			'screenReaderChanged',
-			handleScreenReaderToggled
-		);
-
-		AccessibilityInfo.isScreenReaderEnabled().then(
-			( screenReaderEnabled ) => {
-				setIsScreenReaderEnabled( screenReaderEnabled );
-			}
-		);
-
-		return () => {
-			a11yInfoChangeSubscription.remove();
-		};
-	}, [] );
-
-	const handleScreenReaderToggled = ( screenReaderEnabled ) => {
-		setIsScreenReaderEnabled( screenReaderEnabled );
-	};
-
 	/*
 	 * Called when the value of isSelected changes. Blurs the PlainText component
 	 * used by the placeholder when this block loses focus.

packages/components/src/mobile/bottom-sheet/cell.native.js

@@ -58,7 +58,7 @@ class BottomSheetCell extends Component {
 
 		AccessibilityInfo.isScreenReaderEnabled().then(
 			( isScreenReaderEnabled ) => {
-				if ( this.isCurrent ) {
+				if ( this.isCurrent && isScreenReaderEnabled ) {
 					this.setState( { isScreenReaderEnabled } );
 				}
 			}