[Mobile]: Improve screen reader support on BottomSheet's cells.

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

@@ -2,12 +2,14 @@
  * External dependencies
  */
 import { TouchableOpacity, Text, View, TextInput, I18nManager } from 'react-native';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { Dashicon } from '@wordpress/components';
 import { Component } from '@wordpress/element';
+import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -31,6 +33,9 @@ export default class Cell extends Component {
 
 	render() {
 		const {
+			accessibilityLabel,
+			accessibilityHint,
+			accessibilityRole,
 			onPress,
 			label,
 			value,
@@ -118,8 +123,38 @@ export default class Cell extends Component {
 			);
 		};
 
+		const getAccessibilityLabel = () => {
+			if ( accessibilityLabel || ! showValue ) {
+				return accessibilityLabel || label;
+			}
+			return isEmpty( value ) ?
+				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
+				);
+		};
+
 		return (
-			<TouchableOpacity onPress={ onCellPress } style={ { ...styles.clipToBounds, ...style } } >
+			<TouchableOpacity
+				accessible={ ! this.state.isEditingValue }
+				accessibilityLabel={ getAccessibilityLabel() }
+				accessibilityRole={ accessibilityRole || 'button' }
+				accessibilityHint={ isValueEditable ?
+					/* translators: accessibility text */
+					__( 'Double tap to edit this value' ) :
+					accessibilityHint
+				}
+				onPress={ onCellPress }
+				style={ { ...styles.clipToBounds, ...style } }
+			>
 				<View style={ styles.cellContainer }>
 					<View style={ styles.cellRowContainer }>
 						{ icon && (

packages/block-editor/src/components/mobile/bottom-sheet/index.native.js

@@ -17,6 +17,7 @@ import styles from './styles.scss';
 import Button from './button';
 import Cell from './cell';
 import PickerCell from './picker-cell';
+import SwitchCell from './switch-cell';
 import KeyboardAvoidingView from './keyboard-avoiding-view';
 
 class BottomSheet extends Component {
@@ -162,5 +163,6 @@ BottomSheet.getWidth = getWidth;
 BottomSheet.Button = Button;
 BottomSheet.Cell = Cell;
 BottomSheet.PickerCell = PickerCell;
+BottomSheet.SwitchCell = SwitchCell;
 
 export default BottomSheet;

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

@@ -0,0 +1,57 @@
+
+/**
+ * External dependencies
+ */
+import { Switch } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { __, _x, sprintf } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import Cell from './cell';
+
+export default function SwitchCell( props ) {
+	const {
+		value,
+		onValueChange,
+		...cellProps
+	} = props;
+
+	const onPress = () => {
+		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
+		);
+
+	return (
+		<Cell
+			{ ...cellProps }
+			accessibilityLabel={ accessibilityLabel }
+			accessibilityRole={ 'none' }
+			accessibilityHint={
+				/* translators: accessibility text (hint for switches) */
+				__( 'Double tap to toggle setting' )
+			}
+			onPress={ onPress }
+			editable={ false }
+			value={ '' }
+		>
+			<Switch
+				value={ value }
+				onValueChange={ onValueChange }
+			/>
+		</Cell>
+	);
+}

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

@@ -197,6 +197,7 @@ class ImageEdit extends React.Component {
 					onChangeValue={ this.onSetLinkDestination }
 					autoCapitalize="none"
 					autoCorrect={ false }
+					keyboardType="url"
 				/>
 				<BottomSheet.Cell
 					icon={ 'editor-textcolor' }

packages/format-library/src/link/modal.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React from 'react';
-import { Switch, Platform } from 'react-native';
+import { Platform } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -123,43 +123,41 @@ class ModalLinkUI extends Component {
 
 	render() {
 		const { isVisible } = this.props;
+		const { text } = this.state;
 
 		return (
 			<BottomSheet
 				isVisible={ isVisible }
 				onClose={ this.onDismiss }
 				hideHeader
 			>
-				{ /* eslint-disable jsx-a11y/no-autofocus */ }
-				<BottomSheet.Cell
-					icon={ 'admin-links' }
-					label={ __( 'URL' ) }
-					value={ this.state.inputValue }
-					placeholder={ __( 'Add URL' ) }
-					autoCapitalize="none"
-					autoCorrect={ false }
-					keyboardType="url"
-					onChangeValue={ this.onChangeInputValue }
-					autoFocus={ Platform.OS === 'ios' }
-				/>
-				{ /* eslint-enable jsx-a11y/no-autofocus */ }
+				{ /* eslint-disable jsx-a11y/no-autofocus */
+					<BottomSheet.Cell
+						icon={ 'admin-links' }
+						label={ __( 'URL' ) }
+						value={ this.state.inputValue }
+						placeholder={ __( 'Add URL' ) }
+						autoCapitalize="none"
+						autoCorrect={ false }
+						keyboardType="url"
+						onChangeValue={ this.onChangeInputValue }
+						autoFocus={ Platform.OS === 'ios' }
+					/>
+				/* eslint-enable jsx-a11y/no-autofocus */ }
 				<BottomSheet.Cell
 					icon={ 'editor-textcolor' }
 					label={ __( 'Link Text' ) }
-					value={ this.state.text }
+					value={ text }
 					placeholder={ __( 'Add Link Text' ) }
 					onChangeValue={ this.onChangeText }
 				/>
-				<BottomSheet.Cell
+				<BottomSheet.SwitchCell
 					icon={ 'external' }
 					label={ __( 'Open in New Tab' ) }
-					value={ '' }
-				>
-					<Switch
-						value={ this.state.opensInNewWindow }
-						onValueChange={ this.onChangeOpensInNewWindow }
-					/>
-				</BottomSheet.Cell>
+					value={ this.state.opensInNewWindow }
+					onValueChange={ this.onChangeOpensInNewWindow }
+					separatorType={ 'fullWidth' }
+				/>
 				<BottomSheet.Cell
 					label={ __( 'Remove Link' ) }
 					labelStyle={ styles.clearLinkButton }