From c9aa65a22f262605abc9aa9524b55d30d8499f00 Mon Sep 17 00:00:00 2001
From: Gabriel Manussakis <9420947+Manussakis@users.noreply.github.com>
Date: Tue, 20 Aug 2024 10:42:38 -0300
Subject: [PATCH] [Accessibility] Fix focus order on checkout block page
 (#49649)

* Render total blocks before fields on checkout

* Reverse checkout total blocks position on desktop

* Add changelog file

* Add conditional styles to reverse checkout blocks order

---------

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
---
 .../assets/js/base/components/sidebar-layout/style.scss      | 4 ++++
 .../woocommerce-blocks/assets/js/blocks/checkout/edit.tsx    | 2 +-
 .../assets/js/blocks/checkout/styles/editor.scss             | 4 ++++
 .../assets/js/blocks/checkout/styles/style.scss              | 5 +++++
 plugins/woocommerce/changelog/fix-43638                      | 4 ++++
 5 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 plugins/woocommerce/changelog/fix-43638

diff --git a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
index 044f4d8ea5a..0c248edf928 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
@@ -4,6 +4,10 @@
 	margin: 0 auto $gap;
 	position: relative;
 
+	&:has(> :last-child.wp-block-woocommerce-checkout-fields-block) {
+		flex-direction: row-reverse;
+	}
+
 	.wc-block-must-login-prompt {
 		display: block;
 	}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx
index 54ca73d261f..99ed87843fc 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/edit.tsx
@@ -86,8 +86,8 @@ export const Edit = ( {
 	}, [ clientId ] );
 
 	const defaultTemplate = [
-		[ 'woocommerce/checkout-fields-block', {}, [] ],
 		[ 'woocommerce/checkout-totals-block', {}, [] ],
+		[ 'woocommerce/checkout-fields-block', {}, [] ],
 	] as TemplateArray;
 
 	const toggleAttribute = ( key: keyof Attributes ): void => {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/editor.scss
index df95a310dd6..a0c60460914 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/editor.scss
@@ -8,6 +8,10 @@
 		align-items: flex-start;
 		padding-left: 5px;
 
+		&:has(> :first-child.wp-block-woocommerce-checkout-totals-block) {
+			flex-direction: row-reverse;
+		}
+
 		.wc-block-checkout__additional_fields {
 			padding: 0;
 		}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/style.scss
index b1ca21dd3ee..eadb4280e4d 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/styles/style.scss
@@ -43,6 +43,11 @@
 	flex-wrap: wrap;
 	margin: 0 auto $gap;
 	position: relative;
+
+	&:has(> :last-child.wp-block-woocommerce-checkout-fields-block) {
+		flex-direction: row-reverse;
+	}
+
 	.wp-block-woocommerce-checkout-totals-block {
 		width: 35%;
 		padding-left: math.percentage(math.div($gap-large, 1060px));
diff --git a/plugins/woocommerce/changelog/fix-43638 b/plugins/woocommerce/changelog/fix-43638
new file mode 100644
index 00000000000..dfa251b8e65
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-43638
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix focus order on checkout block page.