Rock/form actions a11y keyboard nav

classes/views/frm-form-actions/_action_icon.php

@@ -13,7 +13,7 @@
 	)
 );
 ?>
-<li class="frm-card-item frm-card-item--outlined frm-action<?php echo esc_attr( $group_class . ( isset( $data['data-upgrade'] ) ? ' frm-not-installed' : '' ) ); ?>">
+<li class="frm-card-item frm-card-item--outlined frm-action<?php echo esc_attr( $group_class . ( isset( $data['data-upgrade'] ) ? ' frm-not-installed' : '' ) ); ?>" tabindex="0">
 	<div class="frm-h-stack-xs frm-w-full">
 		<span class="frm-border-icon frm-shrink-0">
 			<?php FrmAppHelper::icon_by_class( $action_control->action_options['classes'], FrmFormActionsController::get_action_icon_atts( $action_control ) ); ?>

classes/views/frm-form-actions/form_action.php

@@ -20,7 +20,7 @@
 	class="widget frm_form_action_settings frm_single_<?php echo esc_attr( $form_action->post_excerpt ); ?>_settings <?php echo esc_attr( $form_action->post_status === 'publish' ? '' : 'frm_disabled_action' ); ?>"
 	<?php FrmAppHelper::array_to_html_params( $data_attrs, true ); ?>
 >
-	<div class="widget-top frm-h-stack-xs frm-cursor-pointer">
+	<div class="widget-top frm-h-stack-xs frm-cursor-pointer" tabindex="0">
 		<div class="widget-title frm-flex-full">
 			<h4 class="frm-h-stack-xs frm-text-md">
 				<span class="frm-border-icon frm-border-icon--small"><?php FrmAppHelper::icon_by_class( $action_control->action_options['classes'], FrmFormActionsController::get_action_icon_atts( $action_control ) ); ?></span>

classes/views/frm-form-actions/settings.php

@@ -92,7 +92,7 @@
 						);
 						$single_action_attrs['data-medium'] = 'settings-' . $action;
 						?>
-							<li class="frm-card-item frm-card-item--outlined frm-action frm-not-installed frm-group-<?php echo esc_attr( $group_key ); ?>">
+							<li class="frm-card-item frm-card-item--outlined frm-action frm-not-installed frm-group-<?php echo esc_attr( $group_key ); ?>" tabindex="0">
 								<div class="frm-h-stack-xs frm-w-full">
 									<span class="frm-border-icon">
 										<?php FrmAppHelper::icon_by_class( $action_icon, $icon_atts ); ?>

js/src/admin/admin.js

@@ -550,6 +550,50 @@ window.frmAdminBuildJS = function() {
 		}
 	}
 
