Skip to content

[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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fabpot merged 1 commit into from
Sep 24, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/Symfony/Bridge/Twig/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ CHANGELOG

* Add `access_decision()` and `access_decision_for_user()` Twig functions
* Call `form_label_content` inside `button_widget` block to render button label
* Add `aria-invalid` and `aria-describedby` attributes to form fields when validation errors are present

7.3
---
Expand Down
8 changes: 2 additions & 6 deletions src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_3_horizontal_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') }}">
Expand All @@ -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 %}>{#--#}
Expand Down
10 changes: 3 additions & 7 deletions src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_3_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}>
Expand Down Expand Up @@ -189,7 +185,7 @@
{% if form is not rootform %}<span class="help-block">{% else %}<div class="alert alert-danger">{% endif %}
<ul class="list-unstyled">
{%- for error in errors -%}
<li><span class="glyphicon glyphicon-exclamation-sign"></span> {{ error.message }}</li>
<li id="{{ id ~ '_error' ~ loop.index }}"><span class="glyphicon glyphicon-exclamation-sign"></span> {{ error.message }}</li>
{%- endfor -%}
</ul>
{% if form is not rootform %}</span>{% else %}</div>{% endif %}
Expand Down
8 changes: 6 additions & 2 deletions src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_horizontal_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') }}">
Expand Down
8 changes: 6 additions & 2 deletions src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) -}}
Expand Down
8 changes: 2 additions & 6 deletions src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_5_horizontal_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) -%}
Expand Down Expand Up @@ -68,7 +64,7 @@
{%- endif -%}
{##}</div>
{%- endif -%}
{%- endblock form_row %}
{%- endblock form_row_render %}

{% block fieldset_form_row -%}
{%- set widget_attr = {} -%}
Expand Down
10 changes: 3 additions & 7 deletions src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_5_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -%}
Expand All @@ -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 %}>
Expand All @@ -353,7 +349,7 @@
{%- block form_errors -%}
{%- if errors|length > 0 -%}
{%- for error in errors -%}
<div class="{% if form is not rootform %}invalid-feedback{% else %}alert alert-danger{% endif %} d-block">{{ error.message }}</div>
<div class="{% if form is not rootform %}invalid-feedback{% else %}alert alert-danger{% endif %} d-block" id="{{ id ~ '_error' ~ loop.index }}">{{ error.message }}</div>
{%- endfor -%}
{%- endif %}
{%- endblock form_errors %}
Expand Down
23 changes: 19 additions & 4 deletions src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -344,17 +344,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(errors|map((_, index) => id ~ '_error' ~ (index + 1))) -%}
{%- 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 %}>
Expand Down Expand Up @@ -399,7 +414,7 @@
{%- if errors|length > 0 -%}
<ul>
{%- for error in errors -%}
<li>{{ error.message }}</li>
<li id="{{ id ~ '_error' ~ loop.index }}">{{ error.message }}</li>
{%- endfor -%}
</ul>
{%- endif -%}
Expand Down
8 changes: 2 additions & 6 deletions src/Symfony/Bridge/Twig/Resources/views/Form/form_table_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) -}}
Expand All @@ -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 %}>
Expand Down
11 changes: 3 additions & 8 deletions src/Symfony/Bridge/Twig/Resources/views/Form/foundation_5_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) -}}
Expand All @@ -294,7 +290,7 @@
{{- form_errors(form) -}}
</div>
</div>
{%- endblock form_row %}
{%- endblock form_row_render %}

{% block choice_row -%}
{% set force_error = true %}
Expand Down Expand Up @@ -342,8 +338,7 @@
{% if errors|length > 0 -%}
{% if form is not rootform %}<small class="error">{% else %}<div data-alert class="alert-box alert">{% endif %}
{%- for error in errors -%}
{{ error.message }}
{% if not loop.last %}, {% endif %}
<span id="{{ id ~ '_error' ~ loop.index }}">{{ error.message }}</span>{% if not loop.last %}, {% endif %}
{%- endfor -%}
{% if form is not rootform %}</small>{% else %}</div>{% endif %}
{%- endif %}
Expand Down
2 changes: 1 addition & 1 deletion src/Symfony/Bridge/Twig/Resources/views/Form/tailwind_2_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
{%- if errors|length > 0 -%}
<ul>
{%- for error in errors -%}
<li class="{{ error_item_class|default('text-red-700') }}">{{ error.message }}</li>
<li class="{{ error_item_class|default('text-red-700') }}" id="{{ id ~ '_error' ~ loop.index }}">{{ error.message }}</li>
{%- endfor -%}
</ul>
{%- endif -%}
Expand Down
Loading