Skip to content

Stop adding aria invalid directly to radio button and checkbox inputs #2507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Crabcyborg merged 4 commits into from
Sep 25, 2025
Merged

Stop adding aria invalid directly to radio button and checkbox inputs #2507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cc90212
Stop adding aria-invalid directly to radio button and checkbox inputs
Crabcyborg Sep 23, 2025
fe9955b
Add comments
Crabcyborg Sep 23, 2025
fe333e2
Also set it when validating JS
Crabcyborg Sep 23, 2025
1603355
Add a type check
Crabcyborg Sep 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions classes/models/FrmFieldFormHtml.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -526,6 +526,11 @@ private function add_multiple_input_attributes() {
$attributes['aria-required'] = 'true';
}

// Add 'aria-invalid' attribute to the group if there are errors.
if ( isset( $this->pass_args['errors'][ 'field' . $this->field_id ] ) ) {
$attributes['aria-invalid'] = 'true';
}

Comment thread
Crabcyborg marked this conversation as resolved.
// Concatenate attributes into a string, and replace the role="group" in the HTML with the attributes string.
$html_attributes = FrmAppHelper::array_to_html_params( $attributes );
$this->html = str_replace( ' role="group"', $html_attributes, $this->html );
Expand Down
13 changes: 13 additions & 0 deletions classes/models/fields/FrmFieldCheckbox.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,4 +108,17 @@ protected function show_readonly_hidden() {
protected function prepare_import_value( $value, $atts ) {
return $this->get_multi_opts_for_import( $value );
}

/**
* Unset aria-invalid for checkboxes because it's not valid for checkboxes.
* Instead aria-invalid is added to the checkbox group parent element.
*
* @since x.x
*
* @param array $shortcode_atts
* @param array $args
*/
public function set_aria_invalid_error( &$shortcode_atts, $args ) {
unset( $shortcode_atts['aria-invalid'] );
}
}
13 changes: 13 additions & 0 deletions classes/models/fields/FrmFieldRadio.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,4 +109,17 @@ protected function include_front_form_file() {
protected function show_readonly_hidden() {
return true;
}

/**
* Unset aria-invalid for radio buttons because it's not valid for radio buttons.
* Instead aria-invalid is added to the radiogroup parent element.
*
* @since x.x
*
* @param array $shortcode_atts
* @param array $args
*/
public function set_aria_invalid_error( &$shortcode_atts, $args ) {
unset( $shortcode_atts['aria-invalid'] );
}
}
14 changes: 12 additions & 2 deletions js/formidable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1147,7 +1147,12 @@ function frmFrontFormJS() {

input.attr( 'aria-describedby', describedBy );
}
input.attr( 'aria-invalid', true );

if ( [ 'radio', 'checkbox' ].includes( input.attr( 'type' ) ) ) {
input.closest( '[role="radiogroup"], [role="group"]' ).attr( 'aria-invalid', true );
} else {
input.attr( 'aria-invalid', true );
}
Comment thread
Crabcyborg marked this conversation as resolved.

jQuery( document ).trigger( 'frmAddFieldError', [ $fieldCont, key, jsErrors ] );
}
Expand Down Expand Up @@ -1186,8 +1191,13 @@ function frmFrontFormJS() {
fieldContainer.classList.remove( 'frm_blank_field', 'has-error' );
}

if ( 'true' === input.attr( 'aria-invalid' ) ) {
input.attr( 'aria-invalid', false );
} else if ( [ 'radio', 'checkbox' ].includes( input.attr( 'type' ) ) ) {
input.closest( '[role="radiogroup"], [role="group"]' ).attr( 'aria-invalid', false );
}

Comment thread
Crabcyborg marked this conversation as resolved.
errorMessage.remove();
input.attr( 'aria-invalid', false );
input.removeAttr( 'aria-describedby' );

if ( typeof describedBy !== 'undefined' ) {
Expand Down