Font Library: buttons position and accessibility (#58212)

* move checkbox controls closer to the font faces previews * make delete button red
WordPress · Jan 25, 2024 · 9508cc0 · 9508cc0
1 parent 609106d
commit 9508cc0
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 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
@@ -39,15 +39,15 @@ function CollectionFontVariant( {
 			className="font-library-modal__library-font-variant"
 			htmlFor={ checkboxId }
 		>
-			<Flex justify="space-between" align="center" gap="1rem">
-				<FontFaceDemo fontFace={ face } text={ displayName } />
+			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ selected }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
 					id={ checkboxId }
 					label={ false }
 				/>
+				<FontFaceDemo fontFace={ face } text={ displayName } />
 			</Flex>
 		</label>
 	);

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -191,11 +191,15 @@ function Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {
 	const { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =
 		useContext( FontLibraryContext );
 	return (
-		<HStack justify="space-between">
+		<HStack justify="flex-end">
 			{ isInstalling && <ProgressBar /> }
 			<div>
 				{ shouldDisplayDeleteButton && (
-					<Button variant="tertiary" onClick={ handleUninstallClick }>
+					<Button
+						isDestructive
+						variant="tertiary"
+						onClick={ handleUninstallClick }
+					>
 						{ __( 'Delete' ) }
 					</Button>
 				) }

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
@@ -49,15 +49,15 @@ function LibraryFontVariant( { face, font } ) {
 			className="font-library-modal__library-font-variant"
 			htmlFor={ checkboxId }
 		>
-			<Flex justify="space-between" align="center" gap="1rem">
-				<FontFaceDemo fontFace={ face } text={ displayName } />
+			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ isInstalled }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
 					id={ checkboxId }
 					label={ false }
 				/>
+				<FontFaceDemo fontFace={ face } text={ displayName } />
 			</Flex>
 		</label>
 	);