From a5d497dfc354ff8884fd1a10a6df77784df2f1ed Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Fri, 26 Jan 2024 13:28:08 +0000
Subject: [PATCH 01/13] Revert allowing label to be false

---
 packages/components/src/checkbox-control/README.md |  3 +--
 packages/components/src/checkbox-control/index.tsx | 14 ++++++--------
 .../test/__snapshots__/index.tsx.snap              | 11 ++++++++---
 .../components/src/checkbox-control/test/index.tsx |  7 -------
 packages/components/src/checkbox-control/types.ts  |  5 ++---
 5 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/packages/components/src/checkbox-control/README.md b/packages/components/src/checkbox-control/README.md
index 8044cef0535ea..e89ee489feca9 100644
--- a/packages/components/src/checkbox-control/README.md
+++ b/packages/components/src/checkbox-control/README.md
@@ -69,12 +69,11 @@ const MyCheckboxControl = () => {
 The set of props accepted by the component will be specified below.
 Props not included in this set will be applied to the input element.
 
-#### `label`: `string|false`
+#### `label`: `string`
 
 A label for the input field, that appears at the side of the checkbox.
 The prop will be rendered as content a label element.
 If no prop is passed an empty label is rendered.
-If the prop is set to false no label is rendered.
 
 -   Required: No
 
diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index 54a9952d19949..cd70bb8485ac7 100644
--- a/packages/components/src/checkbox-control/index.tsx
+++ b/packages/components/src/checkbox-control/index.tsx
@@ -125,14 +125,12 @@ export function CheckboxControl(
 					/>
 				) : null }
 			</span>
-			{ label && (
-				<label
-					className="components-checkbox-control__label"
-					htmlFor={ id }
-				>
-					{ label }
-				</label>
-			) }
+			<label
+				className="components-checkbox-control__label"
+				htmlFor={ id }
+			>
+				{ label }
+			</label>
 		</BaseControl>
 	);
 }
diff --git a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
index f3bdccc1ccff6..408f18d8c7e77 100644
--- a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
@@ -5,14 +5,14 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,13 +8,27 @@
+@@ -8,17 +8,31 @@
         <span
           class="components-checkbox-control__input-container"
         >
           <input
             class="components-checkbox-control__input"
--           id="inspector-checkbox-control-6"
-+           id="inspector-checkbox-control-7"
+-           id="inspector-checkbox-control-5"
++           id="inspector-checkbox-control-6"
             type="checkbox"
             value="1"
 +         />
@@ -31,6 +31,11 @@ Snapshot Diff:
             />
 +         </svg>
         </span>
+        <label
+          class="components-checkbox-control__label"
+-         for="inspector-checkbox-control-5"
++         for="inspector-checkbox-control-6"
+        />
       </div>
     </div>
   </div>
diff --git a/packages/components/src/checkbox-control/test/index.tsx b/packages/components/src/checkbox-control/test/index.tsx
index 55e1447661392..061087fdc0901 100644
--- a/packages/components/src/checkbox-control/test/index.tsx
+++ b/packages/components/src/checkbox-control/test/index.tsx
@@ -60,13 +60,6 @@ describe( 'CheckboxControl', () => {
 			expect( label ).toBeInTheDocument();
 		} );
 
-		it( 'should not render label element if label is set to false', () => {
-			render( <CheckboxControl label={ false } /> );
-
-			const label = screen.queryByRole( 'label' );
-			expect( label ).not.toBeInTheDocument();
-		} );
-
 		it( 'should render a checkbox in an indeterminate state', () => {
 			render( <CheckboxControl indeterminate /> );
 			expect( getInput() ).toHaveProperty( 'indeterminate', true );
diff --git a/packages/components/src/checkbox-control/types.ts b/packages/components/src/checkbox-control/types.ts
index 48a1d02affb70..07ab55493fc66 100644
--- a/packages/components/src/checkbox-control/types.ts
+++ b/packages/components/src/checkbox-control/types.ts
@@ -19,10 +19,9 @@ export type CheckboxControlProps = Pick<
 	/**
 	 * A label for the input field, that appears at the side of the checkbox.
 	 * The prop will be rendered as content a label element. If no prop is
-	 * passed an empty label is rendered. If the prop is set to false no label
-	 * is rendered.
+	 * passed an empty label is rendered.
 	 */
-	label?: string | false;
+	label?: string;
 	/**
 	 * If checked is true the checkbox will be checked. If checked is false the
 	 * checkbox will be unchecked. If no value is passed the checkbox will be

From c4fda880f80451a38c7a8f63f2eebdd7bfc6c574 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Fri, 26 Jan 2024 13:37:44 +0000
Subject: [PATCH 02/13] Replace custom labels with label prop

---
 .../collection-font-variant.js                | 21 ++++---------------
 .../library-font-variant.js                   | 21 ++++---------------
 2 files changed, 8 insertions(+), 34 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
index ab090a0cd0b4d..b8684373e29dc 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -1,18 +1,13 @@
 /**
  * WordPress dependencies
  */
-import {
-	CheckboxControl,
-	Flex,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { CheckboxControl, Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { getFontFaceVariantName } from './utils';
 import FontFaceDemo from './font-demo';
-import { unlock } from '../../../lock-unlock';
 
 function CollectionFontVariant( {
 	face,
@@ -29,27 +24,19 @@ function CollectionFontVariant( {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const { kebabCase } = unlock( componentsPrivateApis );
-	const checkboxId = kebabCase(
-		`${ font.slug }-${ getFontFaceVariantName( face ) }`
-	);
 
 	return (
-		<label
-			className="font-library-modal__library-font-variant"
-			htmlFor={ checkboxId }
-		>
+		<div className="font-library-modal__library-font-variant">
 			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ selected }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
-					id={ checkboxId }
-					label={ false }
+					label={ displayName }
 				/>
 				<FontFaceDemo fontFace={ face } text={ displayName } />
 			</Flex>
-		</label>
+		</div>
 	);
 }
 
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
index cc62a85193669..e4b4bcdc46b75 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
-import {
-	CheckboxControl,
-	Flex,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { CheckboxControl, Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,7 +10,6 @@ import {
 import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
 import FontFaceDemo from './font-demo';
-import { unlock } from '../../../lock-unlock';
 
 function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
@@ -39,27 +34,19 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const { kebabCase } = unlock( componentsPrivateApis );
-	const checkboxId = kebabCase(
-		`${ font.slug }-${ getFontFaceVariantName( face ) }`
-	);
 
 	return (
-		<label
-			className="font-library-modal__library-font-variant"
-			htmlFor={ checkboxId }
-		>
+		<div className="font-library-modal__library-font-variant">
 			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ isInstalled }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
-					id={ checkboxId }
-					label={ false }
+					label={ displayName }
 				/>
 				<FontFaceDemo fontFace={ face } text={ displayName } />
 			</Flex>
-		</label>
+		</div>
 	);
 }
 

From ed59cd90ad615ad3f47edceeb6fabe854ed26494 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Fri, 26 Jan 2024 14:13:27 +0000
Subject: [PATCH 03/13] Try using aria-labelledby

---
 .../collection-font-variant.js                | 19 ++++++++++++++++---
 .../font-library-modal/font-demo.js           | 10 ++++++++--
 .../library-font-variant.js                   | 19 ++++++++++++++++---
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
index b8684373e29dc..16d3ab033ee87 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -1,13 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { CheckboxControl, Flex } from '@wordpress/components';
+import {
+	CheckboxControl,
+	Flex,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { getFontFaceVariantName } from './utils';
 import FontFaceDemo from './font-demo';
+import { unlock } from '../../../lock-unlock';
 
 function CollectionFontVariant( {
 	face,
@@ -24,6 +29,10 @@ function CollectionFontVariant( {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+	const { kebabCase } = unlock( componentsPrivateApis );
+	const checkboxId = kebabCase(
+		`${ font.slug }-${ getFontFaceVariantName( face ) }`
+	);
 
 	return (
 		<div className="font-library-modal__library-font-variant">
@@ -32,9 +41,13 @@ function CollectionFontVariant( {
 					checked={ selected }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
-					label={ displayName }
+					aria-labelledby={ checkboxId }
+				/>
+				<FontFaceDemo
+					fontFace={ face }
+					text={ displayName }
+					checkboxId={ checkboxId }
 				/>
-				<FontFaceDemo fontFace={ face } text={ displayName } />
 			</Flex>
 		</div>
 	);
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
index 9ed025dcc17b4..a5616b0875e44 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
@@ -19,7 +19,13 @@ function getPreviewUrl( fontFace ) {
 	}
 }
 
-function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
+function FontFaceDemo( {
+	customPreviewUrl,
+	fontFace,
+	text,
+	checkboxId,
+	style = {},
+} ) {
 	const ref = useRef( null );
 	const [ isIntersecting, setIsIntersecting ] = useState( false );
 	const [ isAssetLoaded, setIsAssetLoaded ] = useState( false );
@@ -65,7 +71,7 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
 	}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );
 
 	return (
-		<div ref={ ref }>
+		<div ref={ ref } id={ checkboxId }>
 			{ isPreviewImage ? (
 				<img
 					src={ previewUrl }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
index e4b4bcdc46b75..f7e67b2ba99f4 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
-import { CheckboxControl, Flex } from '@wordpress/components';
+import {
+	CheckboxControl,
+	Flex,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,6 +14,7 @@ import { CheckboxControl, Flex } from '@wordpress/components';
 import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
 import FontFaceDemo from './font-demo';
+import { unlock } from '../../../lock-unlock';
 
 function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
@@ -34,6 +39,10 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+	const { kebabCase } = unlock( componentsPrivateApis );
+	const checkboxId = kebabCase(
+		`${ font.slug }-${ getFontFaceVariantName( face ) }`
+	);
 
 	return (
 		<div className="font-library-modal__library-font-variant">
@@ -42,9 +51,13 @@ function LibraryFontVariant( { face, font } ) {
 					checked={ isInstalled }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
-					label={ displayName }
+					aria-labelledby={ checkboxId }
+				/>
+				<FontFaceDemo
+					fontFace={ face }
+					text={ displayName }
+					checkboxId={ checkboxId }
 				/>
-				<FontFaceDemo fontFace={ face } text={ displayName } />
 			</Flex>
 		</div>
 	);

From 5fe861b5959f4983cd69e1d525bbb2aa1d58b2c1 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Fri, 26 Jan 2024 14:36:27 +0000
Subject: [PATCH 04/13] Make FontDemo clickable

---
 .../font-library-modal/collection-font-variant.js  |  1 +
 .../global-styles/font-library-modal/font-demo.js  | 14 +++++++++++++-
 .../font-library-modal/library-font-variant.js     |  1 +
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
index 16d3ab033ee87..13a91bbce9ee0 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -47,6 +47,7 @@ function CollectionFontVariant( {
 					fontFace={ face }
 					text={ displayName }
 					checkboxId={ checkboxId }
+					onClick={ handleToggleActivation }
 				/>
 			</Flex>
 		</div>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
index a5616b0875e44..788f03ceab70c 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
@@ -24,6 +24,7 @@ function FontFaceDemo( {
 	fontFace,
 	text,
 	checkboxId,
+	onClick,
 	style = {},
 } ) {
 	const ref = useRef( null );
@@ -49,6 +50,9 @@ function FontFaceDemo( {
 		height: '23px',
 		width: 'auto',
 	};
+	const containerStyle = {
+		cursor: 'pointer',
+	};
 
 	useEffect( () => {
 		const observer = new window.IntersectionObserver( ( [ entry ] ) => {
@@ -71,7 +75,15 @@ function FontFaceDemo( {
 	}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );
 
 	return (
-		<div ref={ ref } id={ checkboxId }>
+		<div
+			ref={ ref }
+			id={ checkboxId }
+			onClick={ onClick }
+			onKeyDown={ onClick }
+			tabIndex={ -1 }
+			role="button"
+			style={ containerStyle }
+		>
 			{ isPreviewImage ? (
 				<img
 					src={ previewUrl }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
index f7e67b2ba99f4..0c1d6abb27078 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -57,6 +57,7 @@ function LibraryFontVariant( { face, font } ) {
 					fontFace={ face }
 					text={ displayName }
 					checkboxId={ checkboxId }
+					onClick={ handleToggleActivation }
 				/>
 			</Flex>
 		</div>

From 665ba5eb281a9bf6335add21df6babe26b45b1a7 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Fri, 26 Jan 2024 19:09:48 +0000
Subject: [PATCH 05/13] Try hiding label with CSS

---
 .../font-library-modal/collection-font-variant.js        | 2 +-
 .../font-library-modal/library-font-variant.js           | 2 +-
 .../global-styles/font-library-modal/style.scss          | 9 +++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
index 13a91bbce9ee0..fea8ef02911e1 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -41,7 +41,7 @@ function CollectionFontVariant( {
 					checked={ selected }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
-					aria-labelledby={ checkboxId }
+					label={ displayName }
 				/>
 				<FontFaceDemo
 					fontFace={ face }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
index 0c1d6abb27078..ea26659592a4b 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -51,7 +51,7 @@ function LibraryFontVariant( { face, font } ) {
 					checked={ isInstalled }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
-					aria-labelledby={ checkboxId }
+					label={ displayName }
 				/>
 				<FontFaceDemo
 					fontFace={ face }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index d8020b3b672e0..2a301c31fa999 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -63,6 +63,15 @@
 	border: 1px solid $gray-200;
 	padding: $grid-unit-20;
 	margin-top: -1px; /* To collapse the margin with the previous element */
+
+	// Hide the checkbox label while still allowing screen-readers to read it.
+	// Visual label is part of the `FontFaceDemo` component.
+	label {
+		display: inline-block;
+		width: 0;
+		height: 0;
+		overflow: hidden;
+	}
 }
 
 .font-library-modal__font-variant {

From 143623d1832c0d591d7a2a8f4b6e14f3c6b70d7d Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Fri, 26 Jan 2024 21:45:52 +0000
Subject: [PATCH 06/13] Update components changelog

---
 packages/components/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 6ce2f99fab99f..eae50161fe620 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -13,6 +13,10 @@
 -   `DropdownMenuV2`: Restore accent color themability ([#58130](https://github.com/WordPress/gutenberg/pull/58130)).
 -   Expand theming support in the `COLORS` variable object ([#58097](https://github.com/WordPress/gutenberg/pull/58097)).
 
+### Enhancements
+
+-   `CheckboxControl`: Remove ability for label prop to be false ([#58339](https://github.com/WordPress/gutenberg/pull/58339)).
+
 ## 25.16.0 (2024-01-24)
 
 ### Enhancements

From 77407a5843696381183f9765d880e841ad3069b6 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Fri, 26 Jan 2024 22:50:07 +0000
Subject: [PATCH 07/13] Fix font library e2e test

---
 test/e2e/specs/site-editor/font-library.spec.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
index 8bc7cfb17ea62..121ae3304d85b 100644
--- a/test/e2e/specs/site-editor/font-library.spec.js
+++ b/test/e2e/specs/site-editor/font-library.spec.js
@@ -77,7 +77,10 @@ test.describe( 'Font Library', () => {
 					name: /manage fonts/i,
 				} )
 				.click();
-			await page.getByRole( 'button', { name: /system font/i } ).click();
+			await page
+				.getByRole( 'button', { name: /system font/i } )
+				.first()
+				.click();
 			await expect(
 				page.getByRole( 'heading', { name: /system font/i } )
 			).toBeVisible();

From 9f2026b578c0c0878f69b20900bd3459cb50a198 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Mon, 29 Jan 2024 21:56:41 +0000
Subject: [PATCH 08/13] Remove checkboxId prop

---
 .../font-library-modal/collection-font-variant.js    | 12 +-----------
 .../global-styles/font-library-modal/font-demo.js    |  2 --
 .../font-library-modal/library-font-variant.js       | 12 +-----------
 3 files changed, 2 insertions(+), 24 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
index fea8ef02911e1..ba17ee5df8429 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -1,18 +1,13 @@
 /**
  * WordPress dependencies
  */
-import {
-	CheckboxControl,
-	Flex,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { CheckboxControl, Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { getFontFaceVariantName } from './utils';
 import FontFaceDemo from './font-demo';
-import { unlock } from '../../../lock-unlock';
 
 function CollectionFontVariant( {
 	face,
@@ -29,10 +24,6 @@ function CollectionFontVariant( {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const { kebabCase } = unlock( componentsPrivateApis );
-	const checkboxId = kebabCase(
-		`${ font.slug }-${ getFontFaceVariantName( face ) }`
-	);
 
 	return (
 		<div className="font-library-modal__library-font-variant">
@@ -46,7 +37,6 @@ function CollectionFontVariant( {
 				<FontFaceDemo
 					fontFace={ face }
 					text={ displayName }
-					checkboxId={ checkboxId }
 					onClick={ handleToggleActivation }
 				/>
 			</Flex>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
index 788f03ceab70c..f052af2cba5cc 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
@@ -23,7 +23,6 @@ function FontFaceDemo( {
 	customPreviewUrl,
 	fontFace,
 	text,
-	checkboxId,
 	onClick,
 	style = {},
 } ) {
@@ -77,7 +76,6 @@ function FontFaceDemo( {
 	return (
 		<div
 			ref={ ref }
-			id={ checkboxId }
 			onClick={ onClick }
 			onKeyDown={ onClick }
 			tabIndex={ -1 }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
index ea26659592a4b..bd4fc0760c833 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
-import {
-	CheckboxControl,
-	Flex,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { CheckboxControl, Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,7 +10,6 @@ import {
 import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
 import FontFaceDemo from './font-demo';
-import { unlock } from '../../../lock-unlock';
 
 function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
@@ -39,10 +34,6 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const { kebabCase } = unlock( componentsPrivateApis );
-	const checkboxId = kebabCase(
-		`${ font.slug }-${ getFontFaceVariantName( face ) }`
-	);
 
 	return (
 		<div className="font-library-modal__library-font-variant">
@@ -56,7 +47,6 @@ function LibraryFontVariant( { face, font } ) {
 				<FontFaceDemo
 					fontFace={ face }
 					text={ displayName }
-					checkboxId={ checkboxId }
 					onClick={ handleToggleActivation }
 				/>
 			</Flex>

From d53293a702912ac41e6c78315f3bc5247bea6512 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Wed, 31 Jan 2024 13:10:00 +0000
Subject: [PATCH 09/13] Conditionally render label

---
 packages/components/src/checkbox-control/index.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index cd70bb8485ac7..54a9952d19949 100644
--- a/packages/components/src/checkbox-control/index.tsx
+++ b/packages/components/src/checkbox-control/index.tsx
@@ -125,12 +125,14 @@ export function CheckboxControl(
 					/>
 				) : null }
 			</span>
-			<label
-				className="components-checkbox-control__label"
-				htmlFor={ id }
-			>
-				{ label }
-			</label>
+			{ label && (
+				<label
+					className="components-checkbox-control__label"
+					htmlFor={ id }
+				>
+					{ label }
+				</label>
+			) }
 		</BaseControl>
 	);
 }

From 239d4f4b629135672419db208d85594d56f1446f Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Wed, 31 Jan 2024 17:12:11 +0000
Subject: [PATCH 10/13] Try using separate label tag

---
 .../collection-font-variant.js                | 25 +++++++++++++------
 .../font-library-modal/font-demo.js           | 20 ++-------------
 .../library-font-variant.js                   | 25 +++++++++++++------
 .../font-library-modal/style.scss             |  9 -------
 4 files changed, 38 insertions(+), 41 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
index ba17ee5df8429..0db8932a98e34 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -1,13 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { CheckboxControl, Flex } from '@wordpress/components';
+import {
+	CheckboxControl,
+	Flex,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { getFontFaceVariantName } from './utils';
 import FontFaceDemo from './font-demo';
+import { unlock } from '../../../lock-unlock';
 
 function CollectionFontVariant( {
 	face,
@@ -24,6 +29,10 @@ function CollectionFontVariant( {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+	const { kebabCase } = unlock( componentsPrivateApis );
+	const checkboxId = kebabCase(
+		`${ font.slug }-${ getFontFaceVariantName( face ) }`
+	);
 
 	return (
 		<div className="font-library-modal__library-font-variant">
@@ -32,13 +41,15 @@ function CollectionFontVariant( {
 					checked={ selected }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
-					label={ displayName }
-				/>
-				<FontFaceDemo
-					fontFace={ face }
-					text={ displayName }
-					onClick={ handleToggleActivation }
+					id={ checkboxId }
 				/>
+				<label htmlFor={ checkboxId }>
+					<FontFaceDemo
+						fontFace={ face }
+						text={ displayName }
+						onClick={ handleToggleActivation }
+					/>
+				</label>
 			</Flex>
 		</div>
 	);
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
index f052af2cba5cc..9ed025dcc17b4 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
@@ -19,13 +19,7 @@ function getPreviewUrl( fontFace ) {
 	}
 }
 
-function FontFaceDemo( {
-	customPreviewUrl,
-	fontFace,
-	text,
-	onClick,
-	style = {},
-} ) {
+function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
 	const ref = useRef( null );
 	const [ isIntersecting, setIsIntersecting ] = useState( false );
 	const [ isAssetLoaded, setIsAssetLoaded ] = useState( false );
@@ -49,9 +43,6 @@ function FontFaceDemo( {
 		height: '23px',
 		width: 'auto',
 	};
-	const containerStyle = {
-		cursor: 'pointer',
-	};
 
 	useEffect( () => {
 		const observer = new window.IntersectionObserver( ( [ entry ] ) => {
@@ -74,14 +65,7 @@ function FontFaceDemo( {
 	}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );
 
 	return (
-		<div
-			ref={ ref }
-			onClick={ onClick }
-			onKeyDown={ onClick }
-			tabIndex={ -1 }
-			role="button"
-			style={ containerStyle }
-		>
+		<div ref={ ref }>
 			{ isPreviewImage ? (
 				<img
 					src={ previewUrl }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
index bd4fc0760c833..f58eccd2b6ec2 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
-import { CheckboxControl, Flex } from '@wordpress/components';
+import {
+	CheckboxControl,
+	Flex,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,6 +14,7 @@ import { CheckboxControl, Flex } from '@wordpress/components';
 import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
 import FontFaceDemo from './font-demo';
+import { unlock } from '../../../lock-unlock';
 
 function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
@@ -34,6 +39,10 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+	const { kebabCase } = unlock( componentsPrivateApis );
+	const checkboxId = kebabCase(
+		`${ font.slug }-${ getFontFaceVariantName( face ) }`
+	);
 
 	return (
 		<div className="font-library-modal__library-font-variant">
@@ -42,13 +51,15 @@ function LibraryFontVariant( { face, font } ) {
 					checked={ isInstalled }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
-					label={ displayName }
-				/>
-				<FontFaceDemo
-					fontFace={ face }
-					text={ displayName }
-					onClick={ handleToggleActivation }
+					id={ checkboxId }
 				/>
+				<label htmlFor={ checkboxId }>
+					<FontFaceDemo
+						fontFace={ face }
+						text={ displayName }
+						onClick={ handleToggleActivation }
+					/>
+				</label>
 			</Flex>
 		</div>
 	);
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 2a301c31fa999..d8020b3b672e0 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -63,15 +63,6 @@
 	border: 1px solid $gray-200;
 	padding: $grid-unit-20;
 	margin-top: -1px; /* To collapse the margin with the previous element */
-
-	// Hide the checkbox label while still allowing screen-readers to read it.
-	// Visual label is part of the `FontFaceDemo` component.
-	label {
-		display: inline-block;
-		width: 0;
-		height: 0;
-		overflow: hidden;
-	}
 }
 
 .font-library-modal__font-variant {

From d417a8b8c0e11f7c78d714101945a79d83174847 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Wed, 31 Jan 2024 17:16:23 +0000
Subject: [PATCH 11/13] Update e2e test

---
 test/e2e/specs/site-editor/font-library.spec.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
index 121ae3304d85b..8bc7cfb17ea62 100644
--- a/test/e2e/specs/site-editor/font-library.spec.js
+++ b/test/e2e/specs/site-editor/font-library.spec.js
@@ -77,10 +77,7 @@ test.describe( 'Font Library', () => {
 					name: /manage fonts/i,
 				} )
 				.click();
-			await page
-				.getByRole( 'button', { name: /system font/i } )
-				.first()
-				.click();
+			await page.getByRole( 'button', { name: /system font/i } ).click();
 			await expect(
 				page.getByRole( 'heading', { name: /system font/i } )
 			).toBeVisible();

From 42a2613bc30f61be77bcd7d0d69708b2fe3a6241 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Wed, 31 Jan 2024 17:56:53 +0000
Subject: [PATCH 12/13] Update snapshot

---
 .../src/checkbox-control/test/__snapshots__/index.tsx.snap | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
index 408f18d8c7e77..8cf4b00d2c217 100644
--- a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
@@ -5,7 +5,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,17 +8,31 @@
+@@ -8,13 +8,27 @@
         <span
           class="components-checkbox-control__input-container"
         >
@@ -31,11 +31,6 @@ Snapshot Diff:
             />
 +         </svg>
         </span>
-        <label
-          class="components-checkbox-control__label"
--         for="inspector-checkbox-control-5"
-+         for="inspector-checkbox-control-6"
-        />
       </div>
     </div>
   </div>

From d48577661efaadc697eb117aa5eaea89a884967e Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Wed, 31 Jan 2024 19:03:53 +0000
Subject: [PATCH 13/13] Update CheckboxControl test

---
 .../src/checkbox-control/test/__snapshots__/index.tsx.snap | 4 ++--
 packages/components/src/checkbox-control/test/index.tsx    | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
index 8cf4b00d2c217..f3bdccc1ccff6 100644
--- a/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/checkbox-control/test/__snapshots__/index.tsx.snap
@@ -11,8 +11,8 @@ Snapshot Diff:
         >
           <input
             class="components-checkbox-control__input"
--           id="inspector-checkbox-control-5"
-+           id="inspector-checkbox-control-6"
+-           id="inspector-checkbox-control-6"
++           id="inspector-checkbox-control-7"
             type="checkbox"
             value="1"
 +         />
diff --git a/packages/components/src/checkbox-control/test/index.tsx b/packages/components/src/checkbox-control/test/index.tsx
index 061087fdc0901..411d20e820d3c 100644
--- a/packages/components/src/checkbox-control/test/index.tsx
+++ b/packages/components/src/checkbox-control/test/index.tsx
@@ -60,6 +60,13 @@ describe( 'CheckboxControl', () => {
 			expect( label ).toBeInTheDocument();
 		} );
 
+		it( 'should not render label element if label is not set', () => {
+			render( <CheckboxControl /> );
+
+			const label = screen.queryByRole( 'label' );
+			expect( label ).not.toBeInTheDocument();
+		} );
+
 		it( 'should render a checkbox in an indeterminate state', () => {
 			render( <CheckboxControl indeterminate /> );
 			expect( getInput() ).toHaveProperty( 'indeterminate', true );