[Form][WCAG] Added role=\"presentation\" on tables & removed bootstrap4 table

Author: Nyholm

Resources/views/Form/bootstrap_4_layout.html.twig

@@ -58,32 +58,48 @@
     {%- else -%}
         {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-inline')|trim}) -%}
         <div {{ block('widget_container_attributes') }}>
-            <div class="table-responsive">
-                <table class="table {{ table_class|default('table-bordered table-condensed table-striped') }}">
-                    <thead>
-                    <tr>
-                        {%- if with_years %}<th>{{ form_label(form.years) }}</th>{% endif -%}
-                        {%- if with_months %}<th>{{ form_label(form.months) }}</th>{% endif -%}
-                        {%- if with_weeks %}<th>{{ form_label(form.weeks) }}</th>{% endif -%}
-                        {%- if with_days %}<th>{{ form_label(form.days) }}</th>{% endif -%}
-                        {%- if with_hours %}<th>{{ form_label(form.hours) }}</th>{% endif -%}
-                        {%- if with_minutes %}<th>{{ form_label(form.minutes) }}</th>{% endif -%}
-                        {%- if with_seconds %}<th>{{ form_label(form.seconds) }}</th>{% endif -%}
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        {%- if with_years %}<td>{{ form_widget(form.years) }}</td>{% endif -%}
-                        {%- if with_months %}<td>{{ form_widget(form.months) }}</td>{% endif -%}
-                        {%- if with_weeks %}<td>{{ form_widget(form.weeks) }}</td>{% endif -%}
-                        {%- if with_days %}<td>{{ form_widget(form.days) }}</td>{% endif -%}
-                        {%- if with_hours %}<td>{{ form_widget(form.hours) }}</td>{% endif -%}
-                        {%- if with_minutes %}<td>{{ form_widget(form.minutes) }}</td>{% endif -%}
-                        {%- if with_seconds %}<td>{{ form_widget(form.seconds) }}</td>{% endif -%}
-                    </tr>
-                    </tbody>
-                </table>
+            {%- if with_years -%}
+            <div class="col-auto">
+                {{ form_label(form.years) }}
+                {{ form_widget(form.years) }}
             </div>
+            {%- endif -%}
+            {%- if with_months -%}
+            <div class="col-auto">
+                {{ form_label(form.months) }}
+                {{ form_widget(form.months) }}
+            </div>
+            {%- endif -%}
+            {%- if with_weeks -%}
+            <div class="col-auto">
+                {{ form_label(form.weeks) }}
+                {{ form_widget(form.weeks) }}
+            </div>
+            {%- endif -%}
+            {%- if with_days -%}
+            <div class="col-auto">
+                {{ form_label(form.days) }}
+                {{ form_widget(form.days) }}
+            </div>
+            {%- endif -%}
+            {%- if with_hours -%}
+            <div class="col-auto">
+                {{ form_label(form.hours) }}
+                {{ form_widget(form.hours) }}
+            </div>
+            {%- endif -%}
+            {%- if with_minutes -%}
+            <div class="col-auto">
+                {{ form_label(form.minutes) }}
+                {{ form_widget(form.minutes) }}
+            </div>
+            {%- endif -%}
+            {%- if with_seconds -%}
+            <div class="col-auto">
+                {{ form_label(form.seconds) }}
+                {{ form_widget(form.seconds) }}
+            </div>
+            {%- endif -%}
             {%- if with_invert %}{{ form_widget(form.invert) }}{% endif -%}
         </div>
     {%- endif -%}

Resources/views/Form/bootstrap_base_layout.html.twig

@@ -88,7 +88,7 @@
         <div {{ block('widget_container_attributes') }}>
             {{- form_errors(form) -}}
             <div class="table-responsive">
-                <table class="table {{ table_class|default('table-bordered table-condensed table-striped') }}">
+                <table class="table {{ table_class|default('table-bordered table-condensed table-striped') }}" role="presentation">
                     <thead>
                     <tr>
                         {%- if with_years %}<th>{{ form_label(form.years) }}</th>{% endif -%}

Resources/views/Form/form_div_layout.html.twig

@@ -136,7 +136,7 @@
     {%- else -%}
         <div {{ block('widget_container_attributes') }}>
             {{- form_errors(form) -}}
-            <table class="{{ table_class|default('') }}">
+            <table class="{{ table_class|default('') }}" role="presentation">
                 <thead>
                     <tr>
                         {%- if with_years %}<th>{{ form_label(form.years) }}</th>{% endif -%}