From ec0c51ed8cc13ff96f5f77915630ecbc16030e60 Mon Sep 17 00:00:00 2001
From: dhananjaykuber <dnkuber2002@gmail.com>
Date: Thu, 18 Jul 2024 15:16:00 +0530
Subject: [PATCH 1/7] add label and description props and update default label
 of block alignment control

---
 .../src/components/block-alignment-control/ui.js           | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

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 87c5c7b0275a22..22587e5fde22c4 100644
--- a/packages/block-editor/src/components/block-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -26,6 +26,8 @@ function BlockAlignmentUI( {
 	controls,
 	isToolbar,
 	isCollapsed = true,
+	label = __( 'Align block' ),
+	description = __( 'Change block alignment' ),
 } ) {
 	const enabledControls = useAvailableAlignments( controls );
 	const hasEnabledControls = !! enabledControls.length;
@@ -47,7 +49,8 @@ function BlockAlignmentUI( {
 		icon: activeAlignmentControl
 			? activeAlignmentControl.icon
 			: defaultAlignmentControl.icon,
-		label: __( 'Align' ),
+		label,
+		describedBy: description,
 	};
 	const extraProps = isToolbar
 		? {
@@ -64,7 +67,7 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
-				toggleProps: { description: __( 'Change alignment' ) },
+				toggleProps: { describedBy: description },
 				children: ( { onClose } ) => {
 					return (
 						<>

From 9b9e8a0dfd820cb175c7af406af3df0cfe59ad56 Mon Sep 17 00:00:00 2001
From: dhananjaykuber <dnkuber2002@gmail.com>
Date: Thu, 18 Jul 2024 15:16:53 +0530
Subject: [PATCH 2/7] add label and description props to block vertical
 alignment control

---
 .../block-vertical-alignment-control/ui.js        | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

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 d1cacadf0cc49c..ddded6f118e11a 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
@@ -47,6 +47,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'
+	),
 } ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
@@ -57,7 +62,9 @@ function BlockVerticalAlignmentUI( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar ? { isCollapsed } : {};
+	const extraProps = isToolbar
+		? { isCollapsed }
+		: { toggleProps: { describedBy: description } };
 
 	return (
 		<UIComponent
@@ -66,10 +73,8 @@ function BlockVerticalAlignmentUI( {
 					? activeAlignment.icon
 					: defaultAlignmentControl.icon
 			}
-			label={ _x(
-				'Change vertical alignment',
-				'Block vertical alignment setting label'
-			) }
+			label={ label }
+			describedBy={ description }
 			controls={ controls.map( ( control ) => {
 				return {
 					...BLOCK_ALIGNMENTS_CONTROLS[ control ],

From fdb177ccff93d109b042af94f6fd41131a3bb4ec Mon Sep 17 00:00:00 2001
From: dhananjaykuber <dnkuber2002@gmail.com>
Date: Thu, 18 Jul 2024 15:18:15 +0530
Subject: [PATCH 3/7] update aria-description of media, paragraph and table
 block

---
 packages/block-library/src/media-text/edit.js | 3 +++
 packages/block-library/src/paragraph/edit.js  | 3 +++
 packages/block-library/src/table/edit.js      | 3 +++
 3 files changed, 9 insertions(+)

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 5a3b4fab04ab63..fb5e0dd219d36b 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -440,6 +440,9 @@ function MediaTextEdit( {
 						<BlockVerticalAlignmentControl
 							onChange={ onVerticalAlignmentChange }
 							value={ verticalAlignment }
+							description={ __(
+								'Adjust the vertical alignment of content within the block'
+							) }
 						/>
 						<ToolbarButton
 							icon={ pullLeft }
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 7edfbbc6252ae6..ef92bb74b1b354 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -122,6 +122,9 @@ function ParagraphBlock( {
 									: dropCap,
 							} )
 						}
+						description={ __(
+							'Adjust the alignment of text within the paragraph'
+						) }
 					/>
 					<ParagraphRTLControl
 						direction={ direction }
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index 5510d0031ff6be..5f52fa433e4411 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -456,6 +456,9 @@ function TableEdit( {
 					<BlockControls group="block">
 						<AlignmentControl
 							label={ __( 'Change column alignment' ) }
+							description={ __(
+								'Adjust the alignment of content within table columns'
+							) }
 							alignmentControls={ ALIGNMENT_CONTROLS }
 							value={ getCellAlignment() }
 							onChange={ ( nextAlign ) =>

From 7901244ebbde8f602edf7876a9f642e92ef104e2 Mon Sep 17 00:00:00 2001
From: dhananjaykuber <dnkuber2002@gmail.com>
Date: Thu, 18 Jul 2024 17:47:26 +0530
Subject: [PATCH 4/7] pass described by prop correctly

---
 .../components/block-alignment-control/ui.js  |  3 +-
 .../block-vertical-alignment-control/ui.js    | 43 ++++++++++---------
 2 files changed, 23 insertions(+), 23 deletions(-)

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 22587e5fde22c4..0e977c4e12c2fe 100644
--- a/packages/block-editor/src/components/block-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -50,7 +50,6 @@ function BlockAlignmentUI( {
 			? activeAlignmentControl.icon
 			: defaultAlignmentControl.icon,
 		label,
-		describedBy: description,
 	};
 	const extraProps = isToolbar
 		? {
@@ -67,7 +66,7 @@ function BlockAlignmentUI( {
 				} ),
 		  }
 		: {
-				toggleProps: { describedBy: description },
+				toggleProps: { 'aria-description': description },
 				children: ( { onClose } ) => {
 					return (
 						<>
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 ddded6f118e11a..8efaa451647838 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
@@ -64,28 +64,29 @@ function BlockVerticalAlignmentUI( {
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
 	const extraProps = isToolbar
 		? { isCollapsed }
-		: { toggleProps: { describedBy: description } };
+		: {
+				popoverProps: { focusOnMount: 'firstElement' },
+				toggleProps: {
+					describedBy: description,
+				},
+		  };
 
-	return (
-		<UIComponent
-			icon={
-				activeAlignment
-					? activeAlignment.icon
-					: defaultAlignmentControl.icon
-			}
-			label={ label }
-			describedBy={ description }
-			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 } />;
 }
 
 /**

From d1775293201f8c2a115fc40187a0971ea7c95f3d Mon Sep 17 00:00:00 2001
From: dhananjaykuber <dnkuber2002@gmail.com>
Date: Thu, 18 Jul 2024 17:47:39 +0530
Subject: [PATCH 5/7] update test cases

---
 .../test/__snapshots__/index.js.snap          |  4 ++--
 .../block-alignment-control/test/index.js     |  2 +-
 .../test/__snapshots__/index.js.snap          |  4 ++--
 .../test/index.js                             | 20 +++++++++++++++++--
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
index 246e5dca2ae324..8f749fe35c3de9 100644
--- a/packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.js.snap
+++ b/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
diff --git a/packages/block-editor/src/components/block-alignment-control/test/index.js b/packages/block-editor/src/components/block-alignment-control/test/index.js
index c8cd686e06954b..0cb4465b93221d 100644
--- a/packages/block-editor/src/components/block-alignment-control/test/index.js
+++ b/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',
 			} )
 		);
 
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 e58d9a264310a7..f10e477633e028 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="Change vertical alignment"
+      aria-label="Align 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 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 74c21cd100e7e2..93c417649db88e 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
@@ -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 vertically',
 			} )
 		);
 
@@ -86,7 +102,7 @@ describe( 'BlockVerticalAlignmentUI', () => {
 		);
 
 		const activeControl = screen.getByRole( 'button', {
-			name: `Align ${ alignment }`,
+			name: `Align top`,
 			pressed: true,
 		} );
 

From 63a7d840d15ef87348f52f0199af663e1b262010 Mon Sep 17 00:00:00 2001
From: dhananjaykuber <dnkuber2002@gmail.com>
Date: Thu, 18 Jul 2024 18:15:14 +0530
Subject: [PATCH 6/7] update unit test for mobile

---
 .../block-library/src/columns/test/edit.native.js   | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/columns/test/edit.native.js b/packages/block-library/src/columns/test/edit.native.js
index 20430704c8e1e2..c71a3a17fe0420 100644
--- a/packages/block-library/src/columns/test/edit.native.js
+++ b/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

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 7/7] 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 ) =>