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

* Adding accessibility properties to MediaPlaceholder and ImageEdit * Fix lint issues * Fix typo * Better accessibility labels * Disable lists. (#14844) * Fix scroll with VoiceOver ON. For some reason, VoiceOver wouldn't scroll down the block list. The breaking change was located at the removal of this css property `font-family: $default-regular-font;` on the nextpage block. Addinb back that property to be able to scroll the blocks list again using VoiceOver. * Setting accessibilityStates properly to avoid Android crash * Remove vscode settings file (added by mistake) * Fix lint issues * Update accessibility labels to use sprintf * Fix lint issues
WordPress · May 2, 2019 · 6059581 · 6059581
1 parent 72b7e5e
commit 6059581
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 14 deletions.
diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js
@@ -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';
 
 /**
@@ -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 }>

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -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';
 
@@ -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>

diff --git a/packages/block-library/src/nextpage/edit.native.js b/packages/block-library/src/nextpage/edit.native.js
@@ -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',
-	};
+	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>
 	);

diff --git a/packages/block-library/src/nextpage/editor.native.scss b/packages/block-library/src/nextpage/editor.native.scss
@@ -7,6 +7,7 @@
 
 .block-library-nextpage__text {
 	color: $gray;
+	font-family: $default-regular-font;
 	text-decoration-style: solid;
 	text-transform: uppercase;
 }