Skip to content

Commit

Permalink
bug #26326 [Form][WCAG] Added role="presentation" on tables & removed…
Browse files Browse the repository at this point in the history
… 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
  • Loading branch information
nicolas-grekas committed Mar 1, 2018
2 parents b7b6bd2 + 635220a commit bacae4d
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 27 deletions.
Expand Up @@ -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 -%}
Expand Down
Expand Up @@ -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 -%}
Expand Down
Expand Up @@ -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 -%}
Expand Down

0 comments on commit bacae4d

Please sign in to comment.