+	/**
+	 * Adds keyboard support for form action widgets and their icons.
+	 *
+	 * @since x.x
+	 *
+	 * @param {jQuery} wrapClass Delegated jQuery scope for the current page wrap.
+	 * @return {void}
+	 */
+	function bindFormActionsKeyboardHandlers( wrapClass ) {
+		// Expand/collapse the widget on Enter or Space when the header itself is focused.
+		wrapClass.on( 'keydown', '.widget-top', event => {
+			// Ignore keys bubbling up from focusable descendants (toggle, delete, duplicate, arrow button).
+			if ( event.currentTarget !== event.target ) {
+				return;
+			}
+
+			if ( event.key === 'Enter' || event.key === ' ' ) {
+				event.preventDefault();
+				clickWidget( event, event.currentTarget );
+			}
+		} );
+
+		/**
+		 * Builds a delegated keydown handler that forwards a specific key to a native click.
+		 *
+		 * @param {string} key The `KeyboardEvent.key` value that should activate the target.
+		 * @return {Function} jQuery event handler.
+		 */
+		const activateOnKey = key => event => {
+			if ( event.key !== key ) {
+				return;
+			}
+
+			event.preventDefault();
+			event.currentTarget.click();
+		};
+
+		// `<a>` icons activate on Enter natively, so only Space needs to be wired up.
+		wrapClass.on( 'keydown', '.frm_form_action_settings .frm_duplicate_form_action, .frm_form_action_settings .frm_remove_form_action', activateOnKey( ' ' ) );
+
+		// The post-status toggle's label already handles Space, so only Enter needs to be wired up.
+		wrapClass.on( 'keydown', '.frm_form_action_settings .frm_toggle', activateOnKey( 'Enter' ) );
+	}
+
 	function loadTooltips() {
 		const wrapClass = jQuery( '.wrap, .frm_wrap' );
 		const confirmModal = document.getElementById( 'frm_confirm_modal' );
@@ -566,6 +610,7 @@ window.frmAdminBuildJS = function() {
 		wrapClass.on( 'click', 'a[data-frmhide], a[data-frmshow]', hideShowItem );
 		wrapClass.on( 'change', 'input[data-frmhide], input[data-frmshow]', hideShowItem );
 		wrapClass.on( 'click', '.widget-top,a.widget-action', clickWidget );
+		bindFormActionsKeyboardHandlers( wrapClass );
 
 		wrapClass.on( 'mouseenter.frm', '.frm_bstooltip, .frm_help', function() {
 			jQuery( this ).off( 'mouseenter.frm' );
@@ -7618,6 +7663,7 @@ window.frmAdminBuildJS = function() {
 			title = `${ baseTitle } (${ n })`;
 			n++;
 		}
+
 		return title;
 	}
 

js/src/components/tabs/class-tabs-navigator.js

@@ -32,8 +32,19 @@ export class frmTabsNavigator {
 			return;
 		}
 
+		const navList = this.navs[ 0 ]?.parentElement;
+		if ( navList ) {
+			navList.setAttribute( 'role', 'tablist' );
+		}
+
 		this.navs.forEach( ( nav, index ) => {
+			nav.setAttribute( 'tabindex', '0' );
+			nav.setAttribute( 'role', 'tab' );
+			nav.setAttribute( 'aria-selected', String( nav.classList.contains( 'frm-active' ) ) );
+
 			nav.addEventListener( 'click', event => this.onNavClick( event, index ) );
+			nav.addEventListener( 'keydown', event => this.onNavKeydown( event, index ) );
+
 			if ( nav.classList.contains( 'frm-active' ) ) {
 				this.initSlideTrackUnderline( nav );
 				if ( this.filterTarget ) {
@@ -56,6 +67,8 @@ export class frmTabsNavigator {
 
 		this.removeActiveClassnameFromNavs();
 		navItem.classList.add( 'frm-active' );
+		this.navs.forEach( nav => nav.setAttribute( 'aria-selected', 'false' ) );
+		navItem.setAttribute( 'aria-selected', 'true' );
 		this.initSlideTrackUnderline( navItem );
 
 		if ( this.filterTarget ) {
@@ -72,6 +85,20 @@ export class frmTabsNavigator {
 		}
 	}
 
+	/**
+	 * Handles keyboard activation for tab navigation.
+	 *
+	 * @param {KeyboardEvent} event The keydown event.
+	 * @param {number}        index The index of the focused tab in `this.navs`.
+	 * @return {void}
+	 */
+	onNavKeydown( event, index ) {
+		if ( event.key === 'Enter' || event.key === ' ' ) {
+			event.preventDefault();
+			this.onNavClick( event, index );
+		}
+	}
+
 	initSlideTrackUnderline( nav ) {
 		const activeNav = nav !== undefined ? nav : this.navs.filter( nav => nav.classList.contains( 'frm-active' ) );
 		this.positionUnderlineIndicator( activeNav );

resources/scss/admin/abstracts/_focus.scss

@@ -0,0 +1,16 @@
+@mixin focus-outline(
+	$width: 1px,
+	$offset: 2px,
+	$color: var(--primary-500),
+	$radius: null
+) {
+
+	&:focus-visible {
+		outline: $width solid $color;
+		outline-offset: $offset;
+
+		@if $radius {
+			border-radius: $radius;
+		}
+	}
+}

resources/scss/admin/components/form/_form-actions.scss

@@ -76,7 +76,8 @@
 		}
 	}
 
-	&:hover .frm_single_action {
+	&:hover .frm_single_action,
+	&:focus-within .frm_single_action {
 		display: flex;
 	}
 }
@@ -106,6 +107,8 @@
 		border-color: var(--grey-300);
 		box-shadow: none;
 		transition: background-color 200ms ease-out;
+
+		@include focus-outline($offset: -1px);
 	}
 
 	.widget-title {
@@ -120,14 +123,23 @@
 
 	.frm_email_icons {
 		display: none;
+
+		a,
+		.frm_toggle {
+
+			@include focus-outline($radius: var(--small-radius));
+		}
 	}
 
 	.widget-action {
 		color: var(--grey-800);
 		transition: transform 200ms ease-out;
+
+		@include focus-outline($radius: var(--small-radius));
 	}
 
-	&:hover {
+	&:hover,
+	&:focus-within {
 
 		.widget-top {
 			background: var(--grey-25);

resources/scss/admin/frm_admin.scss

@@ -11,6 +11,7 @@
  */
 @import "../font_icons";
 @import "base/variables";
+@import "abstracts/focus";
 @import "base/typography/font";
 @import "utilities/layout/z-index";
 @import "base/typography/text";