Describe the bug

WCAG 2.1: 3.3.1 Error identification

When entering a field that has some validation criteria on it, the field receives the error state instantly after receiving focus.

The validation should happen on loss of focus instead, i.e. when the input loses focus. Otherwise the user may wonder why the input has an error state even when no data has been entered yet.

As defined by the WCAG 2.1, the definition of "input error" is the following:

input error
information provided by the user that is not accepted

https://www.w3.org/TR/WCAG21/#dfn-input-error

When the user has not provided any information, it should not be considered an error.

In addition, the user should be provided with sufficient information on how to correct the error they have made. The message "There is an error in this field" does not provide much information on how to correct the mistake they have made.

To Reproduce

1. Go to submit a new proposal
2. Move focus to the "Title" field
3. Notice that the field receives the error status with the highlighted error border instantly

Expected behavior

I would expect the error status to be received after the input field loses its focus and if the input still has an error.

The error should be also announced for screen readers instantely (aria-live="assertive") to provide the user sufficient information about the error and make them notice it instantly.

Screenshots

This is an example of the proposal form title just after receiving focus:

Extra data

• Device: (any)
• Device OS: (any)
• Browser: (any)
• Decidim Version: 0.28.0.dev
• Decidim installation: Alpha.Try

Additional context

https://www.w3.org/TR/WCAG21/#error-identification
https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html
https://hidde.blog/how-to-make-inline-error-messages-accessible/
https://www.smashingmagazine.com/2023/02/guide-accessible-form-validation/