bug #26326 [Form][WCAG] Added role="presentation" on tables & removed bootstrap4 table (Nyholm)

This PR was squashed before being merged into the 3.4 branch (closes #26326).

Discussion
----------

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

| Q             | A
| ------------- | ---
| Branch?       | 3.4
| Bug fix?      | yes
| New feature?  | no
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes
| Fixed tickets |
| License       | MIT
| Doc PR        |

According to my friend and WCAG2 expect [Sandra](https://twitter.com/sandrability):

> Tables works best for table data, it should not be used for doing layouts. If you really really want to use the label add `role="presentation"`. This will make screen readers to ignore the table structure which will make it easier to navigate. It will also prevent screen readers to read "row 1, column 1".
> But we should consider not using a table here.

Commits
-------

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

Author: nicolas-grekas

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

@@ -107,7 +107,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 -%}