Skip to content

Commit

Permalink
feat(table): add accessibility scope - FRONT-4259 (#3247)
Browse files Browse the repository at this point in the history 
* add scope

* cleanup twig
  • Loading branch information
@emeryro
emeryro committed Mar 25, 2024
1 parent ffa6868 commit ca51a57
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 1 deletion.
47 changes: 47 additions & 0 deletions src/implementations/twig/components/table/__snapshots__/table.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,26 +16,31 @@ exports[`Table Default renders correctly 1`] = `
>
<th
class="ecl-table__header"
scope="col"
>
Job title
</th>
<th
class="ecl-table__header"
scope="col"
>
EFSI finance approved by EIB
</th>
<th
class="ecl-table__header"
scope="col"
>
Location
</th>
<th
class="ecl-table__header"
scope="col"
>
Organization
</th>
<th
class="ecl-table__header"
scope="col"
>
Type of contract
</th>
Expand Down Expand Up @@ -238,26 +243,31 @@ exports[`Table Default renders correctly with extra attributes 1`] = `
>
<th
class="ecl-table__header"
scope="col"
>
Job title
</th>
<th
class="ecl-table__header"
scope="col"
>
EFSI finance approved by EIB
</th>
<th
class="ecl-table__header"
scope="col"
>
Location
</th>
<th
class="ecl-table__header"
scope="col"
>
Organization
</th>
<th
class="ecl-table__header"
scope="col"
>
Type of contract
</th>
Expand Down Expand Up @@ -458,26 +468,31 @@ exports[`Table Default renders correctly with extra class names 1`] = `
>
<th
class="ecl-table__header"
scope="col"
>
Job title
</th>
<th
class="ecl-table__header"
scope="col"
>
EFSI finance approved by EIB
</th>
<th
class="ecl-table__header"
scope="col"
>
Location
</th>
<th
class="ecl-table__header"
scope="col"
>
Organization
</th>
<th
class="ecl-table__header"
scope="col"
>
Type of contract
</th>
Expand Down Expand Up @@ -678,26 +693,31 @@ exports[`Table Default renders correctly with row extra attributes 1`] = `
>
<th
class="ecl-table__header"
scope="col"
>
Job title
</th>
<th
class="ecl-table__header"
scope="col"
>
EFSI finance approved by EIB
</th>
<th
class="ecl-table__header"
scope="col"
>
Location
</th>
<th
class="ecl-table__header"
scope="col"
>
Organization
</th>
<th
class="ecl-table__header"
scope="col"
>
Type of contract
</th>
Expand Down Expand Up @@ -908,26 +928,31 @@ exports[`Table Default renders correctly with row extra classes 1`] = `
>
<th
class="ecl-table__header"
scope="col"
>
Job title
</th>
<th
class="ecl-table__header"
scope="col"
>
EFSI finance approved by EIB
</th>
<th
class="ecl-table__header"
scope="col"
>
Location
</th>
<th
class="ecl-table__header"
scope="col"
>
Organization
</th>
<th
class="ecl-table__header"
scope="col"
>
Type of contract
</th>
Expand Down Expand Up @@ -1129,24 +1154,28 @@ exports[`Table Multi renders correctly 1`] = `
<th
class="ecl-table__header"
rowspan="2"
scope="col"
>
Job title
</th>
<th
class="ecl-table__header"
rowspan="2"
scope="col"
>
EFSI finance approved by EIB
</th>
<th
class="ecl-table__header"
colspan="2"
scope="colgroup"
>
Extra information
</th>
<th
class="ecl-table__header"
rowspan="2"
scope="col"
>
Location
</th>
Expand All @@ -1156,11 +1185,13 @@ exports[`Table Multi renders correctly 1`] = `
>
<th
class="ecl-table__header"
scope="col"
>
Organization
</th>
<th
class="ecl-table__header"
scope="col"
>
Type of contract
</th>
Expand Down Expand Up @@ -1366,26 +1397,31 @@ exports[`Table Simple renders correctly 1`] = `
>
<th
class="ecl-table__header"
scope="col"
>
Job title
</th>
<th
class="ecl-table__header"
scope="col"
>
EFSI finance approved by EIB
</th>
<th
class="ecl-table__header"
scope="col"
>
Location
</th>
<th
class="ecl-table__header"
scope="col"
>
Organization
</th>
<th
class="ecl-table__header"
scope="col"
>
Type of contract
</th>
Expand Down Expand Up @@ -1591,26 +1627,30 @@ exports[`Table Sort table renders correctly 1`] = `
class="ecl-table__header"
data-ecl-table-sort-toggle=""
rowspan="2"
scope="col"
>
Job title
</th>
<th
class="ecl-table__header"
data-ecl-table-sort-toggle=""
rowspan="2"
scope="col"
>
EFSI finance approved by EIB
</th>
<th
class="ecl-table__header"
colspan="2"
scope="colgroup"
>
Extra information
</th>
<th
class="ecl-table__header"
data-ecl-table-sort-toggle=""
rowspan="2"
scope="col"
>
Location
</th>
Expand All @@ -1621,12 +1661,14 @@ exports[`Table Sort table renders correctly 1`] = `
<th
class="ecl-table__header"
data-ecl-table-sort-toggle=""
scope="col"
>
Organization
</th>
<th
class="ecl-table__header"
data-ecl-table-sort-toggle=""
scope="col"
>
Type of contract
</th>
Expand Down Expand Up @@ -1832,26 +1874,31 @@ exports[`Table Zebra renders correctly 1`] = `
>
<th
class="ecl-table__header"
scope="col"
>
Job title
</th>
<th
class="ecl-table__header"
scope="col"
>
EFSI finance approved by EIB
</th>
<th
class="ecl-table__header"
scope="col"
>
Location
</th>
<th
class="ecl-table__header"
scope="col"
>
Organization
</th>
<th
class="ecl-table__header"
scope="col"
>
Type of contract
</th>
Expand Down
5 changes: 4 additions & 1 deletion src/implementations/twig/components/table/table.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,14 +100,17 @@
<tr class="{{ _row_css_class }}">
{% for cell in header %}
{% set _heading_attribute = '' %}
{% set _heading_scope = 'col' %}
{% if cell.rowspan is not empty %}
{% set _heading_attribute = _heading_attribute ~ 'rowspan="' ~ cell.rowspan|e('html_attr') ~ '"' %}
{% set _heading_attribute = 'rowspan="' ~ cell.rowspan|e('html_attr') ~ '"' %}
{% endif %}
{% if cell.colspan is not empty %}
{% set _heading_attribute = _heading_attribute ~ ' colspan="' ~ cell.colspan|e('html_attr') ~ '"' %}
{% set _heading_scope = 'colgroup' %}
{% elseif cell.label is not empty and _sortable %}
{% set _heading_attribute = _heading_attribute ~ ' data-ecl-table-sort-toggle' %}
{% endif %}
{% set _heading_attribute = _heading_attribute ~ ' scope="' ~ _heading_scope ~ '"' %}
<th {{ _heading_attribute|raw }} class="{{ _header_css_class }}">{{ cell.label }}</th>
{% endfor %}
</tr>
Expand Down

1 comment on commit ca51a57

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://v4-dev--europa-component-library.netlify.app

Please sign in to comment.