From f0fbfa9bcab12cd7c8c051320feac93caf515b54 Mon Sep 17 00:00:00 2001
From: Dhananjay Kuber <dhananjay.kuber@rtcamp.com>
Date: Mon, 6 Jan 2025 18:46:07 +0530
Subject: [PATCH] fix: Update alignment control labels and remove default
 description for clear labels

---
 .../src/components/alignment-control/ui.js       |  8 +++-----
 .../src/components/block-alignment-control/ui.js |  6 ++++--
 .../test/__snapshots__/index.js.snap             |  4 ++--
 .../test/index.js                                |  2 +-
 .../block-vertical-alignment-control/ui.js       | 16 +++++++++-------
 packages/block-library/src/media-text/edit.js    |  4 +---
 packages/block-library/src/paragraph/edit.js     |  4 +---
 packages/block-library/src/table/edit.js         |  5 +----
 8 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/packages/block-editor/src/components/alignment-control/ui.js b/packages/block-editor/src/components/alignment-control/ui.js
index 6b423a79aa9e06..b2bdf0b14928e0 100644
--- a/packages/block-editor/src/components/alignment-control/ui.js
+++ b/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,
 		  };
 
diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js
index 0e977c4e12c2fe..b5cdb64ad1ef05 100644
--- a/packages/block-editor/src/components/block-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -27,7 +27,7 @@ function BlockAlignmentUI( {
 	isToolbar,
 	isCollapsed = true,
 	label = __( 'Align block' ),
-	description = __( 'Change block alignment' ),
+	description,
 } ) {
 	const enabledControls = useAvailableAlignments( controls );
 	const hasEnabledControls = !! enabledControls.length;
@@ -66,7 +66,9 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
-				toggleProps: { 'aria-description': description },
+				toggleProps: description
+					? { 'aria-description': description }
+					: {},
 				children: ( { onClose } ) => {
 					return (
 						<>
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap
index 335cc8761c13a0..67701b424be2ce 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap
+++ b/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="Align vertically"
+      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="Align vertically"
+    label="Align content vertically"
   >
     <div>
       <button
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js b/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
index 93c417649db88e..cf89bc89629cf6 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
@@ -75,7 +75,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Align vertically',
+				name: 'Align content vertically',
 			} )
 		);
 
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
index 45f75ad83afbb2..242ba91a1d3510 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
@@ -43,11 +43,11 @@ function BlockVerticalAlignmentUI( {
 	controls = DEFAULT_CONTROLS,
 	isCollapsed = true,
 	isToolbar,
-	label = _x( 'Align vertically', 'Block vertical alignment setting label' ),
-	description = _x(
-		'Change vertical alignment',
-		'Block vertical alignment setting description'
+	label = _x(
+		'Align content vertically',
+		'Block vertical alignment setting label'
 	),
+	description,
 } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
@@ -62,9 +62,11 @@ function BlockVerticalAlignmentUI( {
 		? { isCollapsed }
 		: {
 				popoverProps: { focusOnMount: 'firstElement' },
-				toggleProps: {
-					describedBy: description,
-				},
+				toggleProps: description
+					? {
+							describedBy: description,
+					  }
+					: {},
 		  };
 
 	const commonProps = {
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index f74c458b09fce7..78cb9686ecced3 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -468,9 +468,7 @@ function MediaTextEdit( {
 						<BlockVerticalAlignmentControl
 							onChange={ onVerticalAlignmentChange }
 							value={ verticalAlignment }
-							description={ __(
-								'Adjust the vertical alignment of content within the block'
-							) }
+							label={ __( 'Align media and text vertically' ) }
 						/>
 						<ToolbarButton
 							icon={ pullLeft }
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index b4cfe58c334b18..aadc6e44972135 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -146,9 +146,7 @@ function ParagraphBlock( {
 									: dropCap,
 							} )
 						}
-						description={ __(
-							'Adjust the alignment of text within the paragraph'
-						) }
+						label={ __( 'Align text' ) }
 					/>
 					<ParagraphRTLControl
 						direction={ direction }
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index 1697e03e5fbb6e..53b155e89411c8 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -459,10 +459,7 @@ function TableEdit( {
 				<>
 					<BlockControls group="block">
 						<AlignmentControl
-							label={ __( 'Change column alignment' ) }
-							description={ __(
-								'Adjust the alignment of content within table columns'
-							) }
+							label={ __( 'Align columns content' ) }
 							alignmentControls={ ALIGNMENT_CONTROLS }
 							value={ getCellAlignment() }
 							onChange={ ( nextAlign ) =>