[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:
parent
f20afed89c
commit
fa3d8233da
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: patch
|
||||||
|
Type: fix
|
||||||
|
|
||||||
|
Keep focus on shipping option input once selected
|
|
@ -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' ) );
|
||||||
|
|
|
@ -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 ] );
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue