-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
[Mobile]Paragraph - Add accessibility label for unselected state #15126
Conversation
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.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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!
* 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: