FluentForms - Autocomplete on fields (WCAG 2.2 SC 1.3.5: Identify Input Purpose (Level AA))

For everyone that is looking for a solution to comply with WCAG 2.2 AA with regards to html autocomplete, I have used the below solution:

For each form attribute where autocomplete is needed, open the advanced tab and give the attribute a specific name (can deviate from the name you gave the attribute in the (admin)label. As an example I have used "Email_AC" for the e-mail attribute and "Naam__AC" for the name. After you have all the attributes added, make sure that for each attribute a code snippet is added in functions.php or as a php-code snippet. When the form is rendered, the autocomplete is added in the html.

add_filter( 'fluentform/rendering_field_data_input_email', 'tct_add_email_autocomplete', 10, 1 );
function tct_add_email_autocomplete( $field ) {
$target_field = 'Email_AC'; // Target field name

// Check if the current field matches the target field
if (isset($field['attributes']['name']) && $field['attributes']['name'] === $target_field) {
$field['attributes']['autocomplete'] = 'email';
}

return $field;
}
add_filter( 'fluentform/rendering_field_data_input_text', 'tct_add_name_autocomplete', 10, 1 );
function tct_add_name_autocomplete( $field ) {
$target_field = 'Naam_AC'; // Target field name

// Check if the current field matches the target field
if (isset($field['attributes']['name']) && $field['attributes']['name'] === $target_field) {
$field['attributes']['autocomplete'] = 'name';
}

return $field;
}

I have used the same mechanism to render a compliant date-attribute that can be entered by blind people. For this to happen I have added a simple text attrbute named "Geboortedatum_AC". Since this is a birth date, I have added 2 html attributes. First the autocomplete and secondly I have changed the attribute in a html date attribute. This to overcome the issue of non-compliancy in the date pickers that are currently available and that are not suitable for keyboard entry (blind people).

add_filter( 'fluentform/rendering_field_data_input_text', 'tct_add_gebdatum_autocomplete', 10, 1 );
function tct_add_gebdatum_autocomplete( $field ) {
$target_field = 'Geboortedatum_AC'; // Target field name
// Check if the current field matches the target field

if (isset($field['attributes']['name']) && $field['attributes']['name'] === $target_field) {

$field['attributes']['autocomplete'] = 'bday';

$field['attributes']['type'] = 'date';

}
return $field;

}

Below a list of the filters that are available to add autocomplete to attributes:

/*
* Common Filter hook names
* Text/Mask: fluentform/rendering_field_data_input_text
* Email: fluentform/rendering_field_data_input_email
* Textarea: fluentform/rendering_field_data_textarea
* Numeric: fluentform/rendering_field_data_input_number
* Range Slider: fluentform/rendering_field_data_rangeslider
* Address: fluentform/rendering_field_data_address
* Country Select: fluentform/rendering_field_data_select_country
* Select: fluentform/rendering_field_data_select
* Radio: fluentform/rendering_field_data_input_radio
* Checkbox: fluentform/rendering_field_data_input_checkbox
* Website URL: fluentform/rendering_field_data_input_url
* Date: fluentform/rendering_field_data_input_date
* Image Upload: fluentform/rendering_field_data_input_image
* File Upload: fluentform/rendering_field_data_input_file
* Phone Field: fluentform/rendering_field_data_phone
* Color Picker: fluentform/rendering_field_data_color_picker
* Net Promoter Score: fluentform/rendering_field_data_net_promoter_score
* Password: fluentform/rendering_field_data_input_password
* Ratings: fluentform/rendering_field_data_ratings
*/