Set Merchant account details selector as toggle

Author: lauramelos

includes/class-wc-gateway-amazon-payments-advanced-abstract.php

@@ -389,7 +389,7 @@ public function get_form_fields() {
 			),
 			'manual_notice'               => array(
 				'type' => 'custom',
-				'html' => '<p>Problems with automatic setup? <a href="#" class="wcapa-toggle-section" data-toggle="#manual-settings-container, #automatic-settings-container">Click here</a> to manually enter your keys.</p>',
+				'html' => '<p>Problems with automatic setup? Toggle here <a href="#" class="wcapa-toggle-section" data-toggle="#manual-settings-container, #automatic-settings-container"><span class="woocommerce-input-toggle woocommerce-input-toggle--disabled" aria-label="' . esc_attr( __( 'Manually enter your keys', 'woocommerce-gateway-amazon-payments-advanced' ) ) . '">' . esc_attr__( 'Yes', 'woocommerce' ) . '</span></a> to manually enter your keys.</p>',
 			),
 			'manual_container_start'      => array(
 				'type' => 'custom',

src/js/non-block/amazon-wc-admin.js

@@ -351,6 +351,7 @@
 		toggle_visibility: function( e ) {
 			e.preventDefault();
 			var target = $( $( this ).data( 'toggle' ) );
+			$(this).find( 'span' ).toggleClass( 'woocommerce-input-toggle--disabled', 'woocommerce-input-toggle--enabled' );
 			target.toggleClass( 'hidden' );
 			if ( ! $( this ).hasClass( 'wcapa-toggle-scroll' ) ) {
 				return;

src/sass/style-admin.scss

@@ -5,3 +5,8 @@
 .json_key_valid {
 	border: 1px solid #18ff59;
 }
+
+.wcapa-toggle-section:focus {
+	outline: 0;
+	box-shadow: none
+}