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
This commit is contained in:
commit
bacae4d2d6
@ -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 -%}
|
||||
|
@ -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 -%}
|
||||
|
@ -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 -%}
|
||||
|
Reference in New Issue
Block a user