Accessibility - Form errors are not linked to input fields and fields are not marked as invalid

[rickdoesburg]

Which Umbraco Forms version are you using? (Please write the exact version, example: 13.4.0)

13.x.x

Which Umbraco version are you using? (Please write the exact version, example: 13.5.2)

13.6.0

Issue summary

When a form is submitted and a field is marked invalid an error message is shown. This error message isn't programmatically linked to the field and the field isn't marked as invalid.

Specifics

No response

Steps to reproduce

1. Create a form and mark a field as required
2. Submit the form without filling the field
3. An error message is shown, but it isn't linked to the field using aria-attributes

Expected result / actual result

The input is marked with aria-invalid=true, has an aria-describedby="linkToIDofError" and the field-validation-error has an id matching the aria-describedby value.

https://www.w3.org/WAI/WCAG22/working-examples/aria-invalid-data-format/

Fix example:

• Add the aria-describedby="xyz" id to the already existing aria-describedby attribute used for the tooltip

@if (Model.ShowFieldValidaton) { @Html.ValidationMessage(field.Name, new { role = "alert", id = "validation-message-" + field.Id}) }