New: output block position for screen readers. Update: refactor the way the screen reader information on block button is delivered.

packages/block-editor/src/components/block-list/block-selection-button.js

@@ -33,6 +33,7 @@ import { focus } from '@wordpress/dom';
  */
 import BlockTitle from '../block-title';
 import { store as blockEditorStore } from '../../store';
+import useBlockDisplayInformation from '../use-block-display-information';
 
 /**
  * Returns true if the user is using windows.
@@ -51,6 +52,7 @@ function selector( select ) {
 		getNextBlockClientId,
 		hasBlockMovingClientId,
 		getBlockIndex,
+		getBlockCount,
 		getBlockRootClientId,
 		getClientIdsOfDescendants,
 		canInsertBlockType,
@@ -70,6 +72,7 @@ function selector( select ) {
 		),
 		hasBlockMovingClientId,
 		getBlockIndex,
+		getBlockCount,
 		getBlockRootClientId,
 		getClientIdsOfDescendants,
 		canInsertBlockType,
@@ -93,25 +96,39 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 			const {
 				__unstableGetBlockWithoutInnerBlocks,
 				getBlockIndex,
+				getBlockCount,
 				hasBlockMovingClientId,
 				getBlockListSettings,
+				getBlockRootClientId,
 			} = select( blockEditorStore );
 			const index = getBlockIndex( clientId, rootClientId );
+			const total = getBlockCount( rootClientId );
+			const passedRootClientId = getBlockRootClientId( clientId );
 			const { name, attributes } = __unstableGetBlockWithoutInnerBlocks(
 				clientId
 			);
 			const blockMovingMode = hasBlockMovingClientId();
 			return {
 				index,
+				total,
 				name,
 				attributes,
 				blockMovingMode,
 				orientation: getBlockListSettings( rootClientId )?.orientation,
+				passedRootClientId,
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const { index, name, attributes, blockMovingMode, orientation } = selected;
+	const {
+		index,
+		total,
+		name,
+		attributes,
+		blockMovingMode,
+		orientation,
+		passedRootClientId,
+	} = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 	const ref = useRef();
 
@@ -242,11 +259,20 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 	}
 
 	const blockType = getBlockType( name );
+	let parentTitle;
+	const blockInformation = useBlockDisplayInformation( passedRootClientId );
+	if ( blockInformation !== null ) {
+		parentTitle = blockInformation.title
+			? blockInformation.title
+			: undefined;
+	}
 	const label = getAccessibleBlockLabel(
 		blockType,
 		attributes,
 		index + 1,
-		orientation
+		orientation,
+		total,
+		parentTitle
 	);
 
 	const classNames = classnames(
@@ -262,7 +288,7 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 				ref={ ref }
 				onClick={ () => setNavigationMode( false ) }
 				onKeyDown={ onKeyDown }
-				label={ label }
+				describedBy={ label }
 			>
 				<BlockTitle clientId={ clientId } />
 			</Button>

packages/block-editor/src/components/block-title/index.js

@@ -7,11 +7,14 @@ import { truncate } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
 import {
 	getBlockType,
 	__experimentalGetBlockLabel as getBlockLabel,
 	isReusableBlock,
 } from '@wordpress/blocks';
+import { VisuallyHidden } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -73,5 +76,14 @@ export default function BlockTitle( { clientId } ) {
 	if ( label !== blockType.title ) {
 		return truncate( label, { length: 35 } );
 	}
-	return blockInformation.title;
+	return createInterpolateElement(
+		sprintf(
+			/* translators: 1: The block title. */
+			__( '%s <VisuallyHidden>Block.</VisuallyHidden>' ),
+			blockInformation.title
+		),
+		{
+			VisuallyHidden: <VisuallyHidden as="span" />,
+		}
+	);
 }

packages/block-editor/src/components/block-title/test/index.js

