Improve the various Alignment controls props handling

packages/block-editor/src/components/alignment-control/ui.js

@@ -31,8 +31,8 @@ function AlignmentUI( {
 	value,
 	onChange,
 	alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
-	label = __( 'Align text' ),
-	description = __( 'Change text alignment' ),
+	label = __( 'Align block' ),
+	description,
 	isCollapsed = true,
 	isToolbar,
 } ) {
@@ -55,9 +55,7 @@ function AlignmentUI( {
 	const extraProps = isToolbar
 		? { isCollapsed }
 		: {
-				toggleProps: {
-					description,
-				},
+				toggleProps: description ? { description } : {},
 				popoverProps: POPOVER_PROPS,
 		  };
 

packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap

@@ -9,7 +9,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-label="Align"
+      aria-label="Align block"
       class="components-button components-dropdown-menu__toggle has-icon"
       data-toolbar-item="true"
       type="button"
@@ -36,7 +36,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Align"
+    label="Align block"
   >
     <div>
       <button

packages/block-editor/src/components/block-alignment-control/test/index.js

@@ -61,7 +61,7 @@ describe( 'BlockAlignmentUI', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Align',
+				name: 'Align block',
 			} )
 		);
 

packages/block-editor/src/components/block-alignment-control/ui.js

@@ -26,6 +26,8 @@ function BlockAlignmentUI( {
 	controls,
 	isToolbar,
 	isCollapsed = true,
+	label = __( 'Align block' ),
+	description,
 } ) {
 	const enabledControls = useAvailableAlignments( controls );
 	const hasEnabledControls = !! enabledControls.length;
@@ -47,7 +49,7 @@ function BlockAlignmentUI( {
 		icon: activeAlignmentControl
 			? activeAlignmentControl.icon
 			: defaultAlignmentControl.icon,
-		label: __( 'Align' ),
+		label,
 	};
 	const extraProps = isToolbar
 		? {
@@ -64,7 +66,9 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
-				toggleProps: { description: __( 'Change alignment' ) },
+				toggleProps: description
+					? { 'aria-description': description }
+					: {},
 				children: ( { onClose } ) => {
 					return (
 						<>

packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap

@@ -9,7 +9,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are hidden
     <button
       aria-expanded="false"
       aria-haspopup="true"
-      aria-label="Change vertical alignment"
+      aria-label="Align content vertically"
       class="components-button components-dropdown-menu__toggle has-icon"
       data-toolbar-item="true"
       type="button"
@@ -36,7 +36,7 @@ exports[`BlockVerticalAlignmentUI should match snapshot when controls are visibl
   <div
     class="components-toolbar"
     icon="[object Object]"
-    label="Change vertical alignment"
+    label="Align content vertically"
   >
     <div>
       <button

packages/block-editor/src/components/block-vertical-alignment-control/test/index.js

@@ -40,6 +40,22 @@ describe( 'BlockVerticalAlignmentUI', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
+	test( 'should use custom label and description', () => {
+		render(
+			<BlockVerticalAlignmentUI
+				value={ alignment }
+				onChange={ onChange }
+				label="Custom Label"
+				description="Custom Description"
+			/>
+		);
+
+		const button = screen.getByRole( 'button', { name: 'Custom Label' } );
+		expect( button ).toHaveAttribute( 'aria-label', 'Custom Label' );
+		// The description is now part of the toggleProps and not directly accessible
+		// We can't easily test for the describedBy attribute here
+	} );
+
 	test( 'should expand controls when toggled', async () => {
 		const user = userEvent.setup();
 
@@ -59,7 +75,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Change vertical alignment',
+				name: 'Align content vertically',
 			} )
 		);
 
@@ -86,7 +102,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 		);
 
 		const activeControl = screen.getByRole( 'button', {
-			name: `Align ${ alignment }`,
+			name: `Align top`,
 			pressed: true,
 		} );
 

packages/block-editor/src/components/block-vertical-alignment-control/ui.js

@@ -43,6 +43,11 @@ function BlockVerticalAlignmentUI( {
 	controls = DEFAULT_CONTROLS,
 	isCollapsed = true,
 	isToolbar,
+	label = _x(
+		'Align content vertically',
+		'Block vertical alignment setting label'
+	),
+	description,
 } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
@@ -53,30 +58,33 @@ function BlockVerticalAlignmentUI( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar ? { isCollapsed } : {};
+	const extraProps = isToolbar
+		? { isCollapsed }
+		: {
+				popoverProps: { focusOnMount: 'firstElement' },
+				toggleProps: description
+					? {
+							describedBy: description,
+					  }
+					: {},
+		  };
 
-	return (
-		<UIComponent
-			icon={
-				activeAlignment
-					? activeAlignment.icon
-					: defaultAlignmentControl.icon
-			}
-			label={ _x(
-				'Change vertical alignment',
-				'Block vertical alignment setting label'
-			) }
-			controls={ controls.map( ( control ) => {
-				return {
-					...BLOCK_ALIGNMENTS_CONTROLS[ control ],
-					isActive: value === control,
-					role: isCollapsed ? 'menuitemradio' : undefined,
-					onClick: applyOrUnset( control ),
-				};
-			} ) }
-			{ ...extraProps }
-		/>
-	);
+	const commonProps = {
+		icon: activeAlignment
+			? activeAlignment.icon
+			: defaultAlignmentControl.icon,
+		label,
+		controls: controls.map( ( control ) => {
+			return {
+				...BLOCK_ALIGNMENTS_CONTROLS[ control ],
+				isActive: value === control,
+				role: isCollapsed ? 'menuitemradio' : undefined,
+				onClick: applyOrUnset( control ),
+			};
+		} ),
+	};
+
+	return <UIComponent { ...commonProps } { ...extraProps } />;
 }
 
 /**

packages/block-library/src/columns/test/edit.native.js

@@ -259,9 +259,7 @@ describe( 'Columns block', () => {
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByLabelText(
-			/Change vertical alignment/
-		);
+		const verticalAlignmentButton = getByLabelText( /Align vertically/ );
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
@@ -281,9 +279,8 @@ describe( 'Columns block', () => {
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = screen.getByLabelText(
-			/Change vertical alignment/
-		);
+		const verticalAlignmentButton =
+			screen.getByLabelText( /Align vertically/ );
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
@@ -320,9 +317,7 @@ describe( 'Columns block', () => {
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByLabelText(
-			/Change vertical alignment/
-		);
+		const verticalAlignmentButton = getByLabelText( /Align vertically/ );
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button

packages/block-library/src/image/block.json

@@ -4,7 +4,14 @@
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
-	"usesContext": [ "allowResize", "imageCrop", "fixedHeight", "postId", "postType", "queryId" ],
+	"usesContext": [
+		"allowResize",
+		"imageCrop",
+		"fixedHeight",
+		"postId",
+		"postType",
+		"queryId"
+	],
 	"description": "Insert an image to make a visual statement.",
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",

packages/block-library/src/media-text/edit.js

@@ -468,6 +468,7 @@ function MediaTextEdit( {
 						<BlockVerticalAlignmentControl
 							onChange={ onVerticalAlignmentChange }
 							value={ verticalAlignment }
+							label={ __( 'Align media and text vertically' ) }
 						/>
 						<ToolbarButton
 							icon={ pullLeft }

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

@@ -146,6 +146,7 @@ function ParagraphBlock( {
 									: dropCap,
 							} )
 						}
+						label={ __( 'Align text' ) }
 					/>
 					<ParagraphRTLControl
 						direction={ direction }

packages/block-library/src/post-content/block.json

@@ -69,4 +69,4 @@
 	},
 	"style": "wp-block-post-content",
 	"editorStyle": "wp-block-post-content-editor"
-}
+}

packages/block-library/src/table/edit.js

@@ -459,7 +459,7 @@ function TableEdit( {
 				<>
 					<BlockControls group="block">
 						<AlignmentControl
-							label={ __( 'Change column alignment' ) }
+							label={ __( 'Align columns content' ) }
 							alignmentControls={ ALIGNMENT_CONTROLS }
 							value={ getCellAlignment() }
 							onChange={ ( nextAlign ) =>