From fa72c95eeab8351892bbbf56a6052acd77aa7d9b Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Sat, 27 Apr 2024 12:13:21 +0900
Subject: [PATCH 1/2] temp

---
 .../font-library-modal/font-collection.js     |  43 +++++--
 .../font-library-modal/installed-fonts.js     | 113 +++++++++++-------
 .../font-library-modal/style.scss             |  19 ++-
 3 files changed, 121 insertions(+), 54 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..6f54c08ac9e123 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
@@ -139,52 +139,83 @@ function InstalledFonts() {
 								</>
 							) }
 							{ baseCustomFonts.length > 0 && (
-								<>
-									<Text className="font-library-modal__subtitle">
+								<VStack>
+									<h2 className="font-library-modal__fonts-title">
 										{ __( '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 } />
-								</>
+									</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 && (
-								<>
-									<Text className="font-library-modal__subtitle">
+								<VStack>
+									<h2 className="font-library-modal__fonts-title">
 										{ __( 'Theme Fonts' ) }
-									</Text>
-									<Spacer margin={ 2 } />
-									{ baseThemeFonts.map( ( font ) => (
-										<FontCard
-											font={ font }
-											key={ font.slug }
-											navigatorPath={ '/fontFamily' }
-											variantsText={ getFontCardVariantsText(
-												font
-											) }
-											onClick={ () => {
-												handleSetLibraryFontSelected(
-													font
-												);
-											} }
-										/>
-									) ) }
-								</>
+									</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>
 							) }
 						</NavigatorScreen>
 
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..01ee16911189f4 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,12 +66,29 @@ $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-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 */
 
 	&:hover {
 		background-color: $gray-100;

From 31fc51cfea8e270caeff198bd2ce79443dc0571b Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Sat, 27 Apr 2024 12:40:45 +0900
Subject: [PATCH 2/2] Font Library: Convert heading text to heading elements
 and group fonts as a list

---
 .../font-library-modal/installed-fonts.js     | 163 +++++++++---------
 .../font-library-modal/style.scss             |   2 +-
 .../specs/site-editor/font-library.spec.js    |   2 +-
 3 files changed, 82 insertions(+), 85 deletions(-)

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 6f54c08ac9e123..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,97 +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 && (
-								<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(
+								) }
+								{ 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
-														);
-													} }
-												/>
-											</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(
+														) }
+														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
-														);
-													} }
-												/>
-											</li>
-										) ) }
-									</ul>
-									{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
-								</VStack>
-							) }
+														) }
+														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 01ee16911189f4..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
@@ -80,7 +80,6 @@ $footer-height: 70px;
 }
 
 .font-library-modal__fonts-list-item {
-	margin-top: -1px; /* To collapse the margin with the previous element */
 	margin-bottom: 0;
 }
 
@@ -89,6 +88,7 @@ $footer-height: 70px;
 	width: 100%;
 	height: auto;
 	padding: $grid-unit-20;
+	margin-top: -1px; /* To collapse the margin with the previous element */
 
 	&:hover {
 		background-color: $gray-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();
 		} );