Focus success message after AJAX submit

classes/helpers/FrmFormsHelper.php

@@ -532,7 +532,10 @@ public static function get_success_message( $atts ) {
 		$message = do_shortcode( $message );
 		$role    = $atts['role'] ?? 'status';
 
-		return '<div class="' . esc_attr( $atts['class'] ) . '" role="' . esc_attr( $role ) . '">' . $message . '</div>';
+		// tabindex="-1" makes the success message programmatically focusable without adding it
+		// to the tab order, so js/formidable.js can focus it after an AJAX submit without a
+		// screen reader user having to tab to it.
+		return '<div class="' . esc_attr( $atts['class'] ) . '" role="' . esc_attr( $role ) . '" tabindex="-1">' . $message . '</div>';
 	}
 
 	/**

js/formidable.js

@@ -893,7 +893,7 @@
 				response = defaultResponse;
 			} else {
 				// Response is a string. Convert it to an object.
 				response = response.replace( /^\s+|\s+$/g, '' );
 				if ( response.indexOf( '{' ) === 0 ) {
 					response = JSON.parse( response );
 				} else {
@@ -944,7 +944,9 @@
 					function() {
 						afterFormSubmittedBeforeReplace( object, response );
 
-						replaceContent.replaceWith( response.content );
+						const insertedContent = jQuery( response.content );
+						replaceContent.replaceWith( insertedContent );
+						focusFormMessage( insertedContent );
 
 						addUrlParam( response );
 
@@ -1070,6 +1072,24 @@
 		jQuery.ajax( ajaxParams ); // eslint-disable-line no-jquery/no-ajax
 	}
 
+	/**
+	 * Move focus to the top-level success message after an AJAX submit, so screen reader
+	 * users are notified it appeared. Scoped to `insertedContent` (the markup that just
+	 * replaced the form) rather than a wider ancestor, so an unrelated `.frm_message`-classed
+	 * element elsewhere on the page can never be focused instead.
+	 *
+	 * @since x.x
+	 *
+	 * @param {jQuery} insertedContent The markup that just replaced the form.
+	 * @return {void}
+	 */
+	function focusFormMessage( insertedContent ) {
+		const message = insertedContent.filter( '.frm_message' ).add( insertedContent.find( '.frm_message' ) ).get( 0 );
+		if ( message ) {
+			focusInput( message );
+		}
+	}
+
 	function afterFormSubmitted( object, response ) {
 		const tempDiv = document.createElement( 'div' );
 		tempDiv.innerHTML = response.content;
@@ -2284,7 +2304,7 @@
 			: price.split( options.decimal_separator );
 
 		if ( options.thousand_separator ) {
 			split[ 0 ] = split[ 0 ].replace( /\B(?=(\d{3})+(?!\d))/g, options.thousand_separator );
 		}
 
 		return split.join( options.decimal_separator );

tests/cypress/e2e/admin.cy.js

@@ -37,7 +37,11 @@ describe( 'Run some basic Formidale tests', function() {
 			cy.get( '#frm_form_key' ).invoke( 'val' ).then( formKey => {
 				cy.visit( `/wp-admin/admin-ajax.php?action=frm_forms_preview&form=${ formKey }` );
 				cy.get( '.frm_button_submit' ).should( 'contain.text', 'Submit' ).click();
-				cy.get( '.frm_message' ).should( 'contain.text', 'Your responses were successfully submitted. Thank you!' );
+
+				// Focus should move to the success message so screen reader users are notified it appeared.
+				cy.get( '.frm_message' )
+					.should( 'contain.text', 'Your responses were successfully submitted. Thank you!' )
+					.and( 'be.focused' );
 			} );
 		} );
 	} );