List view: add "position" information to the block accessible descrip…

…tion text
WordPress · Jul 23, 2024 · 10d9b71 · 10d9b71
1 parent ceecbec
commit 10d9b71
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -465,8 +465,10 @@ function ListViewBlock( {
 		level
 	);
 
-	const blockPropertiesDescription =
-		getBlockPropertiesDescription( isLocked );
+	const blockPropertiesDescription = getBlockPropertiesDescription(
+		blockInformation,
+		isLocked
+	);
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -562,7 +564,12 @@ function ListViewBlock( {
 							ariaDescribedBy={ descriptionId }
 						/>
 						<AriaReferencedText id={ descriptionId }>
-							{ `${ blockPositionDescription } ${ blockPropertiesDescription }` }
+							{ [
+								blockPositionDescription,
+								blockPropertiesDescription,
+							]
+								.filter( Boolean )
+								.join( ' ' ) }
 						</AriaReferencedText>
 					</div>
 				) }

diff --git a/packages/block-editor/src/components/list-view/utils.js b/packages/block-editor/src/components/list-view/utils.js
@@ -13,8 +13,19 @@ export const getBlockPositionDescription = ( position, siblingCount, level ) =>
 		level
 	);
 
-export const getBlockPropertiesDescription = ( isLocked ) =>
-	isLocked ? __( 'This block is locked.' ) : '';
+export const getBlockPropertiesDescription = ( blockInformation, isLocked ) =>
+	[
+		blockInformation?.positionLabel
+			? `${ sprintf(
+					// translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
+					__( 'Position: %1$s' ),
+					blockInformation.positionLabel
+			  ) }.`
+			: undefined,
+		isLocked ? __( 'This block is locked.' ) : undefined,
+	]
+		.filter( Boolean )
+		.join( ' ' );
 
 /**
  * Returns true if the client ID occurs within the block selection or multi-selection,