Font Library: Add heading to user font and group fonts in lists

WordPress · Feb 14, 2024 · b68a6f1 · b68a6f1
1 parent 24fcc49
commit b68a6f1
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 61 deletions.
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -307,17 +307,29 @@ function FontCollection( { slug } ) {
 			) }
 
 			{ ! renderConfirmDialog && ! selectedFont && (
-				<div className="font-library-modal__fonts-grid__main">
+				/*
+				 * Disable reason: The `list` ARIA role is redundant but
+				 * Safari+VoiceOver won't announce the list otherwise.
+				 */
+				/* eslint-disable jsx-a11y/no-redundant-roles */
+				<ul role="list" className="font-library-modal__fonts-list">
 					{ items.map( ( font ) => (
-						<FontCard
+						<li
 							key={ font.font_family_settings.slug }
-							font={ font.font_family_settings }
-							onClick={ () => {
-								setSelectedFont( font.font_family_settings );
-							} }
-						/>
+							className="font-library-modal__fonts-list-item"
+						>
+							<FontCard
+								font={ font.font_family_settings }
+								onClick={ () => {
+									setSelectedFont(
+										font.font_family_settings
+									);
+								} }
+							/>
+						</li>
 					) ) }
-				</div>
+				</ul>
+				/* eslint-enable jsx-a11y/no-redundant-roles */
 			) }
 		</TabPanelLayout>
 	);

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
@@ -5,12 +5,11 @@ import { __ } from '@wordpress/i18n';
 import { useContext, useEffect, useState } from '@wordpress/element';
 import {
 	privateApis as componentsPrivateApis,
-	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
 	Button,
 	Spinner,
-	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
 
 /**
@@ -114,47 +113,72 @@ function InstalledFonts() {
 
 			{ ! libraryFontSelected && (
 				<>
-					{ isResolvingLibrary && (
-						<FlexItem>
-							<Spacer margin={ 2 } />
-							<Spinner />
-							<Spacer margin={ 2 } />
-						</FlexItem>
-					) }
-					{ baseCustomFonts.length > 0 && (
-						<>
-							{ baseCustomFonts.map( ( font ) => (
-								<LibraryFontCard
-									font={ font }
-									key={ font.slug }
-									onClick={ () => {
-										handleSelectFont( font );
-									} }
-								/>
-							) ) }
-							<Spacer margin={ 8 } />
-						</>
-					) }
-
-					{ baseThemeFonts.length > 0 && (
-						<>
-							<Text className="font-library-modal__subtitle">
-								{ __( 'Theme Fonts' ) }
-							</Text>
-
-							<Spacer margin={ 2 } />
-							{ baseThemeFonts.map( ( font ) => (
-								<LibraryFontCard
-									font={ font }
-									key={ font.slug }
-									onClick={ () => {
-										handleSelectFont( font );
-									} }
-								/>
-							) ) }
-						</>
-					) }
-					<Spacer margin={ 16 } />
+					<VStack spacing="4">
+						{ isResolvingLibrary && <Spinner /> }
+						{ baseCustomFonts.length > 0 && (
+							<VStack>
+								<h2 className="font-library-modal__fonts-title">
+									{ __( 'User Fonts' ) }
+								</h2>
+								{ /*
+								 * Disable reason: The `list` ARIA role is redundant but
+								 * Safari+VoiceOver won't announce the list otherwise.
+								 */
+								/* eslint-disable jsx-a11y/no-redundant-roles */ }
+								<ul
+									role="list"
+									className="font-library-modal__fonts-list"
+								>
+									{ baseCustomFonts.map( ( font ) => (
+										<li
+											key={ font.slug }
+											className="font-library-modal__fonts-list-item"
+										>
+											<LibraryFontCard
+												font={ font }
+												onClick={ () => {
+													handleSelectFont( font );
+												} }
+											/>
+										</li>
+									) ) }
+								</ul>
+								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+							</VStack>
+						) }
+						{ baseThemeFonts.length > 0 && (
+							<VStack>
+								<h2 className="font-library-modal__fonts-title">
+									{ __( 'Theme Fonts' ) }
+								</h2>
+								{ /*
+								 * Disable reason: The `list` ARIA role is redundant but
+								 * Safari+VoiceOver won't announce the list otherwise.
+								 */
+								/* eslint-disable jsx-a11y/no-redundant-roles */ }
+								<ul
+									role="list"
+									className="font-library-modal__fonts-list"
+								>
+									{ baseThemeFonts.map( ( font ) => (
+										<li
+											key={ font.slug }
+											className="font-library-modal__fonts-list-item"
+										>
+											<LibraryFontCard
+												font={ font }
+												onClick={ () => {
+													handleSelectFont( font );
+												} }
+											/>
+										</li>
+									) ) }
+								</ul>
+								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+							</VStack>
+						) }
+					</VStack>
+					<Spacer paddingY={ 8 } marginBottom={ 0 } />
 				</>
 			) }
 

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
@@ -16,12 +16,6 @@
 	.components-modal__content {
 		padding-top: 0;
 	}
-
-	.font-library-modal__subtitle {
-		text-transform: uppercase;
-		font-weight: 500;
-		font-size: 11px;
-	}
 }
 
 .font-library-modal__tabpanel-layout {
@@ -40,12 +34,29 @@
 	margin-bottom: 0;
 }
 
+.font-library-modal__fonts-title {
+	text-transform: uppercase;
+	font-size: 11px;
+	font-weight: 600;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.font-library-modal__fonts-list {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.font-library-modal__fonts-list-item {
+	margin-top: -1px; /* To collapse the margin with the previous element */
+	margin-bottom: 0;
+}
+
 .font-library-modal__font-card {
 	border: 1px solid $gray-200;
 	width: 100%;
 	height: auto;
 	padding: $grid-unit-20;
-	margin-top: -1px; /* To collapse the margin with the previous element */
 
 	.font-library-modal__font-card__name {
 		font-weight: bold;

diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
@@ -61,7 +61,7 @@ test.describe( 'Font Library', () => {
 				.click();
 			await expect( page.getByRole( 'dialog' ) ).toBeVisible();
 			await expect(
-				page.getByRole( 'heading', { name: 'Fonts' } )
+				page.getByRole( 'heading', { name: 'Fonts', exact: true } )
 			).toBeVisible();
 		} );