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

Author: jeanfrancois-morin

CHANGELOG.md

@@ -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
 ---

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 %}>{#--#}

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 %}>
@@ -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 %}

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') }}">

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) -}}

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 = {} -%}

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 %}>
@@ -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 %}

Resources/views/Form/form_div_layout.html.twig

@@ -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 %}>
@@ -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 -%}

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 %}>

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 %}
@@ -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 %}