Skip to content

Commit

Permalink
[Mobile]Improve accessibility on image block selected state (#15122)
Browse files Browse the repository at this point in the history
* Enhance accessibility on toolbar buttons

* Add accessibilityLabel for Image

* Add accessibility on caption

* Remove unnecessary hints

* Update accessibility labels

* Remove unnecessary hint
  • Loading branch information
pinarol authored Apr 24, 2019
1 parent 4ac1b71 commit 9db86a8
Showing 1 changed file with 13 additions and 6 deletions.
19 changes: 13 additions & 6 deletions packages/block-library/src/image/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
requestImageFailedRetryDialog,
requestImageUploadCancelDialog,
} from 'react-native-gutenberg-bridge';
import { isEmpty } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -31,7 +32,7 @@ import {
BottomSheet,
Picker,
} from '@wordpress/block-editor';
import { __, sprintf } from '@wordpress/i18n';
import { __ } from '@wordpress/i18n';
import { isURL } from '@wordpress/url';
import { doAction, hasAction } from '@wordpress/hooks';

Expand Down Expand Up @@ -254,7 +255,7 @@ class ImageEdit extends React.Component {
const toolbarEditButton = (
<Toolbar>
<ToolbarButton
label={ __( 'Edit image' ) }
title={ __( 'Edit image' ) }
icon="edit"
onClick={ onMediaOptionsButtonPressed }
/>
Expand Down Expand Up @@ -330,9 +331,8 @@ class ImageEdit extends React.Component {
return (
<TouchableWithoutFeedback
accessible={ ! isSelected }
accessibilityLabel={ sprintf( '%s%s %s', __( 'Image block' ), __( '.' ), alt ) }
accessibilityLabel={ __( 'Image block' ) + __( '.' ) + ' ' + alt + __( '.' ) + ' ' + caption }
accessibilityRole={ 'button' }
accessibilityHint={ __( 'Double tap to edit the image' ) }
onPress={ this.onImagePressed }
disabled={ ! isSelected }
>
Expand All @@ -343,7 +343,7 @@ class ImageEdit extends React.Component {
</BlockControls>
<InspectorControls>
<ToolbarButton
label={ __( 'Image Settings' ) }
title={ __( 'Image Settings' ) }
icon="admin-generic"
onClick={ onImageSettingsButtonPressed }
/>
Expand Down Expand Up @@ -377,6 +377,8 @@ class ImageEdit extends React.Component {
resizeMethod="scale"
source={ { uri: url } }
key={ url }
accessible={ true }
accessibilityLabel={ alt }
>
{ this.state.isUploadFailed &&
<View style={ styles.imageContainer } >
Expand All @@ -390,7 +392,12 @@ class ImageEdit extends React.Component {
} }
</ImageSize>
{ ( ! RichText.isEmpty( caption ) > 0 || isSelected ) && (
<View style={ { padding: 12, flex: 1 } }>
<View
style={ { padding: 12, flex: 1 } }
accessible={ true }
accessibilityLabel={ __( 'Image caption' ) + __( '.' ) + ' ' + ( isEmpty( caption ) ? __( 'Empty' ) : caption ) }
accessibilityRole={ 'button' }
>
<TextInput
style={ { textAlign: 'center' } }
fontFamily={ this.props.fontFamily || ( styles[ 'caption-text' ].fontFamily ) }
Expand Down

0 comments on commit 9db86a8

Please sign in to comment.