@@ -92,7 +92,7 @@ describe( 'BlockTitle', () => {
 
 		const wrapper = shallow( <BlockTitle clientId="id-name-exists" /> );
 
-		expect( wrapper.text() ).toBe( 'Block Title' );
+		expect( wrapper.text() ).toBe( 'Block Title Block.' );
 	} );
 
 	it( 'renders label if it is set', () => {

packages/blocks/src/api/utils.js

@@ -161,19 +161,24 @@ export function getBlockLabel( blockType, attributes, context = 'visual' ) {
  * @param {Object}  attributes             The values of the block's attributes.
  * @param {?number} position               The position of the block in the block list.
  * @param {string}  [direction='vertical'] The direction of the block layout.
+ * @param {number} total The total number of blocks.
+ * @param {string} parentTitle In the event of a child block, this param gets the title of the parent block.
  *
  * @return {string} The block label.
  */
 export function getAccessibleBlockLabel(
 	blockType,
 	attributes,
 	position,
-	direction = 'vertical'
+	direction = 'vertical',
+	total,
+	parentTitle
 ) {
 	// `title` is already localized, `label` is a user-supplied value.
 	const { title } = blockType;
 	const label = getBlockLabel( blockType, attributes, 'accessibility' );
 	const hasPosition = position !== undefined;
+	const hasParentTitle = parentTitle !== undefined;
 
 	// getBlockLabel returns the block title as a fallback when there's no label,
 	// if it did return the title, this function needs to avoid adding the
@@ -184,53 +189,78 @@ export function getAccessibleBlockLabel(
 	if ( hasPosition && direction === 'vertical' ) {
 		if ( hasLabel ) {
 			return sprintf(
-				/* translators: accessibility text. 1: The block title. 2: The block row number. 3: The block label.. */
-				__( '%1$s Block. Row %2$d. %3$s' ),
-				title,
+				/* translators: accessibility text. 1: The block row number. 2: The total number of blocks. 3: The block label.. */
+				__( '%1$d of %2$d. %3$s' ),
 				position,
+				total,
+				label
+			);
+		} else if ( hasLabel && hasParentTitle ) {
+			return sprintf(
+				/* translators: accessibility text. 1: The block row number. 2: The total number of blocks. 3: The parent block title. 4: The block label.. */
+				__( '%1$d of %2$d. Child of %3$s block. %4$s' ),
+				position,
+				total,
+				parentTitle,
 				label
 			);
 		}
 
+		if ( hasParentTitle ) {
+			return sprintf(
+				/* translators: accessibility text. 1: The block row number. 2: The total number of blocks. 3: The parent block title. */
+				__( '%1$d of %2$d. Child of %3$s block.' ),
+				position,
+				total,
+				parentTitle
+			);
+		}
 		return sprintf(
-			/* translators: accessibility text. 1: The block title. 2: The block row number. */
-			__( '%1$s Block. Row %2$d' ),
-			title,
-			position
+			/* translators: accessibility text. 1: The block row number. 2: The total number of blocks. */
+			__( '%1$d of %2$d.' ),
+			position,
+			total
 		);
 	} else if ( hasPosition && direction === 'horizontal' ) {
 		if ( hasLabel ) {
 			return sprintf(
-				/* translators: accessibility text. 1: The block title. 2: The block column number. 3: The block label.. */
-				__( '%1$s Block. Column %2$d. %3$s' ),
-				title,
+				/* translators: accessibility text. 1: The block column number. 2: The total number of blocks. 3: The block label.. */
+				__( 'Column %1$d of %2$d. %4$s' ),
+				position,
+				total,
+				label
+			);
+		} else if ( hasLabel && hasParentTitle ) {
+			return sprintf(
+				/* translators: accessibility text. 1: The block column number. 2: The total number of blocks. 3: The block parent title. 4: The block label.. */
+				__( 'Column %1$d of %2$d. Child of %3$s block. %4$s' ),
 				position,
+				total,
+				parentTitle,
 				label
 			);
 		}
 
+		if ( hasParentTitle ) {
+			return sprintf(
+				/* translators: accessibility text. 1: The block column number. 2: The total number of blocks. 3: The block parent title. */
+				__( 'Column %1$d of %2$d. Child of %3$s block.' ),
+				position,
+				total,
+				parentTitle
+			);
+		}
 		return sprintf(
-			/* translators: accessibility text. 1: The block title. 2: The block column number. */
-			__( '%1$s Block. Column %2$d' ),
-			title,
-			position
+			/* translators: accessibility text. 1: The block column number. 2: The total number of blocks. */
+			__( 'Column %1$d of %2$d.' ),
+			position,
+			total
 		);
 	}
 
 	if ( hasLabel ) {
-		return sprintf(
-			/* translators: accessibility text. %1: The block title. %2: The block label. */
-			__( '%1$s Block. %2$s' ),
-			title,
-			label
-		);
+		return sprintf( '%1$s', label );
 	}
-
-	return sprintf(
-		/* translators: accessibility text. %s: The block title. */
-		__( '%s Block' ),
-		title
-	);
 }
 
 /**