From fa3d8233da5bf5a721110f2b0bd5961124e2a1ce Mon Sep 17 00:00:00 2001
From: Gabriel Manussakis <9420947+Manussakis@users.noreply.github.com>
Date: Thu, 1 Aug 2024 17:14:18 -0300
Subject: [PATCH] [Accessibility] Keep focus on shipping option input once
 selected (#49360)

* Keep focus on shipping option input once selected

* Add changelog file

* Remove unnecessary space

* Manage focus of the shipping methods inputs on checkout

* Refactor the code to use native JS instead of jQuery

* Revert native JS usage on jQuery code

* Focus shipping input after re-initing payment methods on checkout

* Replace includes with indexOf for consistency

* Revert usage of native JS

* Remove unnecessary if statement

* Check if event exists before assigning current target

* Get current target with native JS

* Remove unnecessary spaces
---
 plugins/woocommerce/changelog/fix-37606            |  4 ++++
 .../woocommerce/client/legacy/js/frontend/cart.js  |  8 +++++++-
 .../client/legacy/js/frontend/checkout.js          | 14 ++++++++++++--
 3 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/fix-37606

diff --git a/plugins/woocommerce/changelog/fix-37606 b/plugins/woocommerce/changelog/fix-37606
new file mode 100644
index 00000000000..641983f271f
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-37606
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Keep focus on shipping option input once selected
diff --git a/plugins/woocommerce/client/legacy/js/frontend/cart.js b/plugins/woocommerce/client/legacy/js/frontend/cart.js
index d4e70177865..fb4a8aeec04 100644
--- a/plugins/woocommerce/client/legacy/js/frontend/cart.js
+++ b/plugins/woocommerce/client/legacy/js/frontend/cart.js
@@ -225,7 +225,7 @@ jQuery( function ( $ ) {
 		/**
 		 * Handles when a shipping method is selected.
 		 */
-		shipping_method_selected: function () {
+		shipping_method_selected: function ( event ) {
 			var shipping_methods = {};
 
 			// eslint-disable-next-line max-len
@@ -249,6 +249,12 @@ jQuery( function ( $ ) {
 				dataType: 'html',
 				success: function ( response ) {
 					update_cart_totals_div( response );
+					
+					var newCurrentTarget = document.getElementById( event.currentTarget.id );
+
+					if ( newCurrentTarget ) {
+						newCurrentTarget.focus();
+					}
 				},
 				complete: function () {
 					unblock( $( 'div.cart_totals' ) );
diff --git a/plugins/woocommerce/client/legacy/js/frontend/checkout.js b/plugins/woocommerce/client/legacy/js/frontend/checkout.js
index 3cfeca98143..fc5320e8f34 100644
--- a/plugins/woocommerce/client/legacy/js/frontend/checkout.js
+++ b/plugins/woocommerce/client/legacy/js/frontend/checkout.js
@@ -157,10 +157,10 @@ jQuery( function( $ ) {
 			wc_checkout_form.reset_update_checkout_timer();
 			wc_checkout_form.updateTimer = setTimeout( wc_checkout_form.maybe_update_checkout, '1000' );
 		},
-		trigger_update_checkout: function() {
+		trigger_update_checkout: function( event ) {
 			wc_checkout_form.reset_update_checkout_timer();
 			wc_checkout_form.dirtyInput = false;
-			$( document.body ).trigger( 'update_checkout' );
+			$( document.body ).trigger( 'update_checkout', { current_target: event ? event.currentTarget : null } );
 		},
 		maybe_update_checkout: function() {
 			var update_totals = true;
@@ -425,6 +425,16 @@ jQuery( function( $ ) {
 					// Re-init methods
 					wc_checkout_form.init_payment_methods();
 
+					// If there is no errors and the checkout update was triggered by changing the shipping method, focus its radio input.
+					if (
+						data &&
+						'success' === data.result &&
+						args.current_target &&
+						args.current_target.id.indexOf( 'shipping_method' ) !== -1
+					) {
+						document.getElementById( args.current_target.id ).focus();
+					}
+
 					// Fire updated_checkout event.
 					$( document.body ).trigger( 'updated_checkout', [ data ] );
 				}