Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RN mobile] Accessibility: Handle the iOS z-gesture to exit modals and block selection #15153

Merged
merged 15 commits into from
May 23, 2019
Merged

[RN mobile] Accessibility: Handle the iOS z-gesture to exit modals and block selection #15153

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
3312736
Close the modal on z-gesture on iOS
Tug Apr 24, 2019
36b42da
Disable cancel and retry dialog if image is already uploaded
Tug Apr 26, 2019
cc2cae5
Fix long press disabled by TouchableWithoutFeedback wrapper
Tug Apr 26, 2019
38137b3
Merge remote-tracking branch 'origin/master' into rnmobile/accessibil…
Tug Apr 26, 2019
389c52a
Merge branch 'master' into rnmobile/accessibility-ios-z-gesture
etoledom May 10, 2019
8d6cd64
Updated image label for double tap and hold gesture
etoledom May 10, 2019
0c4762b
Merge branch 'master' into rnmobile/accessibility-ios-z-gesture
etoledom May 14, 2019
968909d
Remove long press gesture from image, since edit image function is no…
etoledom May 14, 2019
7b31b11
Merge branch 'master' into rnmobile/accessibility-ios-z-gesture
etoledom May 15, 2019
a65abfa
Merge branch 'master' into rnmobile/accessibility-ios-z-gesture
etoledom May 16, 2019
03c6df3
Solve merge conflict
etoledom May 21, 2019
b92367c
Adding long press gesture to image block on selected state
etoledom May 21, 2019
cf5c0d7
Merge branch 'master' into rnmobile/accessibility-ios-z-gesture
etoledom May 21, 2019
12ff491
Fix lint issues
etoledom May 21, 2019
93c7067
Merge remote-tracking branch 'origin/master' into rnmobile/accessibil…
Tug May 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/block-editor/src/components/mobile/bottom-sheet/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,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' }
Expand Down
46 changes: 27 additions & 19 deletions packages/block-library/src/image/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import React from 'react';
import { View, ImageBackground, TextInput, Text, TouchableWithoutFeedback } from 'react-native';
import { View, ImageBackground, TextInput, Text, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import {
subscribeMediaUpload,
requestMediaPickFromMediaLibrary,
Expand Down Expand Up @@ -340,6 +340,7 @@ class ImageEdit extends React.Component {
) }
accessibilityRole={ 'button' }
onPress={ this.onImagePressed }
onLongPress={ url && onMediaOptionsButtonPressed }
disabled={ ! isSelected }
>
<View style={ { flex: 1 } }>
Expand Down Expand Up @@ -372,28 +373,35 @@ class ImageEdit extends React.Component {
}

return (
<View style={ { flex: 1 } } >
{ getInspectorControls() }
{ getMediaOptions() }
{ ! imageWidthWithinContainer && <View style={ styles.imageContainer } >
<Dashicon icon={ 'format-image' } size={ 300 } />
</View> }
<ImageBackground
style={ { width: finalWidth, height: finalHeight, opacity } }
resizeMethod="scale"
source={ { uri: url } }
key={ url }
accessible={ true }
accessibilityLabel={ alt }
>
{ this.state.isUploadFailed &&
<TouchableOpacity
onLongPress={ onMediaOptionsButtonPressed }
accessible={ true }
disabled={ ! isSelected }
accessibilityLabel={ alt }
accessibilityHint={ __( 'Long press to edit the image' ) }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you may have to tap once first, it's like a double tap but on the second tap your finger stays on the screen

As you mentioned, with VoiceOver, this is not really a Long Press gesture, but a Double tap and hold gesture.

I found in the Mail app an example with the "Compose new e-mail" button (bottom right corner).
The normal tap opens the e-mail composer and a long press opens the Drafts screen.
VoiceOver says: "Compose. Button. (hint) Double tap and hold to bring up Drafts".

Let's use this same way of communicating the gesture with VoiceOver. :)

accessibilityRole={ 'imagebutton' }
>
<View style={ { flex: 1 } }>
{ getInspectorControls() }
{ getMediaOptions() }
{ ! imageWidthWithinContainer && <View style={ styles.imageContainer } >
<Dashicon icon={ 'format-image' } size={ 300 } />
</View> }
<ImageBackground
style={ { width: finalWidth, height: finalHeight, opacity } }
resizeMethod="scale"
source={ { uri: url } }
key={ url }
>
{ this.state.isUploadFailed &&
<View style={ styles.imageContainer } >
<Dashicon icon={ 'image-rotate' } ariaPressed={ 'dashicon-active' } />
<Text style={ styles.uploadFailedText }>{ __( 'Failed to insert media.\nPlease tap for options.' ) }</Text>
</View>
}
</ImageBackground>
</View>
}
</ImageBackground>
</View>
</TouchableOpacity>
);
} }
</ImageSize>
Expand Down