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

@@ -56,6 +56,7 @@ function selector( select ) {
 		getNextBlockClientId,
 		hasBlockMovingClientId,
 		getBlockIndex,
+		getBlockCount,
 		getBlockRootClientId,
 		getClientIdsOfDescendants,
 		canInsertBlockType,
@@ -75,6 +76,7 @@ function selector( select ) {
 		),
 		hasBlockMovingClientId,
 		getBlockIndex,
+		getBlockCount,
 		getBlockRootClientId,
 		getClientIdsOfDescendants,
 		canInsertBlockType,
@@ -99,25 +101,39 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 			const {
 				__unstableGetBlockWithoutInnerBlocks,
 				getBlockIndex,
+				getBlockCount,
 				hasBlockMovingClientId,
 				getBlockListSettings,
+				getBlockRootClientId,
 			} = select( blockEditorStore );
 			const index = getBlockIndex( clientId, rootClientId );
+			const blocksTotal = getBlockCount( rootClientId );
+			const passedRootClientId = getBlockRootClientId( clientId );
 			const { name, attributes } = __unstableGetBlockWithoutInnerBlocks(
 				clientId
 			);
 			const blockMovingMode = hasBlockMovingClientId();
 			return {
 				index,
+				blocksTotal,
 				name,
 				attributes,
 				blockMovingMode,
 				orientation: getBlockListSettings( rootClientId )?.orientation,
+				passedRootClientId,
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const { index, name, attributes, blockMovingMode, orientation } = selected;
+	const {
+		index,
+		blocksTotal,
+		name,
+		attributes,
+		blockMovingMode,
+		orientation,
+		passedRootClientId,
+	} = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 	const ref = useRef();
 
@@ -248,11 +264,22 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 	}
 
 	const blockType = getBlockType( name );
+	let parentTitle;
+	const blockInformationRoot = useBlockDisplayInformation(
+		passedRootClientId
+	);
+	if ( blockInformationRoot !== null ) {
+		parentTitle = blockInformationRoot.title
+			? blockInformationRoot.title
+			: undefined;
+	}
 	const label = getAccessibleBlockLabel(
 		blockType,
 		attributes,
 		index + 1,
-		orientation
+		orientation,
+		blocksTotal,
+		parentTitle
 	);
 
 	const classNames = classnames(
@@ -294,7 +321,7 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 						ref={ ref }
 						onClick={ () => setNavigationMode( false ) }
 						onKeyDown={ onKeyDown }
-						label={ label }
+						describedBy={ label }
 						className="block-selection-button_select-button"
 					>
 						<BlockTitle clientId={ clientId } />

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} blocksTotal 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',
+	blocksTotal,
+	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
@@ -183,54 +188,94 @@ export function getAccessibleBlockLabel(
 
 	if ( hasPosition && direction === 'vertical' ) {
 		if ( hasLabel ) {
+			if ( hasParentTitle ) {
+				return sprintf(
+					/* translators: accessibility text. 1: The block title. 2: The block row number. 3: The total number of blocks. 4: The parent block title. 5: The block label.. */
+					__( '%1$s Block. %2$d of %3$d. Child of %4$s Block. %5$s' ),
+					title,
+					position,
+					blocksTotal,
+					parentTitle,
+					label
+				);
+			}
 			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' ),
+				/* translators: accessibility text. 1: The block title. 2: The block row number. 3: The total number of blocks. 4: The block label.. */
+				__( '%1$s Block. %2$d of %3$d. %4$s' ),
 				title,
 				position,
+				blocksTotal,
 				label
 			);
 		}
 
+		if ( hasParentTitle ) {
+			return sprintf(
+				/* translators: accessibility text. 1: The block title. 2: The block row number. 3: The total number of blocks. 4: The parent block title. */
+				__( '%1$s Block. %2$d of %3$d. Child of %4$s Block.' ),
+				title,
+				position,
+				blocksTotal,
+				parentTitle
+			);
+		}
 		return sprintf(
-			/* translators: accessibility text. 1: The block title. 2: The block row number. */
-			__( '%1$s Block. Row %2$d' ),
+			/* translators: accessibility text. 1: The block title. 2: The block row number. 3: The total number of blocks. */
+			__( '%1$s Block. %2$d of %3$d.' ),
 			title,
-			position
+			position,
+			blocksTotal
 		);
 	} else if ( hasPosition && direction === 'horizontal' ) {
 		if ( hasLabel ) {
+			if ( hasParentTitle ) {
+				return sprintf(
+					/* translators: accessibility text. 1: The block title. 2: The block column number. 3: The total number of blocks. 4: The block parent title. 5: The block label.. */
+					__( '%1$s Block. Column %2$d of %3$d. Child of %4$s Block. %5$s' ),
+					title,
+					position,
+					blocksTotal,
+					parentTitle,
+					label
+				);
+			}
 			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' ),
+				/* translators: accessibility text. 1: The block title. 2: The block column number. 3: The total number of blocks. 4: The block label.. */
+				__( '%1$s Block. Column %2$d of %3$d. %4$s' ),
 				title,
 				position,
+				blocksTotal,
 				label
 			);
 		}
 
+		if ( hasParentTitle ) {
+			return sprintf(
+				/* translators: accessibility text. 1: The block title. 2: The block column number. 3: The total number of blocks. 4: The block parent title. */
+				__( '%1$s Block. Column %2$d of %3$d. Child of %4$s Block.' ),
+				title,
+				position,
+				blocksTotal,
+				parentTitle
+			);
+		}
 		return sprintf(
-			/* translators: accessibility text. 1: The block title. 2: The block column number. */
-			__( '%1$s Block. Column %2$d' ),
+			/* translators: accessibility text. 1: The block title. 2: The block column number. 3: The total number of blocks. */
+			__( '%1$s Block. Column %2$d of %3$d.' ),
 			title,
-			position
+			position,
+			blocksTotal
 		);
 	}
 
 	if ( hasLabel ) {
 		return sprintf(
-			/* translators: accessibility text. %1: The block title. %2: The block label. */
+			/* translators: 1: The block title. 2: The block label. */
 			__( '%1$s Block. %2$s' ),
 			title,
 			label
 		);
 	}
-
-	return sprintf(
-		/* translators: accessibility text. %s: The block title. */
-		__( '%s Block' ),
-		title
-	);
 }
 
 /**