Skip to content

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

Merged
Tug merged 15 commits intomasterfrom
rnmobile/accessibility-ios-z-gesture
May 23, 2019
Merged

[RN mobile] Accessibility: Handle the iOS z-gesture to exit modals and block selection#15153
Tug merged 15 commits intomasterfrom
rnmobile/accessibility-ios-z-gesture

Conversation

@Tug
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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