[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
This commit is contained in:
Gabriel Manussakis 2024-08-01 17:14:18 -03:00 committed by GitHub
parent f20afed89c
commit fa3d8233da
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 3 deletions

View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Keep focus on shipping option input once selected

View File

@ -225,7 +225,7 @@ jQuery( function ( $ ) {
/** /**
* Handles when a shipping method is selected. * Handles when a shipping method is selected.
*/ */
shipping_method_selected: function () { shipping_method_selected: function ( event ) {
var shipping_methods = {}; var shipping_methods = {};
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
@ -249,6 +249,12 @@ jQuery( function ( $ ) {
dataType: 'html', dataType: 'html',
success: function ( response ) { success: function ( response ) {
update_cart_totals_div( response ); update_cart_totals_div( response );
var newCurrentTarget = document.getElementById( event.currentTarget.id );
if ( newCurrentTarget ) {
newCurrentTarget.focus();
}
}, },
complete: function () { complete: function () {
unblock( $( 'div.cart_totals' ) ); unblock( $( 'div.cart_totals' ) );

View File

@ -157,10 +157,10 @@ jQuery( function( $ ) {
wc_checkout_form.reset_update_checkout_timer(); wc_checkout_form.reset_update_checkout_timer();
wc_checkout_form.updateTimer = setTimeout( wc_checkout_form.maybe_update_checkout, '1000' ); 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.reset_update_checkout_timer();
wc_checkout_form.dirtyInput = false; 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() { maybe_update_checkout: function() {
var update_totals = true; var update_totals = true;
@ -425,6 +425,16 @@ jQuery( function( $ ) {
// Re-init methods // Re-init methods
wc_checkout_form.init_payment_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. // Fire updated_checkout event.
$( document.body ).trigger( 'updated_checkout', [ data ] ); $( document.body ).trigger( 'updated_checkout', [ data ] );
} }