Improve accessibility on missing block (#15457)

* Improve accessibility on missing block * Update packages/block-library/src/missing/edit.native.js Co-Authored-By: koke <[email protected]> * Remove unnecessary dot for accessibility label Co-Authored-By: koke <[email protected]>
WordPress · May 10, 2019 · 94d48e0 · 94d48e0
1 parent 5746ac3
commit 94d48e0
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js
@@ -10,7 +10,7 @@ import { Icon } from '@wordpress/components';
 import { coreBlocks } from '@wordpress/block-library';
 import { normalizeIconObject } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,7 +25,20 @@ export default class UnsupportedBlockEdit extends Component {
 		const icon = blockType ? normalizeIconObject( blockType.settings.icon ) : 'admin-plugins';
 
 		return (
-			<View style={ styles.unsupportedBlock }>
+			<View style={ styles.unsupportedBlock }
+				accessible={ true }
+				accessibilityLabel={
+					blockType ?
+						sprintf(
+							/* translators: accessibility text. %s: unsupported block type. */
+							__( 'Unsupported block: %s' ),
+							title
+						) :
+						/* translators: accessibility text. */
+						__( 'Unsupported block' )
+				}
+				onAccessibilityTap={ this.props.onFocus }
+			>
 				<Icon className="unsupported-icon" icon={ icon && icon.src ? icon.src : icon } />
 				<Text style={ styles.unsupportedBlockMessage }>{ title }</Text>
 			</View>