From 54318c68743edbc2216cf1e10b4c32ef9c20b011 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Sat, 1 Apr 2023 21:39:22 +0100
Subject: [PATCH 1/2] Add checkbox labels to font family variants

---
 src/google-fonts/font-variant.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/google-fonts/font-variant.js b/src/google-fonts/font-variant.js
index 54fd1509..46efbc0b 100644
--- a/src/google-fonts/font-variant.js
+++ b/src/google-fonts/font-variant.js
@@ -32,21 +32,31 @@ function FontVariant( { font, variant, isSelected, handleToggle } ) {
 			} );
 	}, [ font, variant ] );
 
+	const formattedFontFamily = font.family.toLowerCase().replace( ' ', '-' );
+	const fontId = `${ formattedFontFamily }-${ variant }`;
+
 	return (
 		<tr>
 			<td className="">
 				<input
 					type="checkbox"
 					name="google-font-variant"
+					id={ fontId }
 					value={ variant }
 					checked={ isSelected }
 					onClick={ handleToggle }
 				/>
 			</td>
-			<td className="">{ weight }</td>
-			<td className="">{ style }</td>
+			<td className="">
+				<label htmlFor={ fontId }>{ weight }</label>
+			</td>
+			<td className="">
+				<label htmlFor={ fontId }>{ style }</label>
+			</td>
 			<td className="demo-cell">
-				<Demo style={ previewStyles } />
+				<label htmlFor={ fontId }>
+					<Demo style={ previewStyles } />
+				</label>
 			</td>
 		</tr>
 	);

From 072da09df4ffebebb53c5cd817908545b6e097b2 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Sat, 1 Apr 2023 21:39:54 +0100
Subject: [PATCH 2/2] Add checkbox labels to font family table header

---
 src/google-fonts/index.js | 44 ++++++++++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/google-fonts/index.js b/src/google-fonts/index.js
index f7571260..0cc07b69 100644
--- a/src/google-fonts/index.js
+++ b/src/google-fonts/index.js
@@ -156,6 +156,13 @@ function GoogleFonts() {
 		setSelectedFont( googleFontsData.items[ value ] );
 	};
 
+	let selectedFontFamilyId = '';
+	if ( selectedFont ) {
+		selectedFontFamilyId = selectedFont.family
+			.toLowerCase()
+			.replace( ' ', '-' );
+	}
+
 	return (
 		<FontsPageLayout>
 			<main>
@@ -235,6 +242,7 @@ function GoogleFonts() {
 										<td className="">
 											<input
 												type="checkbox"
+												id={ `select-all-${ selectedFontFamilyId }` }
 												onClick={ () =>
 													handleToggleAllVariants(
 														selectedFont.family
@@ -250,22 +258,34 @@ function GoogleFonts() {
 											/>
 										</td>
 										<td className="">
-											{ __(
-												'Weight',
-												'create-block-theme'
-											) }
+											<label
+												htmlFor={ `select-all-${ selectedFontFamilyId }` }
+											>
+												{ __(
+													'Weight',
+													'create-block-theme'
+												) }
+											</label>
 										</td>
 										<td className="">
-											{ __(
-												'Style',
-												'create-block-theme'
-											) }
+											<label
+												htmlFor={ `select-all-${ selectedFontFamilyId }` }
+											>
+												{ __(
+													'Style',
+													'create-block-theme'
+												) }
+											</label>
 										</td>
 										<td className="">
-											{ __(
-												'Preview',
-												'create-block-theme'
-											) }
+											<label
+												htmlFor={ `select-all-${ selectedFontFamilyId }` }
+											>
+												{ __(
+													'Preview',
+													'create-block-theme'
+												) }
+											</label>
 										</td>
 									</tr>
 								</thead>