Improving accessibility on Image Block (deselected)

[etoledom]

Part of #476

This PR improves accessibility (screen reader) for the Image Block. In particular when it's deselected.
gutenberg side PR: WordPress/gutenberg#14713

The current behavior is:
Empty image block:

• Label: "Image block. Empty."
• Hint: "Double tap to select an image."

Image block with image:

• Label: "Image block. {alt}."
• Hint: ""Double tap to edit the image."

cc @rachelmcr

When the block is not selected, it's captured by the screen reader as one whole element, but when it is selected, it opens the inner controls, including the inner tool bar.

To test (iOS):

• Activate VoiceOver: https://github.com/wordpress-mobile/WordPress-iOS/wiki/Using-VoiceOver

To test (Android):

• Activate TalkBack: https://www.wikihow.com/Enable-TalkBack-on-Your-Android
  • In my case, the system had a handy tutorial on how to use it.
  • If your version doesn't have it, it's actually very similar to VoiceOver.

Common test steps:

• Select an empty Image Block.
• Check that it reads as described before, including label and hint. (Hint takes a couple of seconds on iOS).
• Activate the selected block.
• Check that it shows the image selector.
• Select an Image block with content.
• Check that it reads as described before.
• If it doesn't have alt, add one (recommended to deactivate VoiceOver since the bottom-sheet is not scree reader friendly yet)
• Check that VoiceOver reads "Image block. {alt}." on the image block with alt.
• Double tap on the block to activate it.
• Check that the block is now active, and the inner elements are selectable.

[Tug]

Works great on Android 🚢 !!

[JavonDavis]

@etoledom This also works great on iOS. Tested on iPad 12.1 👍🏽

[hypest]

Some more work seems to be needed in this one (related to TalkBack as per @etoledom over Slack) so, moving the milestone to not block today's cut.

[Tug]

Tested on iOS and I found it really hard to make things work in general (not specific to this PR I think)

• Once an image block selected, and you move to another item, it's almost impossible to go back to the selected block, it jumps from the previous block to the caption inside our block, we should probably synchronize block selection with voiceover selection (if it's possible).
• Double taping on a selected image block does not trigger any action
• The hide keyboard button did not respond to double tap

So regarding this PR, I think the following test step is failing:

• Check that the block is now active, and the inner elements are selectable.

[Tug]

After discussing it with you on slack I understood that the inner elements cannot be selectable if the parent one is (I found it weird because it's not the case on android, and talkback say "block container" in this case when the whole block is selected).
Anyway, we can think about a solution to improve this in another PR, this one is already a good step forward, let's merge it 👍

[etoledom]

Thank you @Tug !

I found it weird because it's not the case on android, and talkback say "block container" in this case

I think that the fact that Android's TalkBack reads block container is a bug. It is there for UITests and that component is marked with accessibility={ false }. It also happen with block list.

I'm even thinking that it might be a React-Native bug, but I haven't found any tickets about this. If it's expected behavior, it will be super bad for us :(

Double taping on a selected image block does not trigger any action

True! There's a ticket to handle the Image Block on selected status. This one was meant for the Image block when it's not selected (mainly).

The hide keyboard button did not respond to double tap

Also true! This is a bug even without Screen Reader active.

[pinarol]

LGTM!

[etoledom]

Closing since the Gutenberg ref was already updated by #920