fix(table): removed aria-pressed on sortable headings (#2526)

eBay · Jan 16, 2025 · 93788e6 · 93788e6
1 parent 529af17
commit 93788e6
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 34 deletions.
diff --git a/.changeset/rich-peas-clap.md b/.changeset/rich-peas-clap.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": major
+---
+
+fix(table): remove aria-pressed from table headings
diff --git a/src/routes/_index/component/table/+page.marko b/src/routes/_index/component/table/+page.marko
@@ -1852,9 +1852,6 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
     <p>
         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.
     </p>
-    <p>
-        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.
-    </p>
     <p>
         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.
     </p>
@@ -1865,7 +1862,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
                     <thead>
                         <tr>
                             <th class="table-cell" aria-sort="descending">
-                                <button type="button" aria-pressed="true">
+                                <button type="button">
                                     Seller
                                     <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                                         <use href="#icon-sort-down-12"></use>
@@ -1929,7 +1926,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
                                 </button>
                             </th>
                             <th class="table-cell" aria-sort="ascending">
-                                <button type="button" aria-pressed="true">
+                                <button type="button">
                                     Shipping
                                     <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                                         <use href="#icon-sort-up-12"></use>
@@ -2126,7 +2123,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
         <thead>
             <tr>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true">
+                    <button type="button">
                         Seller
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-down-12"></use>
@@ -2190,7 +2187,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
                     </button>
                 </th>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true">
+                    <button type="button">
                         Shipping
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-up-12"></use>
@@ -2284,7 +2281,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
                     <thead>
                         <tr>
                             <th class="table-cell" aria-sort="descending">
-                                <button type="button" aria-pressed="true" disabled>
+                                <button type="button" disabled>
                                     Seller
                                     <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                                         <use href="#icon-sort-down-12"></use>
@@ -2348,7 +2345,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
                                 </button>
                             </th>
                             <th class="table-cell" aria-sort="ascending">
-                                <button type="button" aria-pressed="true" disabled>
+                                <button type="button" disabled>
                                     Shipping
                                     <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                                         <use href="#icon-sort-up-12"></use>
@@ -2567,7 +2564,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
         <thead>
             <tr>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true" disabled>
+                    <button type="button" disabled>
                         Seller
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-down-12"></use>
@@ -2631,7 +2628,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
                     </button>
                 </th>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true" disabled>
+                    <button type="button" disabled>
                         Shipping
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-up-12"></use>
@@ -2769,7 +2766,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
                                 </span>
                             </th>
                             <th class="table-cell" aria-sort="descending">
-                                <button type="button" aria-pressed="true">
+                                <button type="button">
                                     Seller
                                     <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                                         <use href="#icon-sort-down-12"></use>
@@ -3092,7 +3089,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
                     </span>
                 </th>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true">
+                    <button type="button">
                         Seller
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-down-12"></use>
@@ -3156,7 +3153,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
                     </button>
                 </th>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true">
+                    <button type="button">
                         Shipping
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-up-12"></use>
@@ -3219,7 +3216,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
                     <thead>
                         <tr>
                             <th class="table-cell" aria-sort="descending">
-                                <button type="button" aria-pressed="true">
+                                <button type="button">
                                     Seller
                                     <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                                         <use href="#icon-sort-down-12"></use>
@@ -3614,7 +3611,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
         <thead>
             <tr>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true">
+                    <button type="button">
                         Seller
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-down-12"></use>
@@ -3679,7 +3676,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
                     </button>
                 </th>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true">
+                    <button type="button">
                         Shipping
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-up-12"></use>
@@ -3779,7 +3776,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
                     <thead>
                         <tr>
                             <th class="table-cell" aria-sort="descending">
-                                <button type="button" aria-pressed="true">
+                                <button type="button">
                                     Seller
                                     <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                                         <use href="#icon-sort-down-12"></use>
@@ -4058,7 +4055,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
         <thead>
             <tr>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true">
+                    <button type="button">
                         Seller
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-down-12"></use>
@@ -4122,7 +4119,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
                     </button>
                 </th>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true">
+                    <button type="button">
                         Shipping
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-up-12"></use>

diff --git a/src/sass/table/stories/table.loading.stories.js b/src/sass/table/stories/table.loading.stories.js
@@ -6,7 +6,7 @@ export const base = () => `
         <thead>
             <tr>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true" disabled>
+                    <button type="button" disabled>
                         Seller
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-down-12"></use>
@@ -70,7 +70,7 @@ export const base = () => `
                     </button>
                 </th>
                 <th class="table-cell" aria-sort="ascending">
-                    <button type="button" aria-pressed="true" disabled>
+                    <button type="button" disabled>
                         Shipping
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-up-12"></use>
@@ -288,7 +288,7 @@ export const compact = () => `
         <thead>
             <tr>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true" disabled>
+                    <button type="button" disabled>
                         Seller
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-down-12"></use>
@@ -352,7 +352,7 @@ export const compact = () => `
                     </button>
                 </th>
                 <th class="table-cell" aria-sort="ascending">
-                    <button type="button" aria-pressed="true" disabled>
+                    <button type="button" disabled>
                         Shipping
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-up-12"></use>
@@ -570,7 +570,7 @@ export const relaxed = () => `
         <thead>
             <tr>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true" disabled>
+                    <button type="button" disabled>
                         Seller
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-down-12"></use>
@@ -634,7 +634,7 @@ export const relaxed = () => `
                     </button>
                 </th>
                 <th class="table-cell" aria-sort="ascending">
-                    <button type="button" aria-pressed="true" disabled>
+                    <button type="button" disabled>
                         Shipping
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-up-12"></use>

diff --git a/src/sass/table/stories/table.sortable.stories.js b/src/sass/table/stories/table.sortable.stories.js
@@ -6,7 +6,7 @@ export const base = () => `
         <thead>
             <tr>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true">
+                    <button type="button">
                         Seller
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-down-12"></use>
@@ -70,7 +70,7 @@ export const base = () => `
                     </button>
                 </th>
                 <th class="table-cell" aria-sort="scending">
-                    <button type="button" aria-pressed="true">
+                    <button type="button">
                         Shipping
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-up-12"></use>
@@ -266,7 +266,7 @@ export const compact = () => `
         <thead>
             <tr>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true">
+                    <button type="button">
                         Seller
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-down-12"></use>
@@ -329,7 +329,7 @@ export const compact = () => `
                         </svg>
                     </button>
                 </th>
-                <th class="table-cell" aria-pressed="true">
+                <th class="table-cell">
                     <button type="button">
                         Shipping
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
@@ -526,7 +526,7 @@ export const relaxed = () => `
         <thead>
             <tr>
                 <th class="table-cell" aria-sort="descending">
-                    <button type="button" aria-pressed="true">
+                    <button type="button">
                         Seller
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
                             <use href="#icon-sort-down-12"></use>
@@ -589,7 +589,7 @@ export const relaxed = () => `
                         </svg>
                     </button>
                 </th>
-                <th class="table-cell" aria-pressed="true">
+                <th class="table-cell">
                     <button type="button">
                         Shipping
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
@@ -785,7 +785,7 @@ export const anchors = () => `
     <table>
         <thead>
             <tr>
-                <th class="table-cell" aria-pressed="true">
+                <th class="table-cell">
                     <a href="https://ebay.com">
                         Seller
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">
@@ -849,7 +849,7 @@ export const anchors = () => `
                         </svg>
                     </a>
                 </th>
-                <th class="table-cell" aria-pressed="true">
+                <th class="table-cell">
                     <a href="https://ebay.com">
                         Shipping
                         <svg aria-hidden="true" class="icon icon--12" height="28" width="28">