fix: Update alignment control labels and remove default description f…

…or clear labels
WordPress · Jan 6, 2025 · f0fbfa9 · f0fbfa9
1 parent 983b9a3
commit f0fbfa9
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 27 deletions.
diff --git 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
@@ -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/...k-editor/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap b/...k-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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 ) =>