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', () => {