[Mobile]Paragraph - Add accessibility label for unselected state #15126
Conversation
pinarol
added
the
Mobile App - i.e. Android or iOS
pinarol
changed the title
There was a problem hiding this comment.
Thank you for taking care of this @pinarol !
I was able to reproduce the unexpected behavior of screen reader speaking the unselected label after being selected via double tap.
I added a couple of comments with some ideas on how to address that issue.
Hopefully it won't be necessary to declare the internal onFocus and onBlur methods.
| <View> | ||
| <View | ||
| accessible={ ! this.state.isSelected } | ||
| accessibilityLabel={ __( 'Paragraph block' ) + __( '.' ) + ' ' + ( isEmpty( content ) ? __( 'Empty' ) : content ) } |
There was a problem hiding this comment.
Here we could use onAccessibilityTap={ this.props.onFocus } to avoid defining the internal onFocus method.
The parent component (BlockHolder) should be in charge of setting the selection state of the block in the store. And we can use that state from the store internally via props.
There was a problem hiding this comment.
One more detail: content has all the html code, so the ScreenReader will read the html tags too.
We can clean it up using: import { create } from '@wordpress/rich-text';
| @@ -95,13 +116,16 @@ class ParagraphEdit extends Component { | |||
| } = attributes; | |||
|
|
|||
| return ( | |||
| <View> | |||
| <View | |||
| accessible={ ! this.state.isSelected } | |||
There was a problem hiding this comment.
Here we should probably use isSelected from props. In that way it will be properly set to false when the block is selected by any method (not just from focusing RichText directly), and ScreenReader won't read this label after double tap to select.
|
Thank you! Ready to give another look @etoledom 🎉 |
There was a problem hiding this comment.
Thank you for the updates. It's working beautifully 🎉 !
Sadly on Android we can't test it properly until wordpress-mobile/gutenberg-mobile#918 is fixed. So let's 
for now and continue.
Nice job!
pinarol
changed the title
* Add accessibility label for unselected state * Improve accessibility handling
Description
This PR improves accessibility on image block selected state.
Fixes part of wordpress-mobile/gutenberg-mobile#907
To test:
Please refer to the gutenberg-mobile side PR.
Checklist: