From 4361cf01b532d1dca1d29b6fa87175297a5cb547 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 8 Jun 2022 14:36:03 +1000
Subject: [PATCH 1/4] The values we get back from class-wp-theme-json-resolve
 don't set defaults where properties such as 'settings' or 'styles' are not
 present in the theme.json. This leads to issues when comparing user and theme
 variation theme data because Gutenberg global styles provider does add an
 empty object as a value regardless of availability. We're really talking
 about a UI problem here, but this is a quick fix to get around that bug.

---
 .../src/components/global-styles/screen-style-variations.js  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
index 425a802d94847..639e697e3a077 100644
--- a/packages/edit-site/src/components/global-styles/screen-style-variations.js
+++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -109,7 +109,10 @@ function ScreenStyleVariations() {
 				settings: {},
 				styles: {},
 			},
-			...variations,
+			...variations.map( ( variation ) => ( {
+				settings: variation.settings ?? {},
+				styles: variation.styles ?? {},
+			} ) ),
 		];
 	}, [ variations ] );
 

From c8fcaaab02a94d9c59decfe8c6c5c0cba89c4c6a Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 8 Jun 2022 15:16:20 +1000
Subject: [PATCH 2/4] Update aria-label so that one always shows Using
 aria-current because selected isn't support by buttons

---
 .../src/components/global-styles/screen-style-variations.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
index 639e697e3a077..20893021141d2 100644
--- a/packages/edit-site/src/components/global-styles/screen-style-variations.js
+++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -65,6 +65,9 @@ function Variation( { variation } ) {
 		return compareVariations( user, variation );
 	}, [ user, variation ] );
 
+	const styleVariationTitle =
+		variation?.title || __( 'Untitled theme style.' );
+
 	return (
 		<GlobalStylesContext.Provider value={ context }>
 			<div
@@ -78,7 +81,8 @@ function Variation( { variation } ) {
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
 				tabIndex="0"
-				aria-label={ variation?.title }
+				aria-label={ styleVariationTitle }
+				aria-current={ isActive }
 				onFocus={ () => setIsFocused( true ) }
 				onBlur={ () => setIsFocused( false ) }
 			>

From d25ca77b3635e8f7fd0f450945cfc8a1401833b6 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 8 Jun 2022 15:19:39 +1000
Subject: [PATCH 3/4] Remove full stop

---
 .../src/components/global-styles/screen-style-variations.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
index 20893021141d2..63d6c69eb7d40 100644
--- a/packages/edit-site/src/components/global-styles/screen-style-variations.js
+++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -66,7 +66,7 @@ function Variation( { variation } ) {
 	}, [ user, variation ] );
 
 	const styleVariationTitle =
-		variation?.title || __( 'Untitled theme style.' );
+		variation?.title || __( 'Untitled theme style' );
 
 	return (
 		<GlobalStylesContext.Provider value={ context }>

From b3b8999391446c1d02f240e33ad789f7eaee37f8 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 8 Jun 2022 15:22:50 +1000
Subject: [PATCH 4/4] Make sure the title received from the API is there!

---
 .../src/components/global-styles/screen-style-variations.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js
index 63d6c69eb7d40..06f149542dc77 100644
--- a/packages/edit-site/src/components/global-styles/screen-style-variations.js
+++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js
@@ -65,9 +65,6 @@ function Variation( { variation } ) {
 		return compareVariations( user, variation );
 	}, [ user, variation ] );
 
-	const styleVariationTitle =
-		variation?.title || __( 'Untitled theme style' );
-
 	return (
 		<GlobalStylesContext.Provider value={ context }>
 			<div
@@ -81,7 +78,7 @@ function Variation( { variation } ) {
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
 				tabIndex="0"
-				aria-label={ styleVariationTitle }
+				aria-label={ variation?.title }
 				aria-current={ isActive }
 				onFocus={ () => setIsFocused( true ) }
 				onBlur={ () => setIsFocused( false ) }
@@ -114,6 +111,7 @@ function ScreenStyleVariations() {
 				styles: {},
 			},
 			...variations.map( ( variation ) => ( {
+				...variation,
 				settings: variation.settings ?? {},
 				styles: variation.styles ?? {},
 			} ) ),