Merge pull request #297 from WordPress/add/font-family-labels

Add labels around Google font family checkbox controls
WordPress · Apr 4, 2023 · 0374c69 · 0374c69
2 parents 83de623 + 072da09
commit 0374c69
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 15 deletions.
diff --git 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>
 	);

diff --git 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>