Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Mobile]: Improving accessibility on Image Block (deselected) #14713

Merged
merged 14 commits into from
Apr 23, 2019
Merged

[Mobile]: Improving accessibility on Image Block (deselected) #14713

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
6326cfd
Adding accessibility properties to MediaPlaceholder and ImageEdit
etoledom Mar 29, 2019
6bf013d
Fix lint issues
etoledom Apr 1, 2019
2ab1249
Fix typo
etoledom Apr 2, 2019
578e508
Merge branch 'rnmobile/accessibility-mark-ii' of https://github.com/W…
etoledom Apr 2, 2019
4d7d23f
Better accessibility labels
etoledom Apr 3, 2019
7b89592
Disable lists. (#14844)
SergioEstevao Apr 5, 2019
928e5bb
Merge commit '7b89592' into rnmobile/accessibility-mark-ii
etoledom Apr 8, 2019
3f3428d
Merge branch 'master' into rnmobile/accessibility-mark-ii
etoledom Apr 22, 2019
14652d6
Fix scroll with VoiceOver ON.
etoledom Apr 9, 2019
ab14bf8
Setting accessibilityStates properly to avoid Android crash
etoledom Apr 10, 2019
048ffb7
Remove vscode settings file (added by mistake)
etoledom Apr 22, 2019
5070a34
Fix lint issues
etoledom Apr 22, 2019
a40896b
Update accessibility labels to use sprintf
etoledom Apr 23, 2019
2f7b128
Fix lint issues
etoledom Apr 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/block-editor/src/components/media-placeholder/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,12 @@ import styles from './styles.scss';

function MediaPlaceholder( props ) {
return (
<TouchableWithoutFeedback onPress={ props.onMediaOptionsPressed }>
<TouchableWithoutFeedback
accessibilityLabel={ __( 'Image block. Empty ' ) }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we can reuse the 'Image block' string here. Image block. Empty as a whole does not make much sense for translators:

accessibilityLabel={ __( 'Image block' ) + '. ' + __( 'Empty' ) }

accessibilityRole={ 'button' }
accessibilityHint={ __( 'Double tap to select an image' ) }
onPress={ props.onMediaOptionsPressed }
>
<View style={ styles.emptyStateContainer }>
<Dashicon icon={ 'format-image' } />
<Text style={ styles.emptyStateTitle }>
Expand Down
9 changes: 8 additions & 1 deletion packages/block-library/src/image/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,14 @@ class ImageEdit extends React.Component {
const progress = this.state.progress * 100;

return (
<TouchableWithoutFeedback onPress={ this.onImagePressed } disabled={ ! isSelected }>
<TouchableWithoutFeedback
accessible={ ! isSelected }
accessibilityLabel={ __( 'Image block' ) + '.' + alt }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It could use a space after the period:

__( 'Image block' ) + '. ' + alt

accessibilityRole={ 'button' }
accessibilityHint={ __( 'Doulbe tap to edit the image' ) }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doulbe => Double

onPress={ this.onImagePressed }
disabled={ ! isSelected }
>
<View style={ { flex: 1 } }>
{ showSpinner && <Spinner progress={ progress } /> }
<BlockControls>
Expand Down