Update help text alignment in CheckboxControl

packages/components/CHANGELOG.md

@@ -12,15 +12,17 @@
 -   `ExternalLink`: Use unicode arrow instead of svg icon ([#60255](https://github.com/WordPress/gutenberg/pull/60255)).
 -   `ProgressBar`: Move the indicator width styles from emotion to a CSS variable ([#60388](https://github.com/WordPress/gutenberg/pull/60388)).
 -   `Text`: Add `text-wrap: pretty;` to improve wrapping ([#60164](https://github.com/WordPress/gutenberg/pull/60164)).
--   `Navigator`: Navigation to the active path doesn't create a new location history ([#60561](https://github.com/WordPress/gutenberg/pull/60561))
+-   `Navigator`: Navigation to the active path doesn't create a new location history ([#60561](https://github.com/WordPress/gutenberg/pull/60561)).
 -   `FormToggle`: Forwards ref to input ([#60234](https://github.com/WordPress/gutenberg/pull/60234)).
 -   `ToggleControl`: Forwards ref to FormToggle ([#60234](https://github.com/WordPress/gutenberg/pull/60234)).
+-   `CheckboxControl`: Update help text alignment ([#60787](https://github.com/WordPress/gutenberg/pull/60787)).
 
 ### Bug Fix
 
 -   `Truncate`: Fix link control link preview when it displays long URLs ([#60890](https://github.com/WordPress/gutenberg/pull/60890)).
 
 -   `ProgressBar`: Fix CSS variable with invalid value ([#60576](https://github.com/WordPress/gutenberg/pull/60576)).
+-   `CheckboxControl`: Fix label text wrap ([#60787](https://github.com/WordPress/gutenberg/pull/60787)).
 
 ### Experimental
 

packages/components/src/checkbox-control/index.tsx

@@ -16,6 +16,7 @@ import { Icon, check, reset } from '@wordpress/icons';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
+import { HStack } from '../h-stack';
 import type { CheckboxControlProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
@@ -95,44 +96,52 @@ export function CheckboxControl(
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			label={ heading }
 			id={ id }
-			help={ help }
+			help={
+				help && (
+					<span className="components-checkbox-control__help">
+						{ help }
+					</span>
+				)
+			}
 			className={ classnames( 'components-checkbox-control', className ) }
 		>
-			<span className="components-checkbox-control__input-container">
-				<input
-					ref={ ref }
-					id={ id }
-					className="components-checkbox-control__input"
-					type="checkbox"
-					value="1"
-					onChange={ onChangeValue }
-					checked={ checked }
-					aria-describedby={ !! help ? id + '__help' : undefined }
-					{ ...additionalProps }
-				/>
-				{ showIndeterminateIcon ? (
-					<Icon
-						icon={ reset }
-						className="components-checkbox-control__indeterminate"
-						role="presentation"
-					/>
-				) : null }
-				{ showCheckedIcon ? (
-					<Icon
-						icon={ check }
-						className="components-checkbox-control__checked"
-						role="presentation"
+			<HStack spacing={ 0 } justify="start" alignment="top">
+				<span className="components-checkbox-control__input-container">
+					<input
+						ref={ ref }
+						id={ id }
+						className="components-checkbox-control__input"
+						type="checkbox"
+						value="1"
+						onChange={ onChangeValue }
+						checked={ checked }
+						aria-describedby={ !! help ? id + '__help' : undefined }
+						{ ...additionalProps }
 					/>
-				) : null }
-			</span>
-			{ label && (
-				<label
-					className="components-checkbox-control__label"
-					htmlFor={ id }
-				>
-					{ label }
-				</label>
-			) }
+					{ showIndeterminateIcon ? (
+						<Icon
+							icon={ reset }
+							className="components-checkbox-control__indeterminate"
+							role="presentation"
+						/>
+					) : null }
+					{ showCheckedIcon ? (
+						<Icon
+							icon={ check }
+							className="components-checkbox-control__checked"
+							role="presentation"
+						/>
+					) : null }
+				</span>
+				{ label && (
+					<label
+						className="components-checkbox-control__label"
+						htmlFor={ id }
+					>
+						{ label }
+					</label>
+				) }
+			</HStack>
 		</BaseControl>
 	);
 }

packages/components/src/checkbox-control/style.scss

@@ -7,6 +7,11 @@
 	}
 }
 
+.components-checkbox-control__label {
+	// Ensure label is aligned with checkbox along X axis
+	line-height: var(--checkbox-input-size);
+}
+
 .components-checkbox-control__input[type="checkbox"] {
 	@include checkbox-control;
 	background: $white;
@@ -50,10 +55,11 @@
 .components-checkbox-control__input-container {
 	position: relative;
 	display: inline-block;
-	margin-right: 12px;
+	margin-right: $grid-unit-15;
 	vertical-align: middle;
 	width: var(--checkbox-input-size);
 	aspect-ratio: 1;
+	flex-shrink: 0;
 }
 
 svg.components-checkbox-control__checked,
@@ -75,3 +81,8 @@ svg.components-checkbox-control__indeterminate {
 		--checkmark-size: calc(var(--checkbox-input-size) + 4px);
 	}
 }
+
+.components-checkbox-control__help {
+	display: inline-block;
+	margin-inline-start: calc(var(--checkbox-input-size) + #{$grid-unit-15});
+}

packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap

@@ -5,32 +5,33 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,13 +8,27 @@
-        <span
-          class="components-checkbox-control__input-container"
-        >
-          <input
-            class="components-checkbox-control__input"
--           id="inspector-checkbox-control-6"
-+           id="inspector-checkbox-control-7"
-            type="checkbox"
-            value="1"
-+         />
-+         <svg
-+           aria-hidden="true"
-+           class="components-checkbox-control__indeterminate"
-+           focusable="false"
-+           height="24"
-+           role="presentation"
-+           viewBox="0 0 24 24"
-+           width="24"
-+           xmlns="http://www.w3.org/2000/svg"
-+         >
-+           <path
-+             d="M7 11.5h10V13H7z"
-            />
-+         </svg>
-        </span>
+@@ -13,14 +13,28 @@
+          <span
+            class="components-checkbox-control__input-container"
+          >
+            <input
+              class="components-checkbox-control__input"
+-             id="inspector-checkbox-control-6"
++             id="inspector-checkbox-control-7"
+              type="checkbox"
+              value="1"
++           />
++           <svg
++             aria-hidden="true"
++             class="components-checkbox-control__indeterminate"
++             focusable="false"
++             height="24"
++             role="presentation"
++             viewBox="0 0 24 24"
++             width="24"
++             xmlns="http://www.w3.org/2000/svg"
++           >
++             <path
++               d="M7 11.5h10V13H7z"
+              />
++           </svg>
+          </span>
+        </div>
       </div>
     </div>
   </div>

packages/components/src/checkbox-control/test/index.tsx

@@ -86,6 +86,11 @@ describe( 'CheckboxControl', () => {
 				containerIndeterminate
 			);
 		} );
+
+		it( 'should associate the `help` text accessibly', () => {
+			render( <CheckboxControl help="Help text" /> );
+			expect( getInput() ).toHaveAccessibleDescription( 'Help text' );
+		} );
 	} );
 
 	describe( 'Value', () => {