[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.
*/
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' ) );

View File

@ -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 ] );
}