Move mobile accessibility labels to be cross-platform

packages/block-library/src/heading/index.js

@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -31,6 +36,24 @@ export const settings = {
 			level: 2,
 		},
 	},
+	__experimentalLabel( attributes, { context } ) {
+		if ( context === 'accessibility' ) {
+			const { content, level } = attributes;
+
+			return isEmpty( content ) ?
+				sprintf(
+					/* translators: accessibility text. %s: heading level. */
+					__( 'Level %s. Empty.' ),
+					level
+				) :
+				sprintf(
+					/* translators: accessibility text. 1: heading level. 2: heading content. */
+					__( 'Level %1$s. %2$s' ),
+					level,
+					content
+				);
+		}
+	},
 	transforms,
 	deprecated,
 	merge( attributes, attributesToMerge ) {

packages/block-library/src/image/index.js

@@ -37,6 +37,23 @@ export const settings = {
 		{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
 		{ name: 'circle-mask', label: _x( 'Circle Mask', 'block style' ) },
 	],
+	__experimentalLabel( attributes, { context } ) {
+		if ( context === 'accessibility' ) {
+			const { caption, alt, url } = attributes;
+
+			if ( ! url ) {
+				return __( 'Empty' );
+			}
+
+			if ( ! alt ) {
+				return caption || '';
+			}
+
+			// This is intended to be read by a screen reader.
+			// A period simply means a pause, no need to translate it.
+			return alt + ( caption ? '. ' + caption : '' );
+		}
+	},
 	transforms,
 	getEditWrapperProps( attributes ) {
 		const { align, width } = attributes;

packages/block-library/src/missing/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -25,6 +26,19 @@ export const settings = {
 		html: false,
 		reusable: false,
 	},
+	__experimentalLabel( attributes, { context } ) {
+		if ( context === 'accessibility' ) {
+			const { originalName } = attributes;
+
+			const originalBlockType = originalName ? getBlockType( originalName ) : undefined;
+
+			if ( originalBlockType ) {
+				return originalBlockType.settings.title || originalName;
+			}
+
+			return '';
+		}
+	},
 	edit,
 	save,
 };

packages/block-library/src/more/index.js

@@ -27,6 +27,11 @@ export const settings = {
 		multiple: false,
 	},
 	example: {},
+	__experimentalLabel( attributes, { context } ) {
+		if ( context === 'accessibility' ) {
+			return attributes.customText;
+		}
+	},
 	transforms,
 	edit,
 	save,

packages/block-library/src/paragraph/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -32,6 +37,12 @@ export const settings = {
 	supports: {
 		className: false,
 	},
+	__experimentalLabel( attributes, { context } ) {
+		if ( context === 'accessibility' ) {
+			const { content } = attributes;
+			return isEmpty( content ) ? __( 'Empty' ) : content;
+		}
+	},
 	transforms,
 	deprecated,
 	merge( attributes, attributesToMerge ) {