-
Notifications
You must be signed in to change notification settings - Fork 58
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
Accessibility Mark I - Toolbar Buttons #793
Conversation
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh I see, indeed I needed to actually enable TalkBack to see it in action 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks and works good ! 🎉
I could just test the WPiOS app(don't have an android device yet :( )
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested on Android, LGTM 👍
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 :(