[Mobile] Move unselected block accessibility handling to block-holder…

… (v2) (#15225) * Update paragraph block accessibility label * Move block unselected state accessibility handling to block-holder * Add getAccessibilityLabel to block settings * Rename getAccessibilityLabel into __experimentalGetAccessibilityLabel * Make __experimentalGetAccessibilityLabel only available for native mobile * Handle not alt and a caption case * Handle no caption case * Fix merge mistake in prop names * Handle setting UnrecognizedBlock accessibility label in BlockHolder * Fix lint errors
WordPress · Jun 6, 2019 · ff70de6 · ff70de6
1 parent c5e8784
commit ff70de6
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 128 deletions.
diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js
@@ -8,94 +8,61 @@ import styles from './editor.scss';
  * External dependencies
  */
 import { View } from 'react-native';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { RichText, BlockControls } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
-import { create } from '@wordpress/rich-text';
 
-class HeadingEdit extends Component {
-	plainTextContent( html ) {
-		const result = create( { html } );
-		if ( result ) {
-			return result.text;
-		}
-		return '';
-	}
-
-	render() {
-		const {
-			attributes,
-			setAttributes,
-			mergeBlocks,
-			style,
-			onReplace,
-		} = this.props;
-
-		const {
-			level,
-			placeholder,
-			content,
-		} = attributes;
-
-		const tagName = 'h' + level;
-
-		return (
-			<View
-				accessible={ ! this.props.isSelected }
-				accessibilityLabel={
-					isEmpty( content ) ?
-						sprintf(
-							/* translators: accessibility text. %s: heading level. */
-							__( 'Heading block. Level %s. Empty.' ),
-							level
-						) :
-						sprintf(
-							/* translators: accessibility text. 1: heading level. 2: heading content. */
-							__( 'Heading block. Level %1$s. %2$s' ),
-							level,
-							this.plainTextContent( content )
-						)
+const HeadingEdit = ( {
+	attributes,
+	isSelected,
+	mergeBlocks,
+	onBlur,
+	onFocus,
+	onReplace,
+	setAttributes,
+	style,
+} ) => (
+	<View onAccessibilityTap={ onFocus }>
+		<BlockControls>
+			<HeadingToolbar
+				minLevel={ 2 }
+				maxLevel={ 5 }
+				selectedLevel={ attributes.level }
+				onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) }
+			/>
+		</BlockControls>
+		<RichText
+			identifier="content"
+			tagName={ 'h' + attributes.level }
+			value={ attributes.content }
+			isSelected={ isSelected }
+			style={ {
+				...style,
+				minHeight: styles[ 'wp-block-heading' ].minHeight,
+			} }
+			onFocus={ onFocus } // always assign onFocus as a props
+			onBlur={ onBlur } // always assign onBlur as a props
+			onChange={ ( value ) => setAttributes( { content: value } ) }
+			onMerge={ mergeBlocks }
+			onSplit={ ( value ) => {
+				if ( ! value ) {
+					return createBlock( 'core/paragraph' );
 				}
-				onAccessibilityTap={ this.props.onFocus }
-			>
-				<BlockControls>
-					<HeadingToolbar minLevel={ 2 } maxLevel={ 5 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
-				</BlockControls>
-				<RichText
-					identifier="content"
-					tagName={ tagName }
-					value={ content }
-					isSelected={ this.props.isSelected }
-					style={ {
-						...style,
-						minHeight: styles[ 'wp-block-heading' ].minHeight,
-					} }
-					onFocus={ this.props.onFocus } // always assign onFocus as a props
-					onBlur={ this.props.onBlur } // always assign onBlur as a props
-					onChange={ ( value ) => setAttributes( { content: value } ) }
-					onMerge={ mergeBlocks }
-					onSplit={ ( value ) => {
-						if ( ! value ) {
-							return createBlock( 'core/paragraph' );
-						}
 
-						return createBlock( 'core/heading', {
-							...attributes,
-							content: value,
-						} );
-					} }
-					onReplace={ onReplace }
-					onRemove={ () => onReplace( [] ) }
-					placeholder={ placeholder || __( 'Write heading…' ) }
-				/>
-			</View>
-		);
-	}
-}
+				return createBlock( 'core/heading', {
+					...attributes,
+					content: value,
+				} );
+			} }
+			onReplace={ onReplace }
+			onRemove={ () => onReplace( [] ) }
+			placeholder={ attributes.placeholder || __( 'Write heading…' ) }
+		/>
+	</View>
+);
+
 export default HeadingEdit;
diff --git a/packages/block-library/src/heading/index.native.js b/packages/block-library/src/heading/index.native.js
@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { create } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import { settings as webSettings } from './index.js';
+
+export { metadata, name } from './index.js';
+
+export const settings = {
+	...webSettings,
+	__experimentalGetAccessibilityLabel( attributes ) {
+		const { content, level } = attributes;
+
+		const plainTextContent = ( html ) => create( { html } ).text || '';
+
+		return isEmpty( content ) ?
+			sprintf(
+				/* translators: accessibility text. %s: heading level. */
+				__( 'Level %s. Empty.' ),
+				level
+			) :
+			sprintf(
+				/* translators: accessibility text. 1: heading level. 2: heading content. */
+				__( 'Level %1$s. %2$s' ),
+				level,
+				plainTextContent( content )
+			);
+	},
+};
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -274,13 +274,6 @@ class ImageEdit extends React.Component {
 		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
 			<TouchableWithoutFeedback
 				accessible={ ! isSelected }
-				accessibilityLabel={ sprintf(
-					/* translators: accessibility text. 1: image alt text. 2: image caption. */
-					__( 'Image block. %1$s. %2$s' ),
-					alt,
-					caption
-				) }
-				accessibilityRole={ 'button' }
 				onPress={ this.onImagePressed }
 				onLongPress={ openMediaOptions }
 				disabled={ ! isSelected }

diff --git a/packages/block-library/src/image/index.native.js b/packages/block-library/src/image/index.native.js
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { settings as webSettings } from './index.js';
+
+export { metadata, name } from './index.js';
+
+export const settings = {
+	...webSettings,
+	__experimentalGetAccessibilityLabel( attributes ) {
+		const { caption, alt, url } = attributes;
+
+		if ( ! url ) {
+			return __( 'Empty' );
+		}
+
+		if ( ! alt ) {
+			return caption || '';
+		}
+
+		// This is intended to be read by a screen reader.
+		// A period simply means a pause, no need to translate it.
+		return alt + ( caption ? '. ' + caption : '' );
+	},
+};
diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js
@@ -10,7 +10,7 @@ import { Icon } from '@wordpress/components';
 import { coreBlocks } from '@wordpress/block-library';
 import { normalizeIconObject } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,20 +25,7 @@ export default class UnsupportedBlockEdit extends Component {
 		const icon = blockType ? normalizeIconObject( blockType.settings.icon ) : 'admin-plugins';
 
 		return (
-			<View style={ styles.unsupportedBlock }
-				accessible={ true }
-				accessibilityLabel={
-					blockType ?
-						sprintf(
-							/* translators: accessibility text. %s: unsupported block type. */
-							__( 'Unsupported block: %s' ),
-							title
-						) :
-						/* translators: accessibility text. */
-						__( 'Unsupported block' )
-				}
-				onAccessibilityTap={ this.props.onFocus }
-			>
+			<View style={ styles.unsupportedBlock }>
 				<Icon className="unsupported-icon" icon={ icon && icon.src ? icon.src : icon } />
 				<Text style={ styles.unsupportedBlockMessage }>{ title }</Text>
 			</View>

diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
@@ -2,16 +2,14 @@
  * External dependencies
  */
 import { View } from 'react-native';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { createBlock } from '@wordpress/blocks';
 import { RichText } from '@wordpress/block-editor';
-import { create } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -39,14 +37,6 @@ class ParagraphEdit extends Component {
 		) ) );
 	}
 
-	plainTextContent( html ) {
-		const result = create( { html } );
-		if ( result ) {
-			return result.text;
-		}
-		return '';
-	}
-
 	render() {
 		const {
 			attributes,
@@ -62,20 +52,7 @@ class ParagraphEdit extends Component {
 		} = attributes;
 
 		return (
-			<View
-				accessible={ ! this.props.isSelected }
-				accessibilityLabel={
-					isEmpty( content ) ?
-						/* translators: accessibility text. empty paragraph block. */
-						__( 'Paragraph block. Empty' ) :
-						sprintf(
-							/* translators: accessibility text. %s: text content of the paragraph block. */
-							__( 'Paragraph block. %s' ),
-							this.plainTextContent( content )
-						)
-				}
-				onAccessibilityTap={ this.props.onFocus }
-			>
+			<View>
 				<RichText
 					identifier="content"
 					tagName="p"

diff --git a/packages/block-library/src/paragraph/index.native.js b/packages/block-library/src/paragraph/index.native.js
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { create } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import { settings as webSettings } from './index.js';
+
+export { metadata, name } from './index.js';
+
+export const settings = {
+	...webSettings,
+	__experimentalGetAccessibilityLabel( attributes ) {
+		const { content } = attributes;
+
+		const plainTextContent = ( html ) => create( { html } ).text || '';
+
+		return isEmpty( content ) ? __( 'Empty' ) : plainTextContent( content );
+	},
+};