[RNMobile] Search Block: Add UI Tests and make available to production!

packages/block-library/src/index.native.js

@@ -248,7 +248,7 @@ export const registerCoreBlocks = () => {
 		file,
 		audio,
 		devOnly( reusableBlock ),
-		devOnly( search ),
+		search,
 		devOnly( embed ),
 	].forEach( registerBlock );
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { View, AccessibilityInfo } from 'react-native';
 import classnames from 'classnames';
 
 /**
@@ -57,6 +57,9 @@ export default function SearchEdit( {
 	);
 	const [ isLongButton, setIsLongButton ] = useState( false );
 	const [ buttonWidth, setButtonWidth ] = useState( MIN_BUTTON_WIDTH );
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
+		false
+	);
 
 	const textInputRef = useRef( null );
 
@@ -69,6 +72,34 @@ export default function SearchEdit( {
 		buttonText,
 	} = attributes;
 
+	/*
+	 * Check if screenreader is enabled and save to state. This is important for
+	 * properly creating accessibilityLabel text.
+	 */
+	useEffect( () => {
+		AccessibilityInfo.addEventListener(
+			'screenReaderChanged',
+			handleScreenReaderToggled
+		);
+
+		AccessibilityInfo.isScreenReaderEnabled().then(
+			( screenReaderEnabled ) => {
+				setIsScreenReaderEnabled( screenReaderEnabled );
+			}
+		);
+
+		return () => {
+			AccessibilityInfo.removeEventListener(
+				'screenReaderChanged',
+				handleScreenReaderToggled
+			);
+		};
+	}, [] );
+
+	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.
@@ -204,24 +235,67 @@ export default function SearchEdit( {
 		isLongButton && { flexDirection: 'column' },
 	];
 
-	const getPlaceholderAccessibilityLabel = () => {
+	/**
+	 * If a screenreader is enabled, create a descriptive label for this field. If
+	 * not, return a label that is used during automated UI tests.
+	 *
+	 * @return {string} The accessibilityLabel for the Search Button
+	 */
+	const getAccessibilityLabelForButton = () => {
+		if ( ! isScreenReaderEnabled ) {
+			return 'search-block-button';
+		}
+
+		return `${ __(
+			'Search button. Current button text is'
+		) } ${ buttonText }`;
+	};
+
+	/**
+	 * If a screenreader is enabled, create a descriptive label for this field. If
+	 * not, return a label that is used during automated UI tests.
+	 *
+	 * @return {string} The accessibilityLabel for the Search Input
+	 * 					 placeholder field.
+	 */
+	const getAccessibilityLabelForPlaceholder = () => {
+		if ( ! isScreenReaderEnabled ) {
+			return 'search-block-input';
+		}
+
 		const title = __( 'Search input field.' );
 		const description = placeholder
 			? `${ __( 'Current placeholder text is' ) } ${ placeholder }`
 			: __( 'No custom placeholder set' );
 		return `${ title } ${ description }`;
 	};
 
+	/**
+	 * If a screenreader is enabled, create a descriptive label for this field. If
+	 * not, return a label that is used during automated UI tests.
+	 *
+	 * @return {string} The accessibilityLabel for the Search Label field
+	 */
+	const getAccessibilityLabelForLabel = () => {
+		if ( ! isScreenReaderEnabled ) {
+			return 'search-block-label';
+		}
+
+		return `${ __( 'Search block label. Current text is' ) } ${ label }`;
+	};
+
 	const renderTextField = () => {
 		return (
 			<View
 				style={ styles.searchInputContainer }
 				accessible={ true }
 				accessibilityRole="none"
-				accessibilityHint={ __(
-					'Double tap to edit placeholder text'
-				) }
-				accessibilityLabel={ getPlaceholderAccessibilityLabel() }
+				accessibilityHint={
+					isScreenReaderEnabled
+						? __( 'Double tap to edit placeholder text' )
+						: undefined
+				}
+				accessibilityLabel={ getAccessibilityLabelForPlaceholder() }
 			>
 				<PlainText
 					ref={ textInputRef }
@@ -278,12 +352,12 @@ export default function SearchEdit( {
 					<View
 						accessible={ true }
 						accessibilityRole="none"
-						accessibilityHint={ __(
-							'Double tap to edit button text'
-						) }
-						accessibilityLabel={ `${ __(
-							'Search button. Current button text is'
-						) } ${ buttonText }` }
+						accessibilityHint={
+							isScreenReaderEnabled
+								? __( 'Double tap to edit button text' )
+								: undefined
+						}
+						accessibilityLabel={ getAccessibilityLabelForButton() }
 						onLayout={ onLayoutButton }
 					>
 						<RichText
@@ -333,10 +407,12 @@ export default function SearchEdit( {
 				<View
 					accessible={ true }
 					accessibilityRole="none"
-					accessibilityHint={ __( 'Double tap to edit label text' ) }
-					accessibilityLabel={ `${ __(
-						'Search block label. Current text is'
-					) } ${ label }` }
+					accessibilityHint={
+						isScreenReaderEnabled
+							? __( 'Double tap to edit label text' )
+							: undefined
+					}
+					accessibilityLabel={ getAccessibilityLabelForLabel() }
 				>
 					<RichText
 						className="wp-block-search__label"

packages/block-library/src/search/test/__snapshots__/edit.native.js.snap

@@ -7,8 +7,7 @@ exports[`Search Block renders block with button inside option 1`] = `
   importantForAccessibility="no-hide-descendants"
 >
   <View
-    accessibilityHint="Double tap to edit label text"
-    accessibilityLabel="Search block label. Current text is Search"
+    accessibilityLabel="search-block-label"
     accessibilityRole="none"
     accessible={true}
   >
@@ -74,8 +73,7 @@ exports[`Search Block renders block with button inside option 1`] = `
     }
   >
     <View
-      accessibilityHint="Double tap to edit placeholder text"
-      accessibilityLabel="Search input field. No custom placeholder set"
+      accessibilityLabel="search-block-input"
       accessibilityRole="none"
       accessible={true}
     >
@@ -111,8 +109,7 @@ exports[`Search Block renders block with button inside option 1`] = `
       }
     >
       <View
-        accessibilityHint="Double tap to edit button text"
-        accessibilityLabel="Search button. Current button text is Search Button"
+        accessibilityLabel="search-block-button"
         accessibilityRole="none"
         accessible={true}
         onLayout={[Function]}
@@ -183,8 +180,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
   importantForAccessibility="no-hide-descendants"
 >
   <View
-    accessibilityHint="Double tap to edit label text"
-    accessibilityLabel="Search block label. Current text is Search"
+    accessibilityLabel="search-block-label"
     accessibilityRole="none"
     accessible={true}
   >
@@ -250,8 +246,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
     }
   >
     <View
-      accessibilityHint="Double tap to edit placeholder text"
-      accessibilityLabel="Search input field. No custom placeholder set"
+      accessibilityLabel="search-block-input"
       accessibilityRole="none"
       accessible={true}
     >
@@ -308,8 +303,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
     }
   >
     <View
-      accessibilityHint="Double tap to edit placeholder text"
-      accessibilityLabel="Search input field. No custom placeholder set"
+      accessibilityLabel="search-block-input"
       accessibilityRole="none"
       accessible={true}
     >
@@ -345,8 +339,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
       }
     >
       <View
-        accessibilityHint="Double tap to edit button text"
-        accessibilityLabel="Search button. Current button text is Search Button"
+        accessibilityLabel="search-block-button"
         accessibilityRole="none"
         accessible={true}
         onLayout={[Function]}
@@ -417,8 +410,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
   importantForAccessibility="no-hide-descendants"
 >
   <View
-    accessibilityHint="Double tap to edit label text"
-    accessibilityLabel="Search block label. Current text is Search"
+    accessibilityLabel="search-block-label"
     accessibilityRole="none"
     accessible={true}
   >
@@ -484,8 +476,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
     }
   >
     <View
-      accessibilityHint="Double tap to edit placeholder text"
-      accessibilityLabel="Search input field. No custom placeholder set"
+      accessibilityLabel="search-block-input"
       accessibilityRole="none"
       accessible={true}
     >
@@ -521,8 +512,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
       }
     >
       <View
-        accessibilityHint="Double tap to edit button text"
-        accessibilityLabel="Search button. Current button text is Search Button"
+        accessibilityLabel="search-block-button"
         accessibilityRole="none"
         accessible={true}
         onLayout={[Function]}
@@ -593,8 +583,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
   importantForAccessibility="no-hide-descendants"
 >
   <View
-    accessibilityHint="Double tap to edit label text"
-    accessibilityLabel="Search block label. Current text is Search"
+    accessibilityLabel="search-block-label"
     accessibilityRole="none"
     accessible={true}
   >
@@ -651,8 +640,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
     </View>
   </View>
   <View
-    accessibilityHint="Double tap to edit placeholder text"
-    accessibilityLabel="Search input field. No custom placeholder set"
+    accessibilityLabel="search-block-input"
     accessibilityRole="none"
     accessible={true}
   >

packages/react-native-editor/CHANGELOG.md

@@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
+-   [***] Search block now available on mobile! [https://github.com/WordPress/gutenberg/pull/30783]
 -   [*] Image block: Add a "featured" banner. (Android only) [#30806]
 
 ## 1.51.0