[TwigBridgeRessources] add aria-invalid and aria-describedby on form inputs when validation failure exist #60902
+52
−47
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…inputs when validation failure exist
|
Hey! I see that this is your first PR. That is great! Welcome! Symfony has a contribution 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 |
|
Hi, thanks for your feedback :) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Context and objective
This PR aims to add the appropriate ARIA attributes (
aria-invalidandaria-describedby) to form fields when validation errors are present.The proposal is based on the recommendations of WCAG 2.1 and specifically the technique ARIA21, 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-describedbyattribute 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.twigandbootstrap_4_horizontal_layout.html.twig. In these files, errors were initially placed inside the associated label, so it is not necessary to add thearia-describedbyattribute. 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.