Accessibility Mark I - Toolbar Buttons

[etoledom]

Part of #476

This is a simple PR that implements the changes made on WordPress/gutenberg#14697 to improve accessibility on the toolbar buttons.

To test (iOS):

• Activate VoiceOver: https://github.com/wordpress-mobile/WordPress-iOS/wiki/Using-VoiceOver
• Select the "Add Block" button.
• Check that VoiceOver reads the label, that it reads the element type (button), and it reads the hint (after a couple of seconds).
• Select the "Unod/Redo" buttons.
• Check that it reads the label, the element type (button) and the state (dimmed)
  • For some reason it says dimmed instead of disabled, but it's a iOS system thing.
• Select a Paragraph or Heading block.
• Check that the format buttons are read correctly (label and type).
• Activate one of the format buttons (b, i, ABC, H2, H3, or H4).
• Check that the button state is read correctly (selected)
• Select the Hide Keyboard button.
• Check that it reads properly (label and type).

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.
• Select the "Add Block" button.
• Check that VoiceOver reads the label, that it reads the element type (button), and it reads the hint (after a couple of seconds).
• Select the "Unod/Redo" buttons.
• Check that it reads the label, the element type (button) and the state (dimmed)

And that's it. On Android, blocks are still unusable by TalkBack :(

[etoledom]

As we talked with @JavonDavis , we will try to change this on a future PR and pass directly an accessibilityHint prop.
For now I prefer to keep it simpler.

[Tug]

May I ask why the hint is "double tap"? A single tap seems to be enough to execute the action here, is it not?

[etoledom]

When VoiceOver is active, a single tap will select an element, and a double tap will trigger the action. It's kind of standard for hints.

[Tug]

Oh I see, indeed I needed to actually enable TalkBack to see it in action 👍

[pinarol]

Looks and works good ! 🎉
I could just test the WPiOS app(don't have an android device yet :( )

[Tug]

Tested on Android, LGTM 👍

[etoledom]

Thank you both!

[hypest]

👋 @etoledom , I wonder if there are any guidelines we can extract at this point and add them to the Wiki for how the code of an accessible component should look. It can be a running/living document as we get better at this. WDYT?

[etoledom]

@hypest - I have that in mind!

Not sure about best practices regarding gutenberg in specific, like where is best to add the accessibility related props (block files, controls, etc...), but there are more generics guidelines that I can definitely share right away, and we can improve them in the way.

I can do something similar to this: https://github.com/wordpress-mobile/WordPress-iOS/wiki/VoiceOver-guideline#when-to-and-when-not-to with a RN language. 👍

[hypest]

Sounds good, thanks @etoledom !