Skip to content

fix(table): improve sortable table accessibility #1280

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 27 commits into from
May 9, 2023
Merged

fix(table): improve sortable table accessibility #1280

Show file tree
Hide file tree
Changes from 25 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
d4599d8
Improve a11y support for table sorting
allejo Oct 13, 2022
c6830af
Remove extra classes; add column highlighting
allejo Oct 25, 2022
57a4515
Add quick comment
allejo Oct 25, 2022
5d3adef
Fix missing ending tag
allejo Oct 26, 2022
f99bc57
aria-sort shouldn't always be set on every header
allejo Oct 26, 2022
946a968
Remove column highlighting on sort
allejo Oct 29, 2022
2f0c3c3
Merge branch 'develop' into pr/1144
dancormier Feb 24, 2023
4e37924
Port table.less changes to refactored styles
dancormier Feb 24, 2023
87271fc
test(table): add test for sortable table
dancormier Feb 24, 2023
f984cc0
Have eslint apply to tests as well
allejo Mar 27, 2023
5cc54b3
It's okay to have unused vars for array destructures
allejo Mar 27, 2023
5a24eed
Prettify table code + start more unit tests
allejo Mar 27, 2023
3ac0cc4
Merge branch 'develop' into pr/1144
allejo Mar 28, 2023
186b2b4
Changes for latest develop changes
allejo Mar 28, 2023
61078bf
Merge branch 'develop' into pr/1144
allejo Mar 30, 2023
255c7d9
Unit tests for column indicators + aria-sort values
allejo Mar 31, 2023
0232d70
Apparently DOM tests are async?
allejo Mar 31, 2023
9476003
Make unit tests + eslint happy by void'ing a promise
allejo Mar 31, 2023
74d2809
Merge branch 'develop' into pr/1144
giamir Apr 19, 2023
10b76fb
update th button styling
dancormier May 2, 2023
c7c8fca
small tweak
dancormier May 3, 2023
f26ca06
minor styling tweak
dancormier May 3, 2023
ea5b100
Update test to check current and legacy markup
dancormier May 3, 2023
f30fb6d
lint
dancormier May 3, 2023
4745d16
Update test description to reflect legacy markup
dancormier May 3, 2023
a141f18
add comments
dancormier May 9, 2023
d7a1a6b
Add scope attr to sortable examples
dancormier May 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .eslintrc.js
View file
Open in desktop
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
Open in desktop
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
66 changes: 39 additions & 27 deletions docs/product/components/tables.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -757,7 +757,7 @@
{% 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 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 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 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 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 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 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
17 changes: 16 additions & 1 deletion lib/components/table/table.less
View file
Open in desktop
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