[TwigBridgeRessources] add aria-invalid and aria-describedby on form inputs when validation failure exist #60902
Conversation
|
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 :) |
| @@ -187,7 +183,7 @@ | |||
| {% block form_errors -%} | |||
| {% if errors|length > 0 -%} | |||
| {% if form is not rootform %}<span class="help-block">{% else %}<div class="alert alert-danger">{% endif %} | |||
| <ul class="list-unstyled"> | |||
| <ul class="list-unstyled" id="{{ id ~ "_errors" }}"> | |||
There was a problem hiding this comment.
I'm pretty sure this isn't covered by any BC policy, but... it's been considered a best practice for years in the Symfony / front-end aware community. I'm just a bit concerned this might lead to duplicate ids on the page.
So I’d recommend we communicate clearly and visibly about this (very welcome!) change—just to avoid penalizing those who were being cautious.
| {%- if help is not empty -%} | ||
| {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%} | ||
| {%- set attr = attr|merge({'aria-describedby': id ~"_help"}) -%} |
|
A big 👍 for the direction — we just need to be careful here, or we might end up hurting the very people who were already sensitive to this topic. |
…inputs when validation failure exist
|
Hi @smnandre, you left a review on this PR 2 weeks ago, and because there was conflicts on it since last changes on branch 7.4, I wanted to rebase it. But I think I've made a (big) mistake 🫣. So sorry, your comments are gone, and instead of 11 files changed, there's now 678 files. This is my first contrib to the framework. |
|
TL;DR; these changes will break a lot of form integrations... I need to see once you have rebased You did rename form blocks, right ? Or moved some attributes from place ? If "yes" this will break a lot of websites ... :| |
|
Thanks for your quick feedback. |
|
And to be very precise, the rebase is done and I don't understand why I got this result of 678 files. |
b8d1c4c to
d9ca05c
Compare
|
@smnandre please forget my last message, rebase is done with a clean history now I think. Sorry for my confusion. |
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.