Add aria-describedby attribute where missing for fields with error

classes/models/FrmFieldFormHtml.php

@@ -292,16 +292,26 @@ private function replace_error_shortcode() {
 		$this->maybe_add_error_id();
 		$error = $this->pass_args['errors'][ 'field' . $this->field_id ] ?? false;
 
-		if ( $error && ! str_contains( $this->html, 'role="alert"' ) && FrmAppHelper::should_include_alert_role_on_field_errors() ) {
+		if ( ! $error ) {
+			FrmShortcodeHelper::remove_inline_conditions( false, 'error', $error, $this->html );
+			return;
+		}
+
+		$include_alert_role_on_field_errors = FrmAppHelper::should_include_alert_role_on_field_errors();
+		$has_alert_role                     = str_contains( $this->html, 'role="alert"' );
+
+		if ( ! $has_alert_role && $include_alert_role_on_field_errors ) {
 			$error_body = self::get_error_body( $this->html );
 
 			if ( is_string( $error_body ) && ! str_contains( $error_body, 'role=' ) ) {
 				$new_error_body = preg_replace( '/class="frm_error/', 'role="alert" class="frm_error', $error_body, 1 );
 				$this->html     = str_replace( '[if error]' . $error_body . '[/if error]', '[if error]' . $new_error_body . '[/if error]', $this->html );
 			}
+		} elseif ( ! $include_alert_role_on_field_errors && $has_alert_role ) {
+			$this->html = str_replace( 'role="alert"', '', $this->html );
 		}
 
-		FrmShortcodeHelper::remove_inline_conditions( ! empty( $error ), 'error', $error, $this->html );
+		FrmShortcodeHelper::remove_inline_conditions( true, 'error', $error, $this->html );
 	}
 
 	/**

classes/models/fields/FrmFieldTextarea.php

@@ -98,13 +98,12 @@
 	 */
 	public function front_field_input( $args, $shortcode_atts ) {
 		$input_html = $this->get_field_input_html_hook( $this->field );
-		$this->add_aria_description( $args, $input_html );
-		$rows = $this->field['max'] ? 'rows="' . esc_attr( $this->field['max'] ) . '" ' : '';
+		$rows       = $this->field['max'] ? 'rows="' . esc_attr( $this->field['max'] ) . '" ' : '';
 
 		// phpcs:disable Generic.WhiteSpace.ScopeIndent
 		return '<textarea name="' . esc_attr( $args['field_name'] ) . '" id="' . esc_attr( $args['html_id'] ) . '" ' .
 			$rows . $input_html . '>' .
 			FrmAppHelper::esc_textarea( $this->field['value'] ) .
 			'</textarea>';
 		// phpcs:enable Generic.WhiteSpace.ScopeIndent
 	}

classes/models/fields/FrmFieldType.php

@@ -92,6 +92,18 @@ abstract class FrmFieldType {
 	 */
 	protected $array_allowed = true;
 
+	/**
+	 * Whether the aria description has already been added to this field's
+	 * inputs during the current render. Prevents a field type that adds it in
+	 * its own front_field_input from having it added a second time by
+	 * add_aria_description_to_inputs.
+	 *
+	 * @since x.x
+	 *
+	 * @var bool
+	 */
+	protected $aria_description_added = false;
+
 	/**
 	 * @var bool|null Whether or not draft fields should be hidden on the front end.
 	 */
@@ -1155,17 +1167,70 @@ public function set_aria_invalid_error( &$shortcode_atts, $args ) {
 	 * @return string
 	 */
 	public function include_front_field_input( $args, $shortcode_atts ) {
+		$this->aria_description_added = false;
+
 		if ( $this->include_front_form_file() ) {
 			$input = $this->include_on_front_form( $args, $shortcode_atts );
 		} else {
 			$input = $this->front_field_input( $args, $shortcode_atts );
 		}
 
+		$this->add_aria_description_to_inputs( $args, $input );
 		$this->load_field_scripts( $args );
 
 		return $input;
 	}
 
+	/**
+	 * Link every input, select, and textarea in the field HTML to the field
+	 * error and description for screen readers.
+	 *
+	 * Applying it here covers single-input fields and multi-input fields
+	 * (checkboxes, radios) in one place, since both produce their final HTML
+	 * through this method.
+	 *
+	 * @since x.x
+	 *
+	 * @param array  $args       Rendering context. May include `field_id`, `html_id` and `errors`.
+	 * @param string $input_html Full field HTML. Passed by reference.
+	 *
+	 * @return void
+	 */
+	public function add_aria_description_to_inputs( $args, &$input_html ) {
+		if ( '' === $input_html || $this->aria_description_added ) {
+			// A front_field_input override (e.g. in Pro) already added it.
+			return;
+		}
+
+		if ( ! isset( $args['field_id'] ) ) {
+			$args['field_id'] = $this->get_field_column( 'id' );
+		}
+
+		if ( empty( $args['html_id'] ) ) {
+			$args['html_id'] = FrmFieldsHelper::get_html_id( $this->field );
+		}
+
+		if ( ! isset( $args['errors'] ) || ! is_array( $args['errors'] ) ) {
+			$args['errors'] = array();
+		}
+
+		$input_html = preg_replace_callback(
+			'/<(input|select|textarea)\b([^>]*?)(\s*\/?)>/i',
+			function ( $matches ) use ( $args ) {
+				// Hidden inputs are not announced to screen readers, so skip them.
+				if ( 'input' === strtolower( $matches[1] ) && preg_match( '/type\s*=\s*["\']hidden["\']/i', $matches[2] ) ) {
+					return $matches[0];
+				}
+
+				$atts = $matches[2];
+				$this->add_aria_description( $args, $atts );
+
+				return '<' . $matches[1] . $atts . $matches[3] . '>';
+			},
+			$input_html
+		);
+	}
+
 	/**
 	 * @return string
 	 */
@@ -1219,7 +1284,6 @@ protected function include_on_front_form( $args, $shortcode_atts ) {
 	public function front_field_input( $args, $shortcode_atts ) {
 		$field_type = $this->html5_input_type();
 		$input_html = $this->get_field_input_html_hook( $this->field );
-		$this->add_aria_description( $args, $input_html );
 		$this->add_extra_html_atts( $args, $input_html );
 
 		return '<input type="' . esc_attr( $field_type ) . '" id="' . esc_attr( $args['html_id'] ) . '" name="' . esc_attr( $args['field_name'] ) . '" value="' . esc_attr( $this->prepare_esc_value() ) . '" ' . $input_html . '/>'; // phpcs:ignore SlevomatCodingStandard.Files.LineLength.LineTooLong
@@ -1528,9 +1592,10 @@ protected function get_field_input_html_hook( $field ) {
 	}
 
 	/**
-	 * Link input to field description for screen readers
+	 * Link input to field description for screen readers.
 	 *
 	 * @since 3.0
+	 * @since x.x Function privacy changed from `protected` to `public`.
 	 *
 	 * @param array  $args
 	 * @param string $input_html
@@ -1575,6 +1640,8 @@ protected function add_aria_description( $args, &$input_html ) {
 		if ( ! $error_comes_first ) {
 			$input_html .= ' data-error-first="0"';
 		}
+
+		$this->aria_description_added = true;
 	}
 
 	/**

classes/views/frm-fields/front-end/checkbox-field.php

@@ -8,6 +8,12 @@
  * Extra line breaks show as space on the front-end when
  * the form is double filtered and not minimized.
  *
+ * @var array      $field
+ * @var string     $field_name
+ * @var bool       $read_only
+ * @var string     $html_id
+ * @var array|null $args
+ *
  * @phpcs:disable Generic.WhiteSpace.ScopeIndent
  *
  * @since 6.30 Added `$hide_label`.
@@ -82,6 +88,7 @@
 		?><input type="checkbox" name="<?php echo esc_attr( $field_name ); ?>[<?php echo esc_attr( $other_opt ? $opt_key : '' ); ?>]" id="<?php echo esc_attr( $html_id ); ?>-<?php echo esc_attr( $opt_key ); ?>" value="<?php echo esc_attr( $field_val ); ?>"<?php
 
 		echo $checked . ' '; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+
 		do_action( 'frm_field_input_html', $field );
 
 		if ( $should_echo_disabled_att ) {

classes/views/frm-fields/front-end/dropdown-field.php

@@ -2,7 +2,8 @@
 /**
  * @package Formidable
  *
- * @var array $field
+ * @var array      $field
+ * @var array|null $args
  */
 
 if ( ! defined( 'ABSPATH' ) ) {
@@ -24,7 +25,9 @@
 	if ( $read_only ) {
 		?>
 		<select <?php do_action( 'frm_field_input_html', $field ); ?>>
-	<?php } else { ?>
+		<?php
+	} else {
+		?>
 		<select name="<?php echo esc_attr( $field_name ); ?>" id="<?php echo esc_attr( $html_id ); ?>" <?php do_action( 'frm_field_input_html', $field ); ?>>
 		<?php
 	}

classes/views/frm-fields/front-end/radio-field.php

@@ -8,6 +8,12 @@
  * Extra line breaks show as space on the front-end when
  * the form is double filtered and not minimized.
  *
+ * @var array      $field
+ * @var string     $field_name
+ * @var bool       $read_only
+ * @var string     $html_id
+ * @var array|null $args
+ *
  * @phpcs:disable Generic.WhiteSpace.ScopeIndent
  *
  * @since 6.30 Added `$hide_label`.

js/formidable.js

@@ -1144,10 +1144,10 @@ function frmFrontFormJS() {
 		}
 
 		container.classList.add( 'frm_blank_field' );
-		const input = container.querySelector( 'input, select, textarea' );
-		const id = getErrorElementId( key, input );
+		const inputs = container.querySelectorAll( 'input, select, textarea' );
+		const id = getErrorElementId( key, inputs[ 0 ] );
 
-		let describedBy = input ? input.getAttribute( 'aria-describedby' ) : null;
+		let describedBy;
 
 		if ( typeof frmThemeOverride_frmPlaceError === 'function' ) { // eslint-disable-line camelcase
 			frmThemeOverride_frmPlaceError( key, jsErrors );
@@ -1160,8 +1160,8 @@ function frmFrontFormJS() {
 				errorHtml = `<div class="frm_error" ${ roleString } id="${ id }">${ jsErrors[ key ] }</div>`;
 			}
 			container.insertAdjacentHTML( 'beforeend', errorHtml );
-
-			if ( input ) {
+			inputs.forEach( input => {
+				describedBy = input ? input.getAttribute( 'aria-describedby' ) : null;
 				if ( ! describedBy ) {
 					describedBy = id;
 				} else if ( ! describedBy.includes( id ) && ! describedBy.includes( 'frm_error_field_' ) ) {
@@ -1173,10 +1173,10 @@ function frmFrontFormJS() {
 					}
 				}
 				input.setAttribute( 'aria-describedby', describedBy );
-			}
+			} );
 		}
 
-		if ( input ) {
+		inputs.forEach( input => {
 			if ( [ 'radio', 'checkbox' ].includes( input.type ) ) {
 				const group = input.closest( '[role="radiogroup"], [role="group"]' );
 				if ( group ) {
@@ -1185,7 +1185,7 @@ function frmFrontFormJS() {
 			} else {
 				input.setAttribute( 'aria-invalid', 'true' );
 			}
-		}
+		} );
 
 		jQuery( document ).trigger( 'frmAddFieldError', [ jQuery( container ), key, jsErrors ] );
 	}
@@ -1219,9 +1219,7 @@ function frmFrontFormJS() {
 		}
 
 		const errorMessage = container.querySelector( '.frm_error' );
-		const errorId = errorMessage ? errorMessage.id : '';
 		const input = container.querySelector( 'input, select, textarea' );
-		let describedBy = input ? input.getAttribute( 'aria-describedby' ) : null;
 
 		container.classList.remove( 'frm_blank_field', 'has-error' );
 
@@ -1237,25 +1235,43 @@ function frmFrontFormJS() {
 		}
 
 		if ( errorMessage ) {
+			removeElementFromInputDescribedBy( errorMessage );
 			errorMessage.remove();
 		}
+	}
 
-		if ( input ) {
-			input.removeAttribute( 'aria-describedby' );
-			if ( describedBy ) {
-				describedBy = describedBy.replace( errorId, '' ).trim();
-				if ( describedBy ) {
-					input.setAttribute( 'aria-describedby', describedBy );
-				}
+	/**
+	 * Updates the aria-describedby attribute, removing the target element ID.
+	 *
+	 * @since x.x
+	 *
+	 * @param {HTMLElement} el The target element that is removed from the aria-describedby data.
+	 * @return {void}
+	 */
+	function removeElementFromInputDescribedBy( el ) {
+		document.querySelectorAll( `[aria-describedby*="${ el.id }"]` ).forEach( input => {
+			let ariaDescribedBy = input.getAttribute( 'aria-describedby' ).split( ' ' );
+			ariaDescribedBy = ariaDescribedBy.filter( value => {
+				const trimmedValue = value.trim();
+				return trimmedValue && trimmedValue !== el.id;
+			} );
+
+			if ( ariaDescribedBy.length ) {
+				input.setAttribute( 'aria-describedby', ariaDescribedBy.join( ' ' ) );
+				return;
 			}
-		}
+			input.removeAttribute( 'aria-describedby' );
+		} );
 	}
 
 	function removeAllErrors() {
 		document.querySelectorAll( '.form-field' ).forEach( field => {
 			field.classList.remove( 'frm_blank_field', 'has-error' );
 		} );
-		document.querySelectorAll( '.form-field .frm_error' ).forEach( error => error.remove() );
+		document.querySelectorAll( '.form-field .frm_error' ).forEach( el => {
+			removeElementFromInputDescribedBy( el );
+			el.remove();
+		} );
 		document.querySelectorAll( '.frm_error_style' ).forEach( error => error.remove() );
 	}