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

Commit 93788e6

Browse files
saiponnadasaiponnada
authored
fix(table): removed aria-pressed on sortable headings (#2526)
1 parent 529af17 commit 93788e6

File tree

4 files changed

+36
-34
lines changed

4 files changed

+36
-34
lines changed

‎.changeset/rich-peas-clap.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/skin": major
3+
---
4+
5+
fix(table): remove aria-pressed from table headings

‎src/routes/_index/component/table/+page.marko‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1852,9 +1852,6 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
18521852
<p>
18531853
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.
18541854
</p>
1855-
<p>
1856-
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.
1857-
</p>
18581855
<p>
18591856
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.
18601857
</p>
@@ -1865,7 +1862,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
18651862
<thead>
18661863
<tr>
18671864
<th class="table-cell" aria-sort="descending">
1868-
<button type="button" aria-pressed="true">
1865+
<button type="button">
18691866
Seller
18701867
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
18711868
<use href="#icon-sort-down-12"></use>
@@ -1929,7 +1926,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
19291926
</button>
19301927
</th>
19311928
<th class="table-cell" aria-sort="ascending">
1932-
<button type="button" aria-pressed="true">
1929+
<button type="button">
19331930
Shipping
19341931
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
19351932
<use href="#icon-sort-up-12"></use>
@@ -2126,7 +2123,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
21262123
<thead>
21272124
<tr>
21282125
<th class="table-cell" aria-sort="descending">
2129-
<button type="button" aria-pressed="true">
2126+
<button type="button">
21302127
Seller
21312128
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
21322129
<use href="#icon-sort-down-12"></use>
@@ -2190,7 +2187,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
21902187
</button>
21912188
</th>
21922189
<th class="table-cell" aria-sort="descending">
2193-
<button type="button" aria-pressed="true">
2190+
<button type="button">
21942191
Shipping
21952192
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
21962193
<use href="#icon-sort-up-12"></use>
@@ -2284,7 +2281,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
22842281
<thead>
22852282
<tr>
22862283
<th class="table-cell" aria-sort="descending">
2287-
<button type="button" aria-pressed="true" disabled>
2284+
<button type="button" disabled>
22882285
Seller
22892286
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
22902287
<use href="#icon-sort-down-12"></use>
@@ -2348,7 +2345,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
23482345
</button>
23492346
</th>
23502347
<th class="table-cell" aria-sort="ascending">
2351-
<button type="button" aria-pressed="true" disabled>
2348+
<button type="button" disabled>
23522349
Shipping
23532350
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
23542351
<use href="#icon-sort-up-12"></use>
@@ -2567,7 +2564,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
25672564
<thead>
25682565
<tr>
25692566
<th class="table-cell" aria-sort="descending">
2570-
<button type="button" aria-pressed="true" disabled>
2567+
<button type="button" disabled>
25712568
Seller
25722569
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
25732570
<use href="#icon-sort-down-12"></use>
@@ -2631,7 +2628,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
26312628
</button>
26322629
</th>
26332630
<th class="table-cell" aria-sort="descending">
2634-
<button type="button" aria-pressed="true" disabled>
2631+
<button type="button" disabled>
26352632
Shipping
26362633
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
26372634
<use href="#icon-sort-up-12"></use>
@@ -2769,7 +2766,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
27692766
</span>
27702767
</th>
27712768
<th class="table-cell" aria-sort="descending">
2772-
<button type="button" aria-pressed="true">
2769+
<button type="button">
27732770
Seller
27742771
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
27752772
<use href="#icon-sort-down-12"></use>
@@ -3092,7 +3089,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
30923089
</span>
30933090
</th>
30943091
<th class="table-cell" aria-sort="descending">
3095-
<button type="button" aria-pressed="true">
3092+
<button type="button">
30963093
Seller
30973094
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
30983095
<use href="#icon-sort-down-12"></use>
@@ -3156,7 +3153,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
31563153
</button>
31573154
</th>
31583155
<th class="table-cell" aria-sort="descending">
3159-
<button type="button" aria-pressed="true">
3156+
<button type="button">
31603157
Shipping
31613158
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
31623159
<use href="#icon-sort-up-12"></use>
@@ -3219,7 +3216,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
32193216
<thead>
32203217
<tr>
32213218
<th class="table-cell" aria-sort="descending">
3222-
<button type="button" aria-pressed="true">
3219+
<button type="button">
32233220
Seller
32243221
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
32253222
<use href="#icon-sort-down-12"></use>
@@ -3614,7 +3611,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
36143611
<thead>
36153612
<tr>
36163613
<th class="table-cell" aria-sort="descending">
3617-
<button type="button" aria-pressed="true">
3614+
<button type="button">
36183615
Seller
36193616
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
36203617
<use href="#icon-sort-down-12"></use>
@@ -3679,7 +3676,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
36793676
</button>
36803677
</th>
36813678
<th class="table-cell" aria-sort="descending">
3682-
<button type="button" aria-pressed="true">
3679+
<button type="button">
36833680
Shipping
36843681
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
36853682
<use href="#icon-sort-up-12"></use>
@@ -3779,7 +3776,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
37793776
<thead>
37803777
<tr>
37813778
<th class="table-cell" aria-sort="descending">
3782-
<button type="button" aria-pressed="true">
3779+
<button type="button">
37833780
Seller
37843781
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
37853782
<use href="#icon-sort-down-12"></use>
@@ -4058,7 +4055,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
40584055
<thead>
40594056
<tr>
40604057
<th class="table-cell" aria-sort="descending">
4061-
<button type="button" aria-pressed="true">
4058+
<button type="button">
40624059
Seller
40634060
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
40644061
<use href="#icon-sort-down-12"></use>
@@ -4122,7 +4119,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
41224119
</button>
41234120
</th>
41244121
<th class="table-cell" aria-sort="descending">
4125-
<button type="button" aria-pressed="true">
4122+
<button type="button">
41264123
Shipping
41274124
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
41284125
<use href="#icon-sort-up-12"></use>

‎src/sass/table/stories/table.loading.stories.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const base = () => `
66
<thead>
77
<tr>
88
<th class="table-cell" aria-sort="descending">
9-
<button type="button" aria-pressed="true" disabled>
9+
<button type="button" disabled>
1010
Seller
1111
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
1212
<use href="#icon-sort-down-12"></use>
@@ -70,7 +70,7 @@ export const base = () => `
7070
</button>
7171
</th>
7272
<th class="table-cell" aria-sort="ascending">
73-
<button type="button" aria-pressed="true" disabled>
73+
<button type="button" disabled>
7474
Shipping
7575
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
7676
<use href="#icon-sort-up-12"></use>
@@ -288,7 +288,7 @@ export const compact = () => `
288288
<thead>
289289
<tr>
290290
<th class="table-cell" aria-sort="descending">
291-
<button type="button" aria-pressed="true" disabled>
291+
<button type="button" disabled>
292292
Seller
293293
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
294294
<use href="#icon-sort-down-12"></use>
@@ -352,7 +352,7 @@ export const compact = () => `
352352
</button>
353353
</th>
354354
<th class="table-cell" aria-sort="ascending">
355-
<button type="button" aria-pressed="true" disabled>
355+
<button type="button" disabled>
356356
Shipping
357357
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
358358
<use href="#icon-sort-up-12"></use>
@@ -570,7 +570,7 @@ export const relaxed = () => `
570570
<thead>
571571
<tr>
572572
<th class="table-cell" aria-sort="descending">
573-
<button type="button" aria-pressed="true" disabled>
573+
<button type="button" disabled>
574574
Seller
575575
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
576576
<use href="#icon-sort-down-12"></use>
@@ -634,7 +634,7 @@ export const relaxed = () => `
634634
</button>
635635
</th>
636636
<th class="table-cell" aria-sort="ascending">
637-
<button type="button" aria-pressed="true" disabled>
637+
<button type="button" disabled>
638638
Shipping
639639
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
640640
<use href="#icon-sort-up-12"></use>

‎src/sass/table/stories/table.sortable.stories.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const base = () => `
66
<thead>
77
<tr>
88
<th class="table-cell" aria-sort="descending">
9-
<button type="button" aria-pressed="true">
9+
<button type="button">
1010
Seller
1111
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
1212
<use href="#icon-sort-down-12"></use>
@@ -70,7 +70,7 @@ export const base = () => `
7070
</button>
7171
</th>
7272
<th class="table-cell" aria-sort="scending">
73-
<button type="button" aria-pressed="true">
73+
<button type="button">
7474
Shipping
7575
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
7676
<use href="#icon-sort-up-12"></use>
@@ -266,7 +266,7 @@ export const compact = () => `
266266
<thead>
267267
<tr>
268268
<th class="table-cell" aria-sort="descending">
269-
<button type="button" aria-pressed="true">
269+
<button type="button">
270270
Seller
271271
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
272272
<use href="#icon-sort-down-12"></use>
@@ -329,7 +329,7 @@ export const compact = () => `
329329
</svg>
330330
</button>
331331
</th>
332-
<th class="table-cell" aria-pressed="true">
332+
<th class="table-cell">
333333
<button type="button">
334334
Shipping
335335
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
@@ -526,7 +526,7 @@ export const relaxed = () => `
526526
<thead>
527527
<tr>
528528
<th class="table-cell" aria-sort="descending">
529-
<button type="button" aria-pressed="true">
529+
<button type="button">
530530
Seller
531531
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
532532
<use href="#icon-sort-down-12"></use>
@@ -589,7 +589,7 @@ export const relaxed = () => `
589589
</svg>
590590
</button>
591591
</th>
592-
<th class="table-cell" aria-pressed="true">
592+
<th class="table-cell">
593593
<button type="button">
594594
Shipping
595595
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
@@ -785,7 +785,7 @@ export const anchors = () => `
785785
<table>
786786
<thead>
787787
<tr>
788-
<th class="table-cell" aria-pressed="true">
788+
<th class="table-cell">
789789
<a href="https://ebay.com">
790790
Seller
791791
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">
@@ -849,7 +849,7 @@ export const anchors = () => `
849849
</svg>
850850
</a>
851851
</th>
852-
<th class="table-cell" aria-pressed="true">
852+
<th class="table-cell">
853853
<a href="https://ebay.com">
854854
Shipping
855855
<svg aria-hidden="true" class="icon icon--12" height="28" width="28">

0 commit comments

Comments
 (0)