bug: Bootstrap form_for generates validation error messages that fail WCAG level A accessibility requirements

[lpar]

Description

Description

When an InputTag in a form_for block fails validation, divWrapper in form/bootstrap/common.go generates one or more div elements under the input element, to contain the error. For example:

<div class="form-group has-error">
<label class="form-label" for="new-client-Email">Email address</label>
<input autocapitalize="none" autocomplete="email" autofocus="" class="form-control is-invalid" id="new-client-Email" name="Email" spellcheck="false" type="email" value="">
<div class="invalid-feedback help-block">Email address is blank.</div>
</div>

Unfortunately, there is nothing to associate the div with the input to tell a screenreader that it's an associated error message.

Expected Behavior

The error messages should have unique id values, and aria-describedby on the input should be a list of the IDs of the error messages.

In addition, it's a good idea to set aria-invalid="true" on fields which have data that has failed validation.

Actual Behavior

Error messages fail WCAG level A accessibility checks.

To Reproduce

No response

Additional Context

Description of how to identify validation errors accessibly:
https://holistica11y.com/wcag-3-3-1-error-identification-level-a/

Note about setting aria-invalid even though not strictly required:
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21

[sio4]

Thank you for reporting the issue and the PR to solve this! I just took a look and merged the PR!