[RNMobile] Image Block: Improve Text Entry for Long Alt Text (#29670)

* Create new AltTextSettings component

With this commit, a new AltTextSettings component has been introduced to replace the current TextControl that exists for entering an image's Alt text. This new component makes use of BottomSheet.SubSheet, so that users are taken to a new subsheet when entering alt text.

* Update text colour in footer note in styles.css

The current text in the alt text subsheet's footer doesn't meet WordPress' accessibility standards for colour contrast. This commit updates the colour from " $gray-30" to "$gray-text-min" in order to meet those standards.

* Increase min-height of altTextEditor

This commit increases the min-height of "altTextEditor" so that the editor is a larger height on iOS devices by default.

* Update border colours for both light and dark mode

This commit updates the component's border colours to match similar separators/borders throughout the app. "light-gray-400" is used for light mode and "gray-70" for dark mode.

* Update text colour in dark mode

This commit fixes a bug, where text entered in iOS appear black on black (therefore, unreadable) in dark mode.

* Update footer note styling in styles.css

With this commit, I've tweaked the font size and padding around the "altTextSetting" compont's footer note to more closely match up with the initial design.

* Set max height for the editor

This commit fixes a bug I spotted while testing, where it's possible to continue hitting "enter" and increasing the size of the editor without limitless, leading to the footer note being dragged off screen.

* Increase bottom padding of footer note

This commit increase the padding at the bottom of the footer note, in accordance with the design.

* Update colour of placeholder text

This commit updates the colour of the default placeholder text in the "AltTextSettings" component's TextInput. The purpose of defining this is to fix a bug in iOS, where the placeholder text appeared as black on black in dark mode.

* Styling tweaks to footnote and placeholder text

Two small changes to the "Alt Text Settings" components are included in this commit. The first increases the padding of the footnote to match the design and the second aligns the placeholder text to the top, which is necessary for Android devices.

* Update font-size of footnote

Changes the font-size of the footnote from 13px to 12px, based on feedback.

* Set defined height for altTextEditor

This commit sets a defined height of 80px for the altTextEditor component, in response to feedback and to remove complexity around the box expanding when text is entered.

* Update blue colour of link for both light and dark mode

The colour of the link is updated for both light and dark mode with this commit, based on feedback received.

* Update CHANGELOG.md

Update CHANGELOG.md with changes from this commit.

* Convert "AltTextSettings" component into more generic "BottomSheetTextControl" component

This commit, converts the "AltTextSettings" component into more generic "BottomSheetTextControl" component by removing references to "alt" from main component and passing down props.

* Created README.md for BottomSheetTextControl component

This commit introduces a README.md for the new BottomSheetTextControl component.

* Formatting tweaks for README.md

* Formatting tweaks for README.md

Fixes some issues with spacing.

* retrigger checks

* Simplify BottomSheetTextControl

This commit seeks to simplify the BottomSheetTextControl component by splitting out two more, smaller components from it: 1. smallFooterMessageControl 2. smallFooterMessageControlLink

* retrigger checks

* Correct merge conflict

* Update "SmallFooterMessageLinkControl" to "FooterMessageLink"

This commit updates the name of "SmallFooterMessageLinkControl" to "FooterMessageLink" in order to be clearer and more readable.

* Update "SmallFooterMessageLinkControl" to "FooterMessageLink"

This commit updates the name of "SmallFooterMessageLinkControl" to "FooterMessageLink" in order to be clearer and more readable.

* Delete small-footer-message-control-link.native.js

* Remove small-footer-message-control

* Update Footer Message Control

* Add README to FooterMessageLink component

This commit moves FooterMessageLink to a separate folder for the purpose of adding a README

* Revert accidental commit

This reverts an accidental commit, where I'd made changes in "link-settings/index.native.js" as part of general testing. I also remove "textAlign="left"" from a FooterMessageControl component in this file, as this is now the default.

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

@@ -19,12 +19,13 @@ import {
 	CycleSelectControl,
 	Icon,
 	PanelBody,
-	TextControl,
 	ToolbarButton,
 	ToolbarGroup,
 	Image,
 	WIDE_ALIGNMENTS,
 	LinkSettingsNavigation,
+	BottomSheetTextControl,
+	FooterMessageLink,
 } from '@wordpress/components';
 import {
 	BlockCaption,
@@ -45,9 +46,9 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import {
 	image as placeholderIcon,
-	textColor,
 	replace,
 	expand,
+	textColor,
 } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -82,7 +83,6 @@ export class ImageEdit extends Component {
 			this
 		);
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
-		this.updateAlt = this.updateAlt.bind( this );
 		this.updateImageURL = this.updateImageURL.bind( this );
 		this.onSetLinkDestination = this.onSetLinkDestination.bind( this );
 		this.onSetNewTab = this.onSetNewTab.bind( this );
@@ -246,10 +246,6 @@ export class ImageEdit extends Component {
 		this.setState( { isUploadInProgress: false } );
 	}
 
-	updateAlt( newAlt ) {
-		this.props.setAttributes( { alt: newAlt } );
-	}
-
 	updateImageURL( url ) {
 		this.props.setAttributes( {
 			url,
@@ -396,6 +392,39 @@ export class ImageEdit extends Component {
 		);
 	}
 
+	getAltTextSettings() {
+		const {
+			attributes: { alt },
+		} = this.props;
+
+		const updateAlt = ( newAlt ) => {
+			this.props.setAttributes( { alt: newAlt } );
+		};
+
+		return (
+			<BottomSheetTextControl
+				initialValue={ alt }
+				onChange={ updateAlt }
+				placeholder={ __( 'Add alt text' ) }
+				label={ __( 'Alt Text' ) }
+				icon={ textColor }
+				footerNote={
+					<>
+						{ __(
+							'Describe the purpose of the image. Leave empty if the image is purely decorative. '
+						) }
+						<FooterMessageLink
+							href={
+								'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+							}
+							value={ __( 'What is alt text?' ) }
+						/>
+					</>
+				}
+			/>
+		);
+	}
+
 	onSizeChangeValue( newValue ) {
 		this.onSetSizeSlug( newValue );
 	}
@@ -448,13 +477,7 @@ export class ImageEdit extends Component {
 							options={ this.sizeOptions }
 						/>
 					) }
-					<TextControl
-						icon={ textColor }
-						label={ __( 'Alt Text' ) }
-						value={ alt || '' }
-						valuePlaceholder={ __( 'None' ) }
-						onChangeValue={ this.updateAlt }
-					/>
+					{ this.getAltTextSettings() }
 				</PanelBody>
 				<PanelBody title={ __( 'Link Settings' ) }>
 					{ this.getLinkSettings( true ) }

packages/components/src/index.native.js

@@ -76,6 +76,8 @@ export { default as CycleSelectControl } from './mobile/cycle-select-control';
 export { default as Gradient } from './mobile/gradient';
 export { default as ColorSettings } from './mobile/color-settings';
 export { default as FocalPointSettingsPanel } from './mobile/focal-point-settings-panel';
+export { default as BottomSheetTextControl } from './mobile/bottom-sheet-text-control';
+export { default as FooterMessageLink } from './mobile/bottom-sheet/footer-message-link/footer-message-link';
 export { LinkPicker } from './mobile/link-picker';
 export { default as LinkPickerScreen } from './mobile/link-picker/link-picker-screen';
 export { default as LinkSettings } from './mobile/link-settings';

packages/components/src/mobile/bottom-sheet-text-control/README.md

@@ -0,0 +1,91 @@
+# BottomSheetTextControl
+
+`BottomSheetTextControl` allows users to enter and edit text, similar to [`TextControl`](/packages/components/src/text-control/README.md).
+
+`BottomSheetTextControl`'s main difference from `TextControl` is that it utilizes [`BottomSheetSubSheet`](/packages/components/src/mobile/bottom-sheet/sub-sheet/README.md). A user will tap to open a subsheet where they can enter their text into an editor. This is useful for cases where a larger text area is warranted for user input.
+
+### Usage
+
+```jsx
+// This is a paraphrased example from the image block's edit.native.js file
+import {
+	BottomSheetSelectControl,
+	FooterMessageLink,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const MyTextControl = () => {
+	const {
+		attributes: { alt },
+	} = this.props;
+
+	const updateAlt = ( newAlt ) => {
+		this.props.setAttributes( { alt: newAlt } );
+	};
+
+	return (
+		<PanelBody>
+			<BottomSheetTextControl
+				initialValue={ alt }
+				onChange={ updateAlt }
+				placeholder={ __( 'Generic placeholder text' ) }
+				label={ __( 'Generic label' ) }
+				icon={ textColor }
+				footerNote={
+					<>
+						{ __( 'A footer note to add to the component! ' ) }
+						<FooterMessageLink
+							href={ 'https://wordpress.org/' }
+							value={ __( 'Visit WordPress.org' ) }
+						/>
+					</>
+				}
+			/>
+		</PanelBody>
+	);
+};
+```
+
+### Props
+
+#### initialValue
+
+The initial value of the input.
+
+-   Type: `String`
+-   Required: Yes
+
+#### onChange
+
+A function that receives the value that's input into the text editor.
+
+-   Type: `Function`
+-   Required: Yes
+
+#### placeholder
+
+The placeholder text that will display in the component's subsheet, when its text editor is empty.
+
+-   Type: `String`
+-   Required: No
+
+#### label
+
+The label for the control. The label will appear in the header area of the subsheet and is necessary for navigation.
+
+-   Type: `String`
+-   Required: Yes
+
+#### icon
+
+The icon to display alongside the control.
+
+-   Type: `String`
+-   Required: No
+
+#### footerNote
+
+An optional note to display in the component's footer area.
+
+-   Type: `String`
+-   Required: No

packages/components/src/mobile/bottom-sheet-text-control/index.native.js

@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import { TextInput } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { Icon, chevronRight } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import {
+	BottomSheet,
+	PanelBody,
+	FooterMessageControl,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const BottomSheetTextControl = ( {
+	initialValue,
+	onChange,
+	placeholder,
+	label,
+	icon,
+	footerNote,
+} ) => {
+	const [ showSubSheet, setShowSubSheet ] = useState( false );
+	const navigation = useNavigation();
+
+	const goBack = () => {
+		setShowSubSheet( false );
+		navigation.goBack();
+	};
+
+	const openSubSheet = () => {
+		navigation.navigate( BottomSheet.SubSheet.screenName );
+		setShowSubSheet( true );
+	};
+
+	const [ value, onChangeText ] = useState( initialValue );
+
+	const horizontalBorderStyle = usePreferredColorSchemeStyle(
+		styles.horizontalBorder,
+		styles.horizontalBorderDark
+	);
+
+	const textEditorStyle = usePreferredColorSchemeStyle(
+		styles.textEditor,
+		styles.textEditorDark
+	);
+
+	return (
+		<BottomSheet.SubSheet
+			navigationButton={
+				<BottomSheet.Cell
+					icon={ icon }
+					placeholder={ placeholder }
+					label={ label }
+					onPress={ openSubSheet }
+					value={ initialValue || '' }
+				>
+					<Icon icon={ chevronRight }></Icon>
+				</BottomSheet.Cell>
+			}
+			showSheet={ showSubSheet }
+		>
+			<>
+				<BottomSheet.NavigationHeader
+					screen={ label }
+					leftButtonOnPress={ goBack }
+				/>
+				<PanelBody style={ horizontalBorderStyle }>
+					<TextInput
+						label={ label }
+						onChangeText={ ( text ) => onChangeText( text ) }
+						onChange={ onChange( value ) }
+						value={ value }
+						multiline={ true }
+						placeholder={ placeholder }
+						placeholderTextColor={ '#87a6bc' }
+						style={ textEditorStyle }
+						textAlignVertical={ 'top' }
+					/>
+				</PanelBody>
+			</>
+
+			{ footerNote && (
+				<PanelBody style={ styles.textFooternote }>
+					<FooterMessageControl
+						label={ footerNote }
+						textAlign="left"
+					/>
+				</PanelBody>
+			) }
+		</BottomSheet.SubSheet>
+	);
+};
+
+export default BottomSheetTextControl;

packages/components/src/mobile/bottom-sheet-text-control/styles.scss

@@ -0,0 +1,22 @@
+.textEditor {
+	padding: 14px 0;
+	height: 80px;
+}
+
+.textEditorDark {
+	color: $white;
+}
+
+.textFooternote {
+	padding: 0 16px 24px;
+}
+
+.horizontalBorder {
+	border-top-width: $border-width;
+	border-bottom-width: $border-width;
+	border-color: $light-gray-400;
+}
+
+.horizontalBorderDark {
+	border-color: $gray-70;
+}

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

@@ -8,7 +8,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 import Cell from './cell';
 import styles from './styles.scss';
 
-function FooterMessageCell( { textAlign = 'center', ...props } ) {
+function FooterMessageCell( { textAlign = 'left', ...props } ) {
 	return (
 		<Cell
 			{ ...props }

packages/components/src/mobile/bottom-sheet/footer-message-link/README.md

@@ -0,0 +1,37 @@
+# Footer Message Link
+
+FooterMessageLink allows for adding a link within a FooterMessageControl component.
+
+### Usage
+
+```jsx
+return (
+	<FooterMessageControl
+		value={
+			<>
+				{ __( 'Example footer text. ' ) }
+				<FooterMessageLink
+					href={ 'https://www.wordpress.org/' }
+					value={ __( 'Visit WordPress.org!' ) }
+				/>
+			</>
+		}
+	/>
+);
+```
+
+### Props
+
+#### href
+
+The URL that is being linked to and that will open in a browser tab when selected.
+
+-   Type: `String`
+-   Required: Yes
+
+#### value
+
+The "clickable" text that will be displayed to the user.
+
+-   Type: `String`
+-   Required: Yes