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

[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 all 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
9 changes: 7 additions & 2 deletions 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 @@ -6,7 +6,7 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import { Dashicon } from '@wordpress/components';

/**
Expand All @@ -16,7 +16,12 @@ import styles from './styles.scss';

function MediaPlaceholder( props ) {
return (
<TouchableWithoutFeedback onPress={ props.onMediaOptionsPressed }>
<TouchableWithoutFeedback
accessibilityLabel={ sprintf( '%s%s %s', __( '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
11 changes: 9 additions & 2 deletions 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 @@ -31,7 +31,7 @@ import {
BottomSheet,
Picker,
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import { isURL } from '@wordpress/url';
import { doAction, hasAction } from '@wordpress/hooks';

Expand Down Expand Up @@ -328,7 +328,14 @@ class ImageEdit extends React.Component {
const progress = this.state.progress * 100;

return (
<TouchableWithoutFeedback onPress={ this.onImagePressed } disabled={ ! isSelected }>
<TouchableWithoutFeedback
accessible={ ! isSelected }
accessibilityLabel={ sprintf( '%s%s %s', __( 'Image block' ), __( '.' ), alt ) }
accessibilityRole={ 'button' }
accessibilityHint={ __( 'Double tap to edit the image' ) }
onPress={ this.onImagePressed }
disabled={ ! isSelected }
>
<View style={ { flex: 1 } }>
{ showSpinner && <Spinner progress={ progress } /> }
<BlockControls>
Expand Down
21 changes: 11 additions & 10 deletions packages/block-library/src/nextpage/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,27 @@ import Hr from 'react-native-hr';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import styles from './editor.scss';

export default function NextPageEdit( { attributes } ) {
export default function NextPageEdit( { attributes, isSelected, onFocus } ) {
const { customText = __( 'Page break' ) } = attributes;
// Setting the font here to keep the CSS linter happy, it was demanding a syntax
// that React Native wasn't able to handle (adding a fallback generic font family).
const textStyle = {
...styles[ 'block-library-nextpage__text' ],
fontFamily: 'System',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was creating an issue that disabled scrolling with VoiceOver active.
I'm not sure the specific reason, but rolling back this change fixed the issue.

};
const accessibilityTitle = attributes.customText || '';
const accessibilityState = isSelected ? [ 'selected' ] : [];

return (
<View style={ styles[ 'block-library-nextpage__container' ] }>
<View
accessible
accessibilityLabel={ sprintf( '%s%s %s', __( 'Page break block' ), __( '.' ), accessibilityTitle ) }
accessibilityStates={ accessibilityState }
onAccessibilityTap={ onFocus }
>
<Hr text={ customText }
textStyle={ textStyle }
textStyle={ styles[ 'block-library-nextpage__text' ] }
lineStyle={ styles[ 'block-library-nextpage__line' ] } />
</View>
);
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/nextpage/editor.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

.block-library-nextpage__text {
color: $gray;
font-family: $default-regular-font;
text-decoration-style: solid;
text-transform: uppercase;
}