Accessibility Mark I - Toolbar Buttons#793
Conversation
| title={ __( 'Add block' ) } | ||
| icon={ ( <Dashicon icon="plus-alt" style={ styles.addBlockButton } color={ styles.addBlockButton.color } /> ) } | ||
| onClick={ onInsertClick } | ||
| extraProps={ { hint: __( 'Double tap to add a block' ) } } |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
May I ask why the hint is "double tap"? A single tap seems to be enough to execute the action here, is it not?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Oh I see, indeed I needed to actually enable TalkBack to see it in action 👍
pinarol
left a comment
There was a problem hiding this comment.
Looks and works good ! 🎉
I could just test the WPiOS app(don't have an android device yet :( )
…ress-mobile/gutenberg-mobile into issue/accessibility-mark-i
|
Thank you both! |
|
👋 @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? |
|
@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. 👍 |
|
Sounds good, thanks @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):
ABC, H2, H3, or H4).To test (Android):
And that's it. On Android, blocks are still unusable by TalkBack :(