[Mobile]Improve accessibility on image block selected state (#15122)

* Enhance accessibility on toolbar buttons * Add accessibilityLabel for Image * Add accessibility on caption * Remove unnecessary hints * Update accessibility labels * Remove unnecessary hint
WordPress · Apr 24, 2019 · 9db86a8 · 9db86a8
1 parent 4ac1b71
commit 9db86a8
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -13,6 +13,7 @@ import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
 } from 'react-native-gutenberg-bridge';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -31,7 +32,7 @@ import {
 	BottomSheet,
 	Picker,
 } from '@wordpress/block-editor';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { isURL } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 
@@ -254,7 +255,7 @@ class ImageEdit extends React.Component {
 		const toolbarEditButton = (
 			<Toolbar>
 				<ToolbarButton
-					label={ __( 'Edit image' ) }
+					title={ __( 'Edit image' ) }
 					icon="edit"
 					onClick={ onMediaOptionsButtonPressed }
 				/>
@@ -330,9 +331,8 @@ class ImageEdit extends React.Component {
 		return (
 			<TouchableWithoutFeedback
 				accessible={ ! isSelected }
-				accessibilityLabel={ sprintf( '%s%s %s', __( 'Image block' ), __( '.' ), alt ) }
+				accessibilityLabel={ __( 'Image block' ) + __( '.' ) + ' ' + alt + __( '.' ) + ' ' + caption }
 				accessibilityRole={ 'button' }
-				accessibilityHint={ __( 'Double tap to edit the image' ) }
 				onPress={ this.onImagePressed }
 				disabled={ ! isSelected }
 			>
@@ -343,7 +343,7 @@ class ImageEdit extends React.Component {
 					</BlockControls>
 					<InspectorControls>
 						<ToolbarButton
-							label={ __( 'Image Settings' ) }
+							title={ __( 'Image Settings' ) }
 							icon="admin-generic"
 							onClick={ onImageSettingsButtonPressed }
 						/>
@@ -377,6 +377,8 @@ class ImageEdit extends React.Component {
 										resizeMethod="scale"
 										source={ { uri: url } }
 										key={ url }
+										accessible={ true }
+										accessibilityLabel={ alt }
 									>
 										{ this.state.isUploadFailed &&
 											<View style={ styles.imageContainer } >
@@ -390,7 +392,12 @@ class ImageEdit extends React.Component {
 						} }
 					</ImageSize>
 					{ ( ! RichText.isEmpty( caption ) > 0 || isSelected ) && (
-						<View style={ { padding: 12, flex: 1 } }>
+						<View
+							style={ { padding: 12, flex: 1 } }
+							accessible={ true }
+							accessibilityLabel={ __( 'Image caption' ) + __( '.' ) + ' ' + ( isEmpty( caption ) ? __( 'Empty' ) : caption ) }
+							accessibilityRole={ 'button' }
+						>
 							<TextInput
 								style={ { textAlign: 'center' } }
 								fontFamily={ this.props.fontFamily || ( styles[ 'caption-text' ].fontFamily ) }