Try using separate label tag

WordPress · Jan 31, 2024 · 239d4f4 · 239d4f4
1 parent d53293a
commit 239d4f4
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 41 deletions.
diff --git a/...ages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/...ages/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
@@ -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
@@ -2,14 +2,19 @@
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
-import { CheckboxControl, Flex } from '@wordpress/components';
+import {
+	CheckboxControl,
+	Flex,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 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
@@ -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 {