Skip to content

Commit

Permalink
fix(table): improve sortable table accessibility (#1280)
Browse files Browse the repository at this point in the history 
* Improve a11y support for table sorting

* Remove extra classes; add column highlighting

* Add quick comment

* Fix missing ending tag

* aria-sort shouldn't always be set on every header

* Remove column highlighting on sort

* Port table.less changes to refactored styles

* test(table): add test for sortable table

* Have eslint apply to tests as well

* It's okay to have unused vars for array destructures

* Prettify table code + start more unit tests

* Changes for latest develop changes

* Unit tests for column indicators + aria-sort values

* Apparently DOM tests are async?

* Make unit tests + eslint happy by void'ing a promise

* update th button styling

* small tweak

* minor styling tweak

* Update test to check current and legacy markup

* lint

* Update test description to reflect legacy markup

* add comments

addresses #1280 (comment)

* Add scope attr to sortable examples

---------

Co-authored-by: Vlad Jimenez <[email protected]>
Co-authored-by: Giamir Buoncristiani <[email protected]>
  • Loading branch information
@dancormier @allejo @giamir
3 people authored May 9, 2023
1 parent eb08145 commit 90b78fb
Show file tree
Hide file tree
Showing 7 changed files with 566 additions and 123 deletions.
6 changes: 6 additions & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,11 @@ module.exports = {
"no-console": "error",
"no-alert": "error",
"no-process-env": "error",
"@typescript-eslint/no-unused-vars": [
"error",
{
"destructuredArrayIgnorePattern": "^_"
},
]
},
};
2 changes: 1 addition & 1 deletion docs/_data/tables.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
},
{
"attribute": "data-action=\"click->s-table#sort\"",
"applies": "th",
"applies": "button",
"description": "Causes a click on the header cell to sort by this column"
},
{
Expand Down
74 changes: 43 additions & 31 deletions docs/product/components/tables.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -748,16 +748,16 @@
<table class="wmn4 s-table s-table__bx-simple">
<thead>
<tr>
<th class="s-table--cell5" scope="col">Attribute</th>
<th class="s-table--cell2" scope="col">Applied to</th>
<th scope="col" class="s-table--cell5">Attribute</th>
<th scope="col" class="s-table--cell2">Applied to</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody class="fs-caption">
{% for item in tables.data-attributes %}
<tr>
<th scope="row"><code class="stacks-code">{{ item.attribute }}</code></th>
<td><code class="stacks-code">{{ item.applies }}</td>
<td><code class="stacks-code">{{ item.applies }}</code></td>
<td class="p8">{{ item.description }}</td>
</tr>
{% endfor %}
Expand All @@ -772,19 +772,25 @@
<table class="s-table s-table__sortable" data-controller="s-table">
<thead>
<tr>
<th data-s-table-target="column" data-action="click->s-table#sort">
Season
@Svg.ArrowUpSm.With("js-sorting-indicator js-sorting-indicator-asc d-none")
@Svg.ArrowDownSm.With("js-sorting-indicator js-sorting-indicator-desc d-none")
@Svg.ArrowUpDownSm.With("js-sorting-indicator js-sorting-indicator-none")
<th scope="col" data-s-table-target="column">
<button data-action="click->s-table#sort">
Season
@Svg.ArrowUpSm.With("js-sorting-indicator js-sorting-indicator-asc d-none")
@Svg.ArrowDownSm.With("js-sorting-indicator js-sorting-indicator-desc d-none")
@Svg.ArrowUpDownSm.With("js-sorting-indicator js-sorting-indicator-none")
</button>
</th>
<th data-s-table-target="column" data-action="click->s-table#sort">
Starts in month
…
<th scope="col" data-s-table-target="column">
<button data-action="click->s-table#sort">
Starts in month
…
</button>
</th>
<th data-s-table-target="column" data-action="click->s-table#sort">
Typical temperature in °C
…
<th scope="col" data-s-table-target="column">
<button data-action="click->s-table#sort">
Typical temperature in °C
…
</button>
</th>
</tr>
</thead>
Expand All @@ -806,23 +812,29 @@
<table class="s-table s-table__sortable" data-controller="s-table">
<thead>
<tr>
<th data-s-table-target="column" data-action="click->s-table#sort">
Season
{% icon "ArrowUpSm", "js-sorting-indicator js-sorting-indicator-asc d-none" %}
{% icon "ArrowDownSm", "js-sorting-indicator js-sorting-indicator-desc d-none" %}
{% icon "ArrowUpDownSm", "js-sorting-indicator js-sorting-indicator-none" %}
<th scope="col" data-s-table-target="column">
<button data-action="click->s-table#sort">
Season
{% icon "ArrowUpSm", "js-sorting-indicator js-sorting-indicator-asc d-none" %}
{% icon "ArrowDownSm", "js-sorting-indicator js-sorting-indicator-desc d-none" %}
{% icon "ArrowUpDownSm", "js-sorting-indicator js-sorting-indicator-none" %}
</button>
</th>
<th data-s-table-target="column" data-action="click->s-table#sort">
Starts in month
{% icon "ArrowUpSm", "js-sorting-indicator js-sorting-indicator-asc d-none" %}
{% icon "ArrowDownSm", "js-sorting-indicator js-sorting-indicator-desc d-none" %}
{% icon "ArrowUpDownSm", "js-sorting-indicator js-sorting-indicator-none" %}
<th scope="col" data-s-table-target="column">
<button data-action="click->s-table#sort">
Starts in month
{% icon "ArrowUpSm", "js-sorting-indicator js-sorting-indicator-asc d-none" %}
{% icon "ArrowDownSm", "js-sorting-indicator js-sorting-indicator-desc d-none" %}
{% icon "ArrowUpDownSm", "js-sorting-indicator js-sorting-indicator-none" %}
</button>
</th>
<th data-s-table-target="column" data-action="click->s-table#sort">
Typical temperature in °C
{% icon "ArrowUpSm", "js-sorting-indicator js-sorting-indicator-asc d-none" %}
{% icon "ArrowDownSm", "js-sorting-indicator js-sorting-indicator-desc d-none" %}
{% icon "ArrowUpDownSm", "js-sorting-indicator js-sorting-indicator-none" %}
<th scope="col" data-s-table-target="column">
<button data-action="click->s-table#sort">
Typical temperature in °C
{% icon "ArrowUpSm", "js-sorting-indicator js-sorting-indicator-asc d-none" %}
{% icon "ArrowDownSm", "js-sorting-indicator js-sorting-indicator-desc d-none" %}
{% icon "ArrowUpDownSm", "js-sorting-indicator js-sorting-indicator-none" %}
</button>
</th>
</tr>
</thead>
Expand Down Expand Up @@ -882,8 +894,8 @@
<th scope="col">Status</th>
<th scope="col">Owner</th>
<th scope="col">Source</th>
<th colspan="2" scope="col">Views</th>
<th colspan="2" scope="col">Applies</th>
<th colspan="2" scope="colgroup">Views</th>
<th colspan="2" scope="colgroup">Applies</th>
</tr>
</thead>
<tbody>
Expand Down
17 changes: 16 additions & 1 deletion lib/components/table/table.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,10 +122,25 @@

&&__sortable {
thead th {
a { // If an anchor is used, it should appear like a normal header
a,
button { // If an anchor is used, it should appear like a normal header
color: inherit;
}

button {
appearance: none;
background-color: transparent;
border: 0;
cursor: pointer;
display: flex;
gap: var(--su-static4);
font-weight: inherit;
margin: calc(var(--_ta-th-p) * -1);
padding: var(--_ta-th-p);
text-align: left;
width: calc(100% + calc(var(--_ta-th-p) * 2));
}

&.is-sorted { // Selected state
color: var(--black-900);
}
Expand Down
Loading

0 comments on commit 90b78fb

Please sign in to comment.