[TwigBridgeRessources] add aria-invalid and aria-describedby on form inputs when validation failure exist

jeanfrancois-morin · jeanfrancois-morin · commit bc2c2e46aefa · 2025-07-24T08:12:49.000+02:00
diff --git a/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_3_horizontal_layout.html.twig b/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_3_horizontal_layout.html.twig
@@ -22,11 +22,7 @@ col-sm-2
 
 {# Rows #}
 
-{% block form_row -%}
-    {%- set widget_attr = {} -%}
-    {%- if help -%}
-        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
-    {%- endif -%}
+{% block form_row_render -%}
     <div{% with {attr: row_attr|merge({class: (row_attr.class|default('') ~ ' form-group' ~ ((not compound or force_error|default(false)) and not valid ? ' has-error'))|trim})} %}{{ block('attributes') }}{% endwith %}>
         {{- form_label(form) -}}
         <div class="{{ block('form_group_class') }}">
@@ -35,7 +31,7 @@ col-sm-2
             {{- form_errors(form) -}}
         </div>
 {##}</div>
-{%- endblock form_row %}
+{%- endblock form_row_render -%}
 
 {% block submit_row -%}
     <div{% with {attr: row_attr|merge({class: (row_attr.class|default('') ~ ' form-group')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
diff --git a/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_3_layout.html.twig b/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_3_layout.html.twig
@@ -127,18 +127,14 @@
 
 {# Rows #}
 
-{% block form_row -%}
-    {%- set widget_attr = {} -%}
-    {%- if help -%}
-        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
-    {%- endif -%}
+{% block form_row_render -%}
     <div{% with {attr: row_attr|merge({class: (row_attr.class|default('') ~ ' form-group' ~ ((not compound or force_error|default(false)) and not valid ? ' has-error'))|trim})} %}{{ block('attributes') }}{% endwith %}>
         {{- form_label(form) }} {# -#}
         {{ form_widget(form, widget_attr) }} {# -#}
         {{- form_help(form) -}}
         {{ form_errors(form) }} {# -#}
     </div> {# -#}
-{%- endblock form_row %}
+{%- endblock form_row_render -%}
 
 {% block button_row -%}
     <div{% with {attr: row_attr|merge({class: (row_attr.class|default('') ~ ' form-group')|trim})} %}{{ block('attributes') }}{% endwith %}>
@@ -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" }}">
         {%- for error in errors -%}
             <li><span class="glyphicon glyphicon-exclamation-sign"></span> {{ error.message }}</li>
         {%- endfor -%}
diff --git a/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_horizontal_layout.html.twig b/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_horizontal_layout.html.twig
@@ -24,10 +24,14 @@ col-sm-2
     {%- if expanded is defined and expanded -%}
         {{ block('fieldset_form_row') }}
     {%- else -%}
-    {%- set widget_attr = {} -%}
+    {%- set attr = {} -%}
     {%- if help -%}
-        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
+        {%- set attr = attr|merge({'aria-describedby': id ~"_help"}) -%}
+    {%- endif -%}
+    {%- if errors|length > 0 -%}
+        {%- set attr = attr|merge({'aria-invalid': 'true'}) -%}
     {%- endif -%}
+    {%- set widget_attr = {attr: attr} -%}
         <div{% with {attr: row_attr|merge({class: (row_attr.class|default('') ~ ' form-group row' ~ ((not compound or force_error|default(false)) and not valid ? ' is-invalid'))|trim})} %}{{ block('attributes') }}{% endwith %}>
             {{- form_label(form) -}}
             <div class="{{ block('form_group_class') }}">
diff --git a/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig b/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig
@@ -282,10 +282,14 @@
     {%- if compound is defined and compound -%}
         {%- set element = 'fieldset' -%}
     {%- endif -%}
-    {%- set widget_attr = {} -%}
+    {%- set attr = {} -%}
     {%- if help -%}
-        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
+        {%- set attr = attr|merge({'aria-describedby': id ~"_help"}) -%}
     {%- endif -%}
+    {%- if errors|length > 0 -%}
+        {%- set attr = attr|merge({'aria-invalid': 'true'}) -%}
+    {%- endif -%}
+    {%- set widget_attr = {attr: attr} -%}
     <{{ element|default('div') }}{% with {attr: row_attr|merge({class: (row_attr.class|default('') ~ ' form-group')|trim})} %}{{ block('attributes') }}{% endwith %}>
         {{- form_label(form) -}}
         {{- form_widget(form, widget_attr) -}}
diff --git a/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_5_horizontal_layout.html.twig b/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_5_horizontal_layout.html.twig
@@ -23,14 +23,10 @@
 
 {# Rows #}
 
-{% block form_row -%}
+{% block form_row_render -%}
     {%- if expanded is defined and expanded -%}
         {{ block('fieldset_form_row') }}
     {%- else -%}
-        {%- set widget_attr = {} -%}
-        {%- if help -%}
-            {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
-        {%- endif -%}
         {%- set row_class = row_class|default(row_attr.class|default('mb-3')) -%}
         {%- set is_form_floating = is_form_floating|default('form-floating' in row_class) -%}
         {%- set is_input_group = is_input_group|default('input-group' in row_class) -%}
@@ -68,7 +64,7 @@
             {%- endif -%}
         {##}</div>
     {%- endif -%}
-{%- endblock form_row %}
+{%- endblock form_row_render %}
 
 {% block fieldset_form_row -%}
     {%- set widget_attr = {} -%}
diff --git a/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_5_layout.html.twig b/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_5_layout.html.twig
@@ -320,14 +320,10 @@
 
 {# Rows #}
 
-{%- block form_row -%}
+{%- block form_row_render -%}
     {%- if compound is defined and compound -%}
         {%- set element = 'fieldset' -%}
     {%- endif -%}
-    {%- set widget_attr = {} -%}
-    {%- if help -%}
-        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
-    {%- endif -%}
     {%- set row_class = row_class|default(row_attr.class|default('mb-3')|trim) -%}
     <{{ element|default('div') }}{% with {attr: row_attr|merge({class: row_class})} %}{{ block('attributes') }}{% endwith %}>
         {%- if 'form-floating' in row_class -%}
@@ -340,7 +336,7 @@
         {{- form_help(form) -}}
         {{- form_errors(form) -}}
     </{{ element|default('div') }}>
-{%- endblock form_row %}
+{%- endblock form_row_render %}
 
 {%- block button_row -%}
     <div{% with {attr: row_attr|merge({class: row_attr.class|default('mb-3')|trim})} %}{{ block('attributes') }}{% endwith %}>
@@ -352,9 +348,11 @@
 
 {%- block form_errors -%}
     {%- if errors|length > 0 -%}
+        <div id="{{ id ~ "_errors" }}">
         {%- for error in errors -%}
             <div class="{% if form is not rootform %}invalid-feedback{% else %}alert alert-danger{% endif %} d-block">{{ error.message }}</div>
         {%- endfor -%}
+        </div>
     {%- endif %}
 {%- endblock form_errors %}
 
diff --git a/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig b/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig
@@ -366,17 +366,32 @@
 {%- endblock repeated_row -%}
 
 {%- block form_row -%}
-    {%- set widget_attr = {} -%}
+    {%- set attr = {} -%}
+    {%- set aria_describedby = [] -%}
     {%- if help -%}
-        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
+        {%- set aria_describedby = aria_describedby|merge([id ~ "_help"]) -%}
     {%- endif -%}
+    {%- if errors|length > 0 -%}
+        {%- set aria_describedby = aria_describedby|merge([id ~ "_errors"]) -%}
+    {%- endif -%}
+    {%- if aria_describedby|length > 0 -%}
+        {%- set attr = attr|merge({'aria-describedby': aria_describedby|join(' ')}) -%}
+    {%- endif -%}
+    {%- if errors|length > 0 -%}
+        {%- set attr = attr|merge({'aria-invalid': 'true'}) -%}
+    {%- endif -%}
+    {%- set widget_attr = {attr: attr} -%}
+    {{- block('form_row_render') -}}
+{%- endblock form_row -%}
+
+{%- block form_row_render -%}
     <div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
         {{- form_label(form) -}}
         {{- form_errors(form) -}}
         {{- form_widget(form, widget_attr) -}}
         {{- form_help(form) -}}
     </div>
-{%- endblock form_row -%}
+{%- endblock form_row_render -%}
 
 {%- block button_row -%}
     <div{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
@@ -419,7 +434,7 @@
 
 {%- block form_errors -%}
     {%- if errors|length > 0 -%}
-    <ul>
+    <ul id="{{ id ~ "_errors" }}">
         {%- for error in errors -%}
             <li>{{ error.message }}</li>
         {%- endfor -%}
diff --git a/src/Symfony/Bridge/Twig/Resources/views/Form/form_table_layout.html.twig b/src/Symfony/Bridge/Twig/Resources/views/Form/form_table_layout.html.twig
@@ -1,10 +1,6 @@
 {% use "form_div_layout.html.twig" %}
 
-{%- block form_row -%}
-    {%- set widget_attr = {} -%}
-    {%- if help -%}
-        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
-    {%- endif -%}
+{%- block form_row_render -%}
     <tr{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
         <td>
             {{- form_label(form) -}}
@@ -15,7 +11,7 @@
             {{- form_help(form) -}}
         </td>
     </tr>
-{%- endblock form_row -%}
+{%- endblock form_row_render -%}
 
 {%- block button_row -%}
     <tr{% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
diff --git a/src/Symfony/Bridge/Twig/Resources/views/Form/foundation_5_layout.html.twig b/src/Symfony/Bridge/Twig/Resources/views/Form/foundation_5_layout.html.twig
@@ -281,11 +281,7 @@
 
 {# Rows #}
 
-{% block form_row -%}
-    {%- set widget_attr = {} -%}
-    {%- if help -%}
-        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
-    {%- endif -%}
+{% block form_row_render -%}
     <div{% with {attr: row_attr|merge({class: (row_attr.class|default('') ~ ' row')|trim})} %}{{ block('attributes') }}{% endwith %}>
         <div class="large-12 columns{% if (not compound or force_error|default(false)) and not valid %} error{% endif %}">
             {{- form_label(form) -}}
@@ -294,7 +290,7 @@
             {{- form_errors(form) -}}
         </div>
     </div>
-{%- endblock form_row %}
+{%- endblock form_row_render %}
 
 {% block choice_row -%}
     {% set force_error = true %}
@@ -340,7 +336,7 @@
 
 {% block form_errors -%}
     {% if errors|length > 0 -%}
-        {% if form is not rootform %}<small class="error">{% else %}<div data-alert class="alert-box alert">{% endif %}
+        {% if form is not rootform %}<small class="error" id="{{ id ~ "_errors" }}">{% else %}<div data-alert class="alert-box alert" id="{{ id ~ "_errors" }}">{% endif %}
         {%- for error in errors -%}
             {{ error.message }}
             {% if not loop.last %}, {% endif %}
diff --git a/src/Symfony/Bridge/Twig/Resources/views/Form/tailwind_2_layout.html.twig b/src/Symfony/Bridge/Twig/Resources/views/Form/tailwind_2_layout.html.twig
@@ -22,7 +22,7 @@
 
 {%- block form_errors -%}
     {%- if errors|length > 0 -%}
-        <ul>
+        <ul id="{{ id ~ "_errors" }}">
             {%- for error in errors -%}
                 <li class="{{ error_item_class|default('text-red-700') }}">{{ error.message }}</li>
             {%- endfor -%}
