Merge pull request #22936 from woocommerce/fix/21814

Setup Wizard: Add keyboard events for custom input toggles
This commit is contained in:
Mike Jolley 2019-03-12 09:28:37 +00:00 committed by GitHub
commit d8f665bb89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 13 deletions

View File

@ -670,6 +670,7 @@ body {
position: relative;
max-height: 1.5em;
align-self: flex-start;
order: 3;
}
.wc-wizard-service-toggle {

View File

@ -67,6 +67,15 @@ jQuery( function( $ ) {
}
} );
$( '.wc-wizard-services' ).on( 'keyup', function( e ) {
var code = e.keyCode || e.which,
$focused = $( document.activeElement );
if ( $focused.is( '.wc-wizard-service-toggle, .wc-wizard-service-enable' ) && ( 13 === code || 32 === code ) ) {
$focused.find( ':input' ).click();
}
} );
$( '.wc-wizard-services' ).on( 'click', '.wc-wizard-service-enable', function( e ) {
var eventTarget = $( e.target );

View File

@ -1630,6 +1630,18 @@ class WC_Admin_Setup_Wizard {
<p><?php echo esc_html( $item_info['name'] ); ?></p>
<?php endif; ?>
</div>
<div class="wc-wizard-service-enable">
<span class="wc-wizard-service-toggle <?php echo esc_attr( $should_enable_toggle ? '' : 'disabled' ); ?>" tabindex="0">
<input
id="wc-wizard-service-<?php echo esc_attr( $item_id ); ?>"
type="checkbox"
name="wc-wizard-service-<?php echo esc_attr( $item_id ); ?>-enabled"
value="yes" <?php checked( $should_enable_toggle ); ?>
data-plugins="<?php echo wc_esc_json( wp_json_encode( $plugins ) ); ?>"
/>
<label for="wc-wizard-service-<?php echo esc_attr( $item_id ); ?>">
</span>
</div>
<div class="wc-wizard-service-description">
<?php echo wp_kses_post( wpautop( $item_info['description'] ) ); ?>
<?php if ( ! empty( $item_info['settings'] ) ) : ?>
@ -1679,18 +1691,6 @@ class WC_Admin_Setup_Wizard {
</div>
<?php endif; ?>
</div>
<div class="wc-wizard-service-enable">
<span class="wc-wizard-service-toggle <?php echo esc_attr( $should_enable_toggle ? '' : 'disabled' ); ?>">
<input
id="wc-wizard-service-<?php echo esc_attr( $item_id ); ?>"
type="checkbox"
name="wc-wizard-service-<?php echo esc_attr( $item_id ); ?>-enabled"
value="yes" <?php checked( $should_enable_toggle ); ?>
data-plugins="<?php echo wc_esc_json( wp_json_encode( $plugins ) ); ?>"
/>
<label for="wc-wizard-service-<?php echo esc_attr( $item_id ); ?>">
</span>
</div>
</li>
<?php
}
@ -1768,7 +1768,7 @@ class WC_Admin_Setup_Wizard {
<div class="wc-wizard-service-description">
<?php esc_html_e( 'Collect payments from customers offline.', 'woocommerce' ); ?>
</div>
<div class="wc-wizard-service-enable">
<div class="wc-wizard-service-enable" tabindex="0">
<input class="wc-wizard-service-list-toggle" id="wc-wizard-service-list-toggle" type="checkbox">
<label for="wc-wizard-service-list-toggle"></label>
</div>