[RN mobile] Accessibility: Handle the iOS z-gesture to exit modals an…

…d block selection (#15153) * Close the modal on z-gesture on iOS * Disable cancel and retry dialog if image is already uploaded * Fix long press disabled by TouchableWithoutFeedback wrapper * Updated image label for double tap and hold gesture * Remove long press gesture from image, since edit image function is not reachable anymore * Solve merge conflict * Adding long press gesture to image block on selected state * Fix lint issues
WordPress · May 23, 2019 · 392df98 · 392df98
1 parent 9f04d78
commit 392df98
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 27 deletions.
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -211,22 +211,16 @@ class ImageEdit extends React.Component {
 			this.setState( { showSettings: false } );
 		};
 
-		const toolbarEditButton = (
-			<MediaUpload mediaType={ MEDIA_TYPE_IMAGE }
-				onSelectURL={ this.onSelectMediaUploadOption }
-				render={ ( { open, getMediaOptions } ) => {
-					return (
-						<Toolbar>
-							{ getMediaOptions() }
-							<ToolbarButton
-								title={ __( 'Edit image' ) }
-								icon="edit"
-								onClick={ open }
-							/>
-						</Toolbar>
-					);
-				} } >
-			</MediaUpload>
+		const getToolbarEditButton = ( open ) => (
+			<BlockControls>
+				<Toolbar>
+					<ToolbarButton
+						title={ __( 'Edit image' ) }
+						icon="edit"
+						onClick={ open }
+					/>
+				</Toolbar>
+			</BlockControls>
 		);
 
 		const getInspectorControls = () => (
@@ -276,11 +270,9 @@ class ImageEdit extends React.Component {
 		}
 
 		const imageContainerHeight = Dimensions.get( 'window' ).width / IMAGE_ASPECT_RATIO;
-
-		return (
+		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' ),
@@ -289,14 +281,14 @@ class ImageEdit extends React.Component {
 				) }
 				accessibilityRole={ 'button' }
 				onPress={ this.onImagePressed }
+				onLongPress={ openMediaOptions }
 				disabled={ ! isSelected }
 			>
 				<View style={ { flex: 1 } }>
 					{ getInspectorControls() }
+					{ getMediaOptions() }
 					{ ( ! this.state.isCaptionSelected ) &&
-						<BlockControls>
-							{ toolbarEditButton }
-						</BlockControls>
+						getToolbarEditButton( openMediaOptions )
 					}
 					<InspectorControls>
 						<ToolbarButton
@@ -326,16 +318,20 @@ class ImageEdit extends React.Component {
 
 							return (
 								<View style={ { flex: 1 } } >
-									{ ! imageWidthWithinContainer && <View style={ [ styles.imageContainer, { height: imageContainerHeight } ] } >
-										{ this.getIcon( false ) }
-									</View> }
+									{ ! imageWidthWithinContainer &&
+										<View style={ [ styles.imageContainer, { height: imageContainerHeight } ] } >
+											{ this.getIcon( false ) }
+										</View> }
 									<ImageBackground
+										accessible={ true }
+										disabled={ ! isSelected }
+										accessibilityLabel={ alt }
+										accessibilityHint={ __( 'Double tap and hold to edit' ) }
+										accessibilityRole={ 'imagebutton' }
 										style={ { width: finalWidth, height: finalHeight, opacity } }
 										resizeMethod="scale"
 										source={ { uri: url } }
 										key={ url }
-										accessible={ true }
-										accessibilityLabel={ alt }
 									>
 										{ isUploadFailed &&
 											<View style={ [ styles.imageContainer, { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.5)' } ] } >
@@ -383,6 +379,15 @@ class ImageEdit extends React.Component {
 				</View>
 			</TouchableWithoutFeedback>
 		);
+
+		return (
+			<MediaUpload mediaType={ MEDIA_TYPE_IMAGE }
+				onSelectURL={ this.onSelectMediaUploadOption }
+				render={ ( { open, getMediaOptions } ) => {
+					return getImageComponent( open, getMediaOptions );
+				} }
+			/>
+		);
 	}
 }
 

diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js
@@ -135,6 +135,7 @@ class BottomSheet extends Component {
 				swipeDirection="down"
 				onMoveShouldSetResponder={ panResponder.panHandlers.onMoveShouldSetResponder }
 				onMoveShouldSetResponderCapture={ panResponder.panHandlers.onMoveShouldSetResponderCapture }
+				onAccessibilityEscape={ this.props.onClose }
 			>
 				<KeyboardAvoidingView
 					behavior={ Platform.OS === 'ios' && 'padding' }