A11y: make the payment action gateway tabs keyboard accessible

js/src/admin/admin.js

@@ -10650,14 +10650,19 @@ window.frmAdminBuildJS = function() {
 
 	/**
 	 * Syncs aria-selected and the roving tabindex of a radio-backed tablist with its checked radio.
+	 * The Tab stop is the checked tab, or the first visible tab when the checked one is hidden.
 	 *
 	 * @param {HTMLElement} tablist
 	 * @return {void}
 	 */
 	function syncTablistState( tablist ) {
-		tablist.querySelectorAll( 'label[role="tab"]' ).forEach( label => {
+		const tabs = Array.from( tablist.querySelectorAll( 'label[role="tab"]' ) );
+		const visibleTabs = tabs.filter( label => ! label.classList.contains( 'frm_hidden' ) );
+		const tabStop = visibleTabs.find( label => label.control.checked ) || visibleTabs[ 0 ];
+
+		tabs.forEach( label => {
 			label.setAttribute( 'aria-selected', label.control.checked ? 'true' : 'false' );
-			label.setAttribute( 'tabindex', label.control.checked ? '0' : '-1' );
+			label.setAttribute( 'tabindex', label === tabStop ? '0' : '-1' );
 		} );
 	}
 
@@ -10669,7 +10674,7 @@ window.frmAdminBuildJS = function() {
 	 */
 	function initTablistKeyboard( tablist ) {
 		tablist.addEventListener( 'keydown', function( event ) {
-			const tabs = Array.from( tablist.querySelectorAll( 'label[role="tab"]' ) );
+			const tabs = Array.from( tablist.querySelectorAll( 'label[role="tab"]:not(.frm_hidden)' ) );
 			const index = tabs.indexOf( event.target.closest( 'label' ) );
 			if ( -1 === index ) {
 				return;
@@ -12616,6 +12621,8 @@ window.frmAdminBuildJS = function() {
 			},
 		},
 
+		syncTablistState,
+		initTablistKeyboard,
 		applyZebraStriping,
 		initModal,
 		infoModal,

stripe/js/frmtrans_admin.js

@@ -4,6 +4,12 @@
 		const show = val === 'recurring';
 		slideOpts( this, show, '.frm_trans_sub_opts' );
 		toggleOpts( this, ! show, '.frm_gateway_no_recur' );
+
+		// Hiding the selected gateway would leave the tablist without a Tab stop.
+		const tablist = this.closest( '.frm_form_action_settings' ).querySelector( '.frm-long-icon-buttons[role="tablist"]' );
+		if ( tablist ) {
+			frmAdminBuild.syncTablistState( tablist );
+		}
 	}
 
 	function slideOpts( opt, show, c ) {
@@ -51,9 +57,7 @@
 			}
 		);
 
-		settings.get( 0 ).querySelectorAll( '[role="tab"]' ).forEach(
-			tab => tab.setAttribute( 'aria-selected', tab.htmlFor === this.id ? 'true' : 'false' )
-		);
+		frmAdminBuild.syncTablistState( this.closest( '[role="tablist"]' ) );
 
 		wp.hooks.doAction( 'frm_trans_toggled_gateway', { gateway, checked, settings } );
 
@@ -62,11 +66,25 @@
 		} );
 	}
 
+	function initGatewayTablists( container ) {
+		container.querySelectorAll( '.frm-long-icon-buttons[role="tablist"]' ).forEach(
+			tablist => {
+				if ( ! tablist.dataset.frmKeyboard ) {
+					tablist.dataset.frmKeyboard = '1';
+					frmAdminBuild.initTablistKeyboard( tablist );
+				}
+			}
+		);
+	}
+
 	function frmTransLiteAdminJS() {
 		return {
 			init() {
 				const actions = document.getElementById( 'frm_notification_settings' );
 				if ( actions ) {
+					initGatewayTablists( actions );
+					wp.hooks.addAction( 'frm_filled_form_action', 'frmtrans', inside => initGatewayTablists( inside[ 0 ] ) );
+					wp.hooks.addAction( 'frm_added_form_action', 'frmtrans', newAction => initGatewayTablists( newAction ) );
 					jQuery( actions ).on( 'change', '.frm_trans_type', toggleSub );
 
 					document.addEventListener(

stripe/views/action-settings/gateway-buttons.php

@@ -2,6 +2,16 @@
 if ( ! defined( 'ABSPATH' ) ) {
 	die( 'You are not allowed to call this page directly.' );
 }
+
+// Roving tabindex: only one label is a Tab stop, and it can't be a hidden one. Fall back to the first visible gateway when none is selected yet.
+$visible_gateways  = array_filter(
+	$gateways,
+	function ( $gateway ) use ( $form_action ) {
+		return $gateway['recurring'] || 'recurring' !== $form_action->post_content['type'];
+	}
+);
+$selected_gateways = array_intersect( array_keys( $visible_gateways ), (array) $form_action->post_content['gateway'] );
+$tab_stop          = $selected_gateways ? reset( $selected_gateways ) : (string) key( $visible_gateways );
 ?>
 <div class="frm-long-icon-buttons" role="tablist">
 <?php
@@ -32,7 +42,7 @@
 	$label_params = array(
 		'for'           => $toggle_id,
 		'class'         => trim( 'frm_payment_settings_tab frm_gateway_opt ' . $gateway_classes ),
-		'tabindex'      => '0',
+		'tabindex'      => $gateway_name === $tab_stop ? '0' : '-1',
 		'role'          => 'tab',
 		'aria-selected' => $is_active ? 'true' : 'false',
 	);