Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit 0ad7a0a

Browse files
ArtBlueArtBlue
committed
chore(table): added anchor support for sort, improved a11y
1 parent 5f00133 commit 0ad7a0a

File tree

4 files changed

+378
-34
lines changed

4 files changed

+378
-34
lines changed

‎dist/table/table.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,12 @@
8585
max-height: unset;
8686
}
8787

88+
.table th a,
8889
.table th button {
90+
align-items: center;
91+
display: flex;
8992
font-weight: 700;
93+
text-decoration: none;
9094
}
9195

9296
.table tbody tr:last-child td,

‎src/modules/table.marko‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1659,14 +1659,20 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
16591659
<p>
16601660
A sortable table is a table that allows users to sort the data in the table by clicking on the column headers. You can make tables sortable by using sort buttons in <span class="highlight">&lt;thead&gt; &gt; &lt;th&gt;</span>. Additionally, for accessibility purposes, <span class="highlight">aria-sort="ascending"</span> or <span class="highlight">aria-sort="descending"</span> should be added respectively to the <span class="highlight">&lt;th&gt;</span> to reflect the current sort order.
16611661
</p>
1662+
<p>
1663+
If using buttons to sort the table, the <span class="highlight">aria-pressed="true"</span> attribute should be added to the button to indicate the current sort order. The <span class="highlight">aria-pressed</span> attribute should be toggled between <span class="highlight">true</span> and <span class="highlight">false</span> when the button is clicked.
1664+
</p>
1665+
<p>
1666+
If using anchors to sort the table with a page refresh, you would forgo the pressed state and just do <span class="highlight">&lt;a href="my-url"&gt;Seller...&lt;/a&gt;</span>. Additionally, you'd need to change the <span class="highlight">aria-sort</span> attribute to match the sort order after the page refresh.
1667+
</p>
16621668
<div class="demo">
16631669
<div class="demo__inner">
16641670
<div class="table" role="group" aria-label="Video games for sale" tabindex="0">
16651671
<table>
16661672
<thead>
16671673
<tr>
16681674
<th class="table-cell" aria-sort="descending">
1669-
<button type="button">
1675+
<button type="button" aria-pressed="true">
16701676
Seller
16711677
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
16721678
<use href="#icon-sort-down-12"></use>
@@ -1730,7 +1736,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
17301736
</button>
17311737
</th>
17321738
<th class="table-cell" aria-sort="ascending">
1733-
<button type="button">
1739+
<button type="button" aria-pressed="true">
17341740
Shipping
17351741
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
17361742
<use href="#icon-sort-up-12"></use>
@@ -1927,7 +1933,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
19271933
<thead>
19281934
<tr>
19291935
<th class="table-cell" aria-sort="descending">
1930-
<button type="button">
1936+
<button type="button" aria-pressed="true">
19311937
Seller
19321938
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
19331939
<use href="#icon-sort-down-12"></use>
@@ -1990,8 +1996,8 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
19901996
</svg>
19911997
</button>
19921998
</th>
1993-
<th class="table-cell" aria-sort="ascending">
1994-
<button type="button">
1999+
<th class="table-cell" aria-sort="descending">
2000+
<button type="button" aria-pressed="true">
19952001
Shipping
19962002
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
19972003
<use href="#icon-sort-up-12"></use>
@@ -2108,7 +2114,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
21082114
</span>
21092115
</th>
21102116
<th class="table-cell" aria-sort="descending">
2111-
<button type="button">
2117+
<button type="button" aria-pressed="true">
21122118
Seller
21132119
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
21142120
<use href="#icon-sort-down-12"></use>
@@ -2431,7 +2437,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
24312437
</span>
24322438
</th>
24332439
<th class="table-cell" aria-sort="descending">
2434-
<button type="button">
2440+
<button type="button" aria-pressed="true">
24352441
Seller
24362442
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
24372443
<use href="#icon-sort-down-12"></use>
@@ -2494,8 +2500,8 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
24942500
</svg>
24952501
</button>
24962502
</th>
2497-
<th class="table-cell" aria-sort="ascending">
2498-
<button type="button">
2503+
<th class="table-cell" aria-sort="descending">
2504+
<button type="button" aria-pressed="true">
24992505
Shipping
25002506
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
25012507
<use href="#icon-sort-up-12"></use>
@@ -2558,7 +2564,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
25582564
<thead>
25592565
<tr>
25602566
<th class="table-cell" aria-sort="descending">
2561-
<button type="button">
2567+
<button type="button" aria-pressed="true">
25622568
Seller
25632569
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
25642570
<use href="#icon-sort-down-12"></use>
@@ -2953,7 +2959,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
29532959
<thead>
29542960
<tr>
29552961
<th class="table-cell" aria-sort="descending">
2956-
<button type="button">
2962+
<button type="button" aria-pressed="true">
29572963
Seller
29582964
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
29592965
<use href="#icon-sort-down-12"></use>
@@ -3017,8 +3023,8 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
30173023
</svg>
30183024
</button>
30193025
</th>
3020-
<th class="table-cell" aria-sort="ascending">
3021-
<button type="button">
3026+
<th class="table-cell" aria-sort="descending">
3027+
<button type="button" aria-pressed="true">
30223028
Shipping
30233029
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
30243030
<use href="#icon-sort-up-12"></use>
@@ -3118,7 +3124,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
31183124
<thead>
31193125
<tr>
31203126
<th class="table-cell" aria-sort="descending">
3121-
<button type="button">
3127+
<button type="button" aria-pressed="true">
31223128
Seller
31233129
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
31243130
<use href="#icon-sort-down-12"></use>
@@ -3397,7 +3403,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
33973403
<thead>
33983404
<tr>
33993405
<th class="table-cell" aria-sort="descending">
3400-
<button type="button">
3406+
<button type="button" aria-pressed="true">
34013407
Seller
34023408
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
34033409
<use href="#icon-sort-down-12"></use>
@@ -3460,8 +3466,8 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
34603466
</svg>
34613467
</button>
34623468
</th>
3463-
<th class="table-cell" aria-sort="ascending">
3464-
<button type="button">
3469+
<th class="table-cell" aria-sort="descending">
3470+
<button type="button" aria-pressed="true">
34653471
Shipping
34663472
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
34673473
<use href="#icon-sort-up-12"></use>

0 commit comments

Comments
 (0)