[Mobile]Update string concatenation for accessibility labels (#15181)

* Make accessibility labels properly localizable * Fix indentation * Fix image block accessibility labels
WordPress · May 2, 2019 · 5a09c65 · 5a09c65
1 parent f70fceb
commit 5a09c65
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -6,7 +6,7 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Dashicon } from '@wordpress/components';
 
 /**
@@ -17,7 +17,8 @@ import styles from './styles.scss';
 function MediaPlaceholder( props ) {
 	return (
 		<TouchableWithoutFeedback
-			accessibilityLabel={ sprintf( '%s%s %s', __( 'Image block' ), __( '.' ), __( 'Empty' ) ) }
+			/* translators: accessibility text for the Image block empty state */
+			accessibilityLabel={ __( 'Image block. Empty' ) }
 			accessibilityRole={ 'button' }
 			accessibilityHint={ __( 'Double tap to select an image' ) }
 			onPress={ props.onMediaOptionsPressed }

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -32,7 +32,7 @@ import {
 	BottomSheet,
 	Picker,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { isURL } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 
@@ -331,7 +331,13 @@ class ImageEdit extends React.Component {
 		return (
 			<TouchableWithoutFeedback
 				accessible={ ! isSelected }
-				accessibilityLabel={ __( 'Image block' ) + __( '.' ) + ' ' + alt + __( '.' ) + ' ' + caption }
+
+				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 }
 				disabled={ ! isSelected }
@@ -395,7 +401,16 @@ class ImageEdit extends React.Component {
 						<View
 							style={ { padding: 12, flex: 1 } }
 							accessible={ true }
-							accessibilityLabel={ __( 'Image caption' ) + __( '.' ) + ' ' + ( isEmpty( caption ) ? __( 'Empty' ) : caption ) }
+							accessibilityLabel={
+								isEmpty( caption ) ?
+									/* translators: accessibility text. Empty image caption. */
+									__( 'Image caption. Empty' ) :
+									sprintf(
+										/* translators: accessibility text. %s: image caption. */
+										__( 'Image caption. %s' ),
+										caption
+									)
+							}
 							accessibilityRole={ 'button' }
 						>
 							<TextInput

diff --git a/packages/block-library/src/nextpage/edit.native.js b/packages/block-library/src/nextpage/edit.native.js
@@ -22,7 +22,13 @@ export default function NextPageEdit( { attributes, isSelected, onFocus } ) {
 	return (
 		<View
 			accessible
-			accessibilityLabel={ sprintf( '%s%s %s', __( 'Page break block' ), __( '.' ), accessibilityTitle ) }
+			accessibilityLabel={
+				sprintf(
+					/* translators: accessibility text. %s: Page break text. */
+					__( 'Page break block. %s' ),
+					accessibilityTitle
+				)
+			}
 			accessibilityStates={ accessibilityState }
 			onAccessibilityTap={ onFocus }
 		>

diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
@@ -7,7 +7,7 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { createBlock } from '@wordpress/blocks';
 import { RichText } from '@wordpress/block-editor';
@@ -107,7 +107,16 @@ class ParagraphEdit extends Component {
 		return (
 			<View
 				accessible={ ! this.props.isSelected }
-				accessibilityLabel={ __( 'Paragraph block' ) + __( '.' ) + ' ' + ( isEmpty( content ) ? __( 'Empty' ) : this.plainTextContent( content ) ) }
+				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 }
 			>
 				<RichText

diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
@@ -75,7 +75,16 @@ class PostTitle extends Component {
 			<View
 				style={ [ styles.titleContainer, borderStyle, { borderColor } ] }
 				accessible={ ! this.state.isSelected }
-				accessibilityLabel={ sprintf( '%s%s %s', __( 'Post title' ), __( '.' ), ( isEmpty( title ) ? __( 'Empty' ) : title ) ) }
+				accessibilityLabel={
+					isEmpty( title ) ?
+						/* translators: accessibility text. empty post title. */
+						__( 'Post title. Empty' ) :
+						sprintf(
+							/* translators: accessibility text. %s: text content of the post title. */
+							__( 'Post title. %s' ),
+							title
+						)
+				}
 			>
 				<RichText
 					tagName={ 'p' }