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

Open
wants to merge 2 commits into
base: 7.4
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc2c2e4
[TwigBridgeRessources] add aria-invalid and aria-describedby on form …
jeanfrancois-morin Jun 23, 2025
d9ca05c
update twig bridge changelog
jeanfrancois-morin Jun 26, 2025
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
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 @@ -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" }}">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here :)

{%- for error in errors -%}
<li><span class="glyphicon glyphicon-exclamation-sign"></span> {{ error.message }}</li>
{%- endfor -%}
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"}) -%}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(same here)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here too

{%- 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: 4 additions & 6 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 @@ -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 %}

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 @@ -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 %}>
Expand Down Expand Up @@ -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 -%}
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
10 changes: 3 additions & 7 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 @@ -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 %}
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 @@ -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 -%}
Expand Down
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy