[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>

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;
 	}

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 => {

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;
 		}

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));

plugins/woocommerce/changelog/fix-43638

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix focus order on checkout block page.