Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork9.6k
[TwigBridgeRessources] add aria-invalid and aria-describedby on form inputs when validation failure exist#60902
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.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:7.4
Are you sure you want to change the base?
Conversation
…inputs when validation failure exist
carsonbot commentedJun 25, 2025
Hey! I see that this is your first PR. That is great! Welcome! Symfony has acontribution guide which I suggest you to read. In short:
Review the GitHub status checks of your pull request and try to solve the reported issues. If some tests are failing, try to see if they are failing because of this change. When two Symfony core team members approve this change, it will be merged and you will become an official Symfony contributor! I am going to sit back now and wait for the reviews. Cheers! Carsonbot |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Looks nice to me. Can you please add a line in the changelog of the bridge, section 7.4?
jeanfrancois-morin commentedJun 26, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
Hi, thanks for your feedback :) |
Context and objective
This PR aims to add the appropriate ARIA attributes (
aria-invalid
andaria-describedby
) to form fields when validation errors are present.The proposal is based on the recommendations ofWCAG 2.1 and specifically the techniqueARIA21, which describes the combined use of
aria-invalid="true"
andaria-describedby="<TEXT_ERROR_ID>"
AFTER user input validation. It seems particularly relevant to implement this since SymfonyUX's LiveComponent allows for an auto-validation system, enabling real-time error feedback to users as they fill out the form.Concretely, users of screen readers will be informed of the presence of errors as soon as they focus on the form field, and if an explicit error message is associated, they can access it immediately.
Note that the
aria-describedby
attribute can point to one or more HTML elements, allowing multiple messages (for example, a help message and an error message) to be vocalized. This PR takes this possibility into account by associating each field with the text passages_field_id_help_
and_field_id_errors_
when applicable.Twig Side
The proposal is integrated into all form themes through the main template
form_div_layout.html.twig
, except for the filesbootstrap_4_layout.html.twig
andbootstrap_4_horizontal_layout.html.twig
. In these files, errors were initially placed inside the associated label, so it is not necessary to add thearia-describedby
attribute. Errors will be vocalized automatically and immediately after the label content. Thearia-invalid="true"
attribute remains necessary to indicate the presence of errors.Let me know if this approach works for you, or if you would like me to modify any aspects.