[Mobile]Improve accessibility on image block selected state #15122
Conversation
pinarol
added
the
Mobile App - i.e. Android or iOS
There was a problem hiding this comment.
Great job @pinarol ! 🎉
It's working great on iOS.
There is an issue on Android where the block-container blocks the focus of the image, when the block is selected. This is a generic issue on Android and it deserves its own PR.
After testing, I think it would be nice to add the caption information too to the unselected state of the block. It would read: "Image Block. {alt}. {caption}". What do you think?.
Not needed to add it in this PR since it's about the selected state.
Added a few code comments but in general it's great!
| @@ -377,6 +380,8 @@ class ImageEdit extends React.Component { | |||
| resizeMethod="scale" | |||
| source={ { uri: url } } | |||
| key={ url } | |||
| accessible={ true } | |||
| accessibilityLabel={ __( 'Image' ) + __( '.' ) + ' ' + alt } | |||
There was a problem hiding this comment.
Good call! sprintf is not really necessary to add an extra space 👍
There was a problem hiding this comment.
On this particular case, I think the Image prefix is not necessary.
ImageBackground component uses an Image component internally that is already marked as an Image accessibility item. This makes VoiceOver read Image at the end, so it currently reads "Image. {Alt}. Image".
I'd say let's just add the Alt as label so it reads "{Alt}. Image".
| icon="edit" | ||
| onClick={ onMediaOptionsButtonPressed } | ||
| extraProps={ { hint: __( 'Double tap to edit image' ) } } |
There was a problem hiding this comment.
I don't think that the hint here is adding new information, so it's probably not needed.
| accessible={ true } | ||
| accessibilityLabel={ __( 'Image caption' ) + __( '.' ) + ' ' + ( isEmpty( caption ) ? __( 'Empty' ) : caption ) } | ||
| accessibilityHint={ __( 'Double tap to edit caption' ) } | ||
| accessibilityRole={ 'button' } |
There was a problem hiding this comment.
I'm not sure if the hint is really necessary here. Is true that from the label, it's not obvious that this can be edited, but as is marked as a button it denotes that it's actionable. After the action the user gets in the text field on edit mode.
If we keep it, I'd add a the between edit and caption (Double tap to edit the caption). But better to ask someone English native to be sure :)
|
Thanks for the review @etoledom ! Ready for another look |
|
Sorry forgot to remove one hint, removed with the last commit ⬆️ |
* Enhance accessibility on toolbar buttons * Add accessibilityLabel for Image * Add accessibility on caption * Remove unnecessary hints * Update accessibility labels * Remove unnecessary hint
Description
This PR improves accessibility on image block selected state.
Fixes part of: wordpress-mobile/gutenberg-mobile#909
To test:
Please refer to the gutenberg-mobile side PR.
Checklist: