From e2142c3e6a7562ef9e9e059f8c85a9c6791212f6 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 30 Apr 2024 18:45:14 +0900
Subject: [PATCH] Font Library: Convert heading text to heading elements and
 group fonts as a list (#58834)

* temp

* Font Library: Convert heading text to heading elements and group fonts as a list

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
---
 .../font-library-modal/font-collection.js     |  43 ++++--
 .../font-library-modal/installed-fonts.js     | 136 +++++++++++-------
 .../font-library-modal/style.scss             |  17 +++
 .../specs/site-editor/font-library.spec.js    |   2 +-
 4 files changed, 131 insertions(+), 67 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
index 1a1853ac62a381..7d89a92cb44bac 100644
--- 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
@@ -332,18 +332,37 @@ function FontCollection( { slug } ) {
 								) }
 
 							<div className="font-library-modal__fonts-grid__main">
-								{ items.map( ( font ) => (
-									<FontCard
-										key={ font.font_family_settings.slug }
-										font={ font.font_family_settings }
-										navigatorPath={ '/fontFamily' }
-										onClick={ () => {
-											setSelectedFont(
-												font.font_family_settings
-											);
-										} }
-									/>
-								) ) }
+								{ /*
+								 * 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 ) => (
+										<li
+											key={
+												font.font_family_settings.slug
+											}
+											className="font-library-modal__fonts-list-item"
+										>
+											<FontCard
+												font={
+													font.font_family_settings
+												}
+												navigatorPath={ '/fontFamily' }
+												onClick={ () => {
+													setSelectedFont(
+														font.font_family_settings
+													);
+												} }
+											/>
+										</li>
+									) ) }
+								</ul>
+								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }{ ' ' }
 							</div>
 						</NavigatorScreen>
 
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
index b33bb1b639d000..cdc81aa09b7373 100644
--- 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
@@ -126,66 +126,94 @@ function InstalledFonts() {
 						}
 					>
 						<NavigatorScreen path="/">
-							{ notice && (
-								<>
-									<Spacer margin={ 1 } />
+							<VStack spacing="8">
+								{ notice && (
 									<Notice
 										status={ notice.type }
 										onRemove={ () => setNotice( null ) }
 									>
 										{ notice.message }
 									</Notice>
-									<Spacer margin={ 1 } />
-								</>
-							) }
-							{ baseCustomFonts.length > 0 && (
-								<>
-									<Text className="font-library-modal__subtitle">
-										{ __( 'Installed Fonts' ) }
-									</Text>
-									<Spacer margin={ 2 } />
-									{ baseCustomFonts.map( ( font ) => (
-										<FontCard
-											font={ font }
-											key={ font.slug }
-											navigatorPath={ '/fontFamily' }
-											variantsText={ getFontCardVariantsText(
-												font
-											) }
-											onClick={ () => {
-												handleSetLibraryFontSelected(
-													font
-												);
-											} }
-										/>
-									) ) }
-									<Spacer margin={ 8 } />
-								</>
-							) }
-
-							{ baseThemeFonts.length > 0 && (
-								<>
-									<Text className="font-library-modal__subtitle">
-										{ __( 'Theme Fonts' ) }
-									</Text>
-									<Spacer margin={ 2 } />
-									{ baseThemeFonts.map( ( font ) => (
-										<FontCard
-											font={ font }
-											key={ font.slug }
-											navigatorPath={ '/fontFamily' }
-											variantsText={ getFontCardVariantsText(
-												font
-											) }
-											onClick={ () => {
-												handleSetLibraryFontSelected(
-													font
-												);
-											} }
-										/>
-									) ) }
-								</>
-							) }
+								) }
+								{ baseCustomFonts.length > 0 && (
+									<VStack>
+										<h2 className="font-library-modal__fonts-title">
+											{ __( 'Installed 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"
+												>
+													<FontCard
+														font={ font }
+														navigatorPath={
+															'/fontFamily'
+														}
+														variantsText={ getFontCardVariantsText(
+															font
+														) }
+														onClick={ () => {
+															handleSetLibraryFontSelected(
+																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"
+												>
+													<FontCard
+														font={ font }
+														navigatorPath={
+															'/fontFamily'
+														}
+														variantsText={ getFontCardVariantsText(
+															font
+														) }
+														onClick={ () => {
+															handleSetLibraryFontSelected(
+																font
+															);
+														} }
+													/>
+												</li>
+											) ) }
+										</ul>
+										{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+									</VStack>
+								) }
+							</VStack>
 						</NavigatorScreen>
 
 						<NavigatorScreen path="/fontFamily">
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
index 201d4d87a3fb16..fb87f6fae505a4 100644
--- 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
@@ -66,6 +66,23 @@ $footer-height: 70px;
 	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-bottom: 0;
+}
+
 .font-library-modal__font-card {
 	border: 1px solid $gray-200;
 	width: 100%;
diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
index 986b400c0d6e5a..2601f66b3e0787 100644
--- 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();
 		} );