[RNMobile] Audio & Video block - Autoplay BottomSheet Cell help suppo…

…rt (#30885) * added the help behavior to the cell component of the bottomsheet. * Passed the autoplay help prop to ToggleControl. Changed the order. * Added CHANGELOG entry for cell help change.. * Used platform specific help behavior for video block. * Put Audio block's autoplay setting at the top of the panel. * Utilized sizing from SCSS Variables instead of hardcoding values. * Added PR number to the CHANGELOG entry. * added platform specific styling for cellHelpLabel * Made autoplay label consistent across web and mobile. * added help support to cell's accessibility capabilities. * added help support to switch cell accessibility capabilities * utilised cellProps.help instead of help so the props are passed down
WordPress · May 18, 2021 · c290539 · c290539
1 parent 29078b0
commit c290539
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 30 deletions.
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -97,9 +97,7 @@ function AudioEdit( {
 
 	function getAutoplayHelp( checked ) {
 		return checked
-			? __(
-					'Note: Autoplaying audio may cause usability issues for some visitors.'
-			  )
+			? __( 'Autoplay may cause usability issues for some users.' )
 			: null;
 	}
 

diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js
@@ -179,6 +179,9 @@ function AudioEdit( {
 							label={ __( 'Autoplay' ) }
 							onChange={ toggleAttribute( 'autoplay' ) }
 							checked={ autoplay }
+							help={ __(
+								'Autoplay may cause usability issues for some users.'
+							) }
 						/>
 						<ToggleControl
 							label={ __( 'Loop' ) }

diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { ToggleControl, SelectControl } from '@wordpress/components';
-import { useMemo, useCallback } from '@wordpress/element';
+import { useMemo, useCallback, Platform } from '@wordpress/element';
 
 const options = [
 	{ value: 'auto', label: __( 'Auto' ) },
@@ -21,13 +21,15 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 		preload,
 	} = attributes;
 
-	const getAutoplayHelp = useCallback( ( checked ) => {
-		return checked
-			? __(
-					'Note: Autoplaying videos may cause usability issues for some visitors.'
-			  )
-			: null;
-	}, [] );
+	const autoPlayHelpText = __(
+		'Autoplay may cause usability issues for some users.'
+	);
+	const getAutoplayHelp = Platform.select( {
+		web: useCallback( ( checked ) => {
+			return checked ? autoPlayHelpText : null;
+		}, [] ),
+		native: autoPlayHelpText,
+	} );
 
 	const toggleFactory = useMemo( () => {
 		const toggleAttribute = ( attribute ) => {

diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js
@@ -8,6 +8,7 @@ import {
 	TextInput,
 	I18nManager,
 	AccessibilityInfo,
+	Platform,
 } from 'react-native';
 import { isEmpty, get } from 'lodash';
 
@@ -27,6 +28,7 @@ import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
 import TouchableRipple from './ripple';
 
+const isIOS = Platform.OS === 'ios';
 class BottomSheetCell extends Component {
 	constructor( props ) {
 		super( ...arguments );
@@ -119,6 +121,7 @@ class BottomSheetCell extends Component {
 			type,
 			step,
 			borderless,
+			help,
 			...valueProps
 		} = this.props;
 
@@ -266,18 +269,35 @@ class BottomSheetCell extends Component {
 			if ( accessibilityLabel || ! showValue ) {
 				return accessibilityLabel || label;
 			}
-			return isEmpty( value )
+
+			if ( isEmpty( value ) ) {
+				return isEmpty( help )
+					? sprintf(
+							/* translators: accessibility text. Empty state of a inline textinput cell. %s: The cell's title */
+							_x( '%s. Empty', 'inline textinput cell' ),
+							label
+					  )
+					: // Separating by ',' is necessary to make a pause on urls (non-capitalized text)
+					  sprintf(
+							/* translators: accessibility text. Empty state of a inline textinput cell. %1: Cell title, %2: cell help. */
+							_x( '%1$s, %2$s. Empty', 'inline textinput cell' ),
+							label,
+							help
+					  );
+			}
+			return isEmpty( help )
 				? sprintf(
-						/* translators: accessibility text. Empty state of a inline textinput cell. %s: The cell's title */
-						_x( '%s. Empty', 'inline textinput cell' ),
-						label
-				  )
-				: // Separating by ',' is necessary to make a pause on urls (non-capitalized text)
-				  sprintf(
 						/* translators: accessibility text. Inline textinput title and value.%1: Cell title, %2: cell value. */
 						_x( '%1$s, %2$s', 'inline textinput cell' ),
 						label,
 						value
+				  ) // Separating by ',' is necessary to make a pause on urls (non-capitalized text)
+				: sprintf(
+						/* translators: accessibility text. Inline textinput title, value and help text.%1: Cell title, %2: cell value, , %3: cell help. */
+						_x( '%1$s, %2$s, %3$s', 'inline textinput cell' ),
+						label,
+						value,
+						help
 				  );
 		};
 
@@ -289,6 +309,10 @@ class BottomSheetCell extends Component {
 			styles.resetButton,
 			styles.resetButtonDark
 		);
+		const cellHelpStyle = [
+			styles.cellHelpLabel,
+			isIOS && styles.cellHelpLabelIOS,
+		];
 		const containerPointerEvents =
 			this.state.isScreenReaderEnabled && accessible ? 'none' : 'auto';
 		const { title, handler } = customActionButton || {};
@@ -370,6 +394,11 @@ class BottomSheetCell extends Component {
 					{ showValue && getValueComponent() }
 					{ children }
 				</View>
+				{ help && (
+					<Text style={ [ cellHelpStyle, styles.placeholderColor ] }>
+						{ help }
+					</Text>
+				) }
 				{ ! drawTopSeparator && <View style={ separatorStyle() } /> }
 			</TouchableRipple>
 		);

diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss
@@ -284,3 +284,12 @@
 .flex {
 	flex: 1;
 }
+
+.cellHelpLabel {
+	font-size: $default-font-size;
+	padding-bottom: $grid-unit-15;
+}
+
+.cellHelpLabelIOS {
+	padding-bottom: $grid-unit-10;
+}
diff --git a/packages/components/src/mobile/bottom-sheet/switch-cell.native.js b/packages/components/src/mobile/bottom-sheet/switch-cell.native.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { Switch } from 'react-native';
+import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -18,22 +19,39 @@ export default function BottomSheetSwitchCell( props ) {
 		onValueChange( ! value );
 	};
 
-	const accessibilityLabel = value
-		? sprintf(
-				/* translators: accessibility text. Switch setting ON state. %s: Switch title. */
-				_x( '%s. On', 'switch control' ),
-				cellProps.label
-		  )
-		: sprintf(
-				/* translators: accessibility text. Switch setting OFF state. %s: Switch title. */
-				_x( '%s. Off', 'switch control' ),
-				cellProps.label
-		  );
+	const getAccessibilityLabel = () => {
+		if ( isEmpty( cellProps.help ) ) {
+			return value
+				? sprintf(
+						/* translators: accessibility text. Switch setting ON state. %s: Switch title. */
+						_x( '%s. On', 'switch control' ),
+						cellProps.label
+				  )
+				: sprintf(
+						/* translators: accessibility text. Switch setting OFF state. %s: Switch title. */
+						_x( '%s. Off', 'switch control' ),
+						cellProps.label
+				  );
+		}
+		return value
+			? sprintf(
+					/* translators: accessibility text. Switch setting ON state. %1: Switch title, %2: switch help. */
+					_x( '%1$s, %2$s. On', 'switch control' ),
+					cellProps.label,
+					cellProps.help
+			  )
+			: sprintf(
+					/* translators: accessibility text. Switch setting OFF state. %1: Switch title, %2: switch help. */
+					_x( '%1$s, %2$s. Off', 'switch control' ),
+					cellProps.label,
+					cellProps.help
+			  );
+	};
 
 	return (
 		<Cell
 			{ ...cellProps }
-			accessibilityLabel={ accessibilityLabel }
+			accessibilityLabel={ getAccessibilityLabel() }
 			accessibilityRole={ 'none' }
 			accessibilityHint={
 				/* translators: accessibility text (hint for switches) */

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -17,6 +17,8 @@ For each user feature we should also add a importance categorization label  to i
 -   [*] Fixes color picker rendering bug when scrolling [#30994]
 -   [*] Add enableCaching param to fetch request on Android [#31186]
 -   [***] Add reusable blocks to the inserter menu. [#28495]
+-   [*] The BottomSheet Cell component now supports the help prop so that a hint can be supplied to all Cell based components. [#30885]
+
 
 ## 1.52.2