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.

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

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

Merged
merged 15 commits into from
May 23, 2019

Conversation

Tug
Copy link
Contributor

@Tug Tug commented Apr 24, 2019

Description

This PR adds support for the z-gesture (see https://facebook.github.io/react-native/docs/accessibility.html#onaccessibilityescape-ios).

It also adds support for long press edit of the image inside the image block.

How has this been tested?

Tested with wordpress-mobile/gutenberg-mobile#926

@gziolo gziolo added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Apr 25, 2019
@Tug Tug requested review from etoledom and pinarol April 26, 2019 15:39
Copy link
Contributor

@etoledom etoledom left a comment

Choose a reason for hiding this comment

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

"Hey Siri, activate VoiceOver"

Nice tip!

The Z gestures work beautifully to deselect the selected block and to dismiss modals 🎉

I left a small comment for the long press gesture hint. Otherwise it works great on iOS.

As mentioned, Android doesn't perform as well, but there are known issues that are preventing us to have a great TalkBack experience. Let's continue as it is and solve those Android issues later on.

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. :)

Copy link
Contributor

@pinarol pinarol left a comment

Choose a reason for hiding this comment

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

Tested on WPiOS and working pretty good. I think z-gesture will help users a lot. 🎉

I just realized that talkback can say image block. undefined. but it is not directly related with this PR, maybe we could fix that in wordpress-mobile/gutenberg-mobile#937 and secure the undefined variables as alt || '' or caption || ''

@Tug Tug merged commit 392df98 into master May 23, 2019
@Tug Tug deleted the rnmobile/accessibility-ios-z-gesture branch May 23, 2019 12:08
@youknowriad youknowriad added this to the 5.8 (Gutenberg) milestone May 24, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants