From e40437cf8c2e301ed00958831e14996b2fec2757 Mon Sep 17 00:00:00 2001
From: Joshua Wink <60934381+WinkeeFace@users.noreply.github.com>
Date: Tue, 21 Jan 2025 13:10:15 -0600
Subject: [PATCH] fix(ebay-table): update row-header attribute, removed
 aria-pressed (#2387)

---
 .changeset/poor-mirrors-float.md              |  5 ++++
 src/components/ebay-table/component.ts        |  9 +++----
 .../ebay-table/examples/default.marko         |  2 +-
 .../ebay-table/examples/selection.marko       |  2 +-
 .../examples/sort-client-side.marko           |  2 +-
 .../ebay-table/examples/sort-with-link.marko  |  2 +-
 src/components/ebay-table/examples/sort.marko |  2 +-
 .../ebay-table/examples/with-actions.marko    |  2 +-
 src/components/ebay-table/index.marko         |  7 +++--
 src/components/ebay-table/marko-tag.json      |  5 ++--
 src/components/ebay-table/table.stories.ts    | 12 ++++++++-
 .../test/__snapshots__/test.server.js.snap    | 27 +++++++++++--------
 .../ebay-table/test/sort/test.browser.js      |  2 --
 13 files changed, 47 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/poor-mirrors-float.md

diff --git a/.changeset/poor-mirrors-float.md b/.changeset/poor-mirrors-float.md
new file mode 100644
index 000000000..9b503702d
--- /dev/null
+++ b/.changeset/poor-mirrors-float.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+fix(ebay-table): update row-header attribute, removed aria-pressed
diff --git a/src/components/ebay-table/component.ts b/src/components/ebay-table/component.ts
index 76b500cba..ac49ebca1 100644
--- a/src/components/ebay-table/component.ts
+++ b/src/components/ebay-table/component.ts
@@ -3,13 +3,10 @@ import { WithNormalizedProps } from "../../global";
 import { CheckboxEvent } from "../ebay-checkbox/component-browser";
 
 export type TableSort = "asc" | "desc" | "none";
+
 export interface TableHeader extends Omit<Marko.Input<"th">, `on${string}`> {
-    "column-type"?:
-        | "normal"
-        | "numeric"
-        | "row-header"
-        | "layout"
-        | "icon-action";
+    "column-type"?: "normal" | "numeric" | "layout" | "icon-action";
+    "row-header"?: boolean;
     name?: string;
     sort?: TableSort | boolean;
     href?: AttrString;
diff --git a/src/components/ebay-table/examples/default.marko b/src/components/ebay-table/examples/default.marko
index b8b1d347c..155c7d852 100644
--- a/src/components/ebay-table/examples/default.marko
+++ b/src/components/ebay-table/examples/default.marko
@@ -1,7 +1,7 @@
 import data from "./data.json";
 
 <ebay-table ...input>
-    <@header column-type="row-header">
+    <@header row-header>
         Seller
     </@header>
     <@header>Item</@header>
diff --git a/src/components/ebay-table/examples/selection.marko b/src/components/ebay-table/examples/selection.marko
index 55764de9b..a4620fff2 100644
--- a/src/components/ebay-table/examples/selection.marko
+++ b/src/components/ebay-table/examples/selection.marko
@@ -1,7 +1,7 @@
 import data from "./data.json";
 
 <ebay-table mode="selection" on-select("emit", "select") ...input>
-    <@header column-type="row-header">
+    <@header row-header>
         Seller
     </@header>
     <@header>Item</@header>
diff --git a/src/components/ebay-table/examples/sort-client-side.marko b/src/components/ebay-table/examples/sort-client-side.marko
index 59010280a..441d8e321 100644
--- a/src/components/ebay-table/examples/sort-client-side.marko
+++ b/src/components/ebay-table/examples/sort-client-side.marko
@@ -36,7 +36,7 @@ class {
     }
 }
 <ebay-table on-sort("onSort") ...input>
-    <@header name="sellerCol" column-type="row-header">
+    <@header name="sellerCol" row-header>
         Seller
     </@header>
     <@header name="itemCol">
diff --git a/src/components/ebay-table/examples/sort-with-link.marko b/src/components/ebay-table/examples/sort-with-link.marko
index f920ce90f..31e6d2891 100644
--- a/src/components/ebay-table/examples/sort-with-link.marko
+++ b/src/components/ebay-table/examples/sort-with-link.marko
@@ -2,7 +2,7 @@ import data from "./data.json";
 
 <ebay-table ...input>
     <@header
-        column-type="row-header"
+        row-header
         sort=("asc" as const)
         href="https://www.ebay.com"
     >
diff --git a/src/components/ebay-table/examples/sort.marko b/src/components/ebay-table/examples/sort.marko
index 0c60a7540..9008c82c1 100644
--- a/src/components/ebay-table/examples/sort.marko
+++ b/src/components/ebay-table/examples/sort.marko
@@ -16,7 +16,7 @@ class {
 <ebay-table on-sort("onSort") ...input>
     <@header
         name="sellerCol"
-        column-type="row-header"
+        row-header
         sort=(state.sorted.sellerCol || "none")
     >
         Seller
diff --git a/src/components/ebay-table/examples/with-actions.marko b/src/components/ebay-table/examples/with-actions.marko
index 5c8a3e30e..f3f7aec4c 100644
--- a/src/components/ebay-table/examples/with-actions.marko
+++ b/src/components/ebay-table/examples/with-actions.marko
@@ -1,7 +1,7 @@
 import data from "./data.json";
 
 <ebay-table ...input>
-    <@header column-type="row-header">
+    <@header row-header>
         Seller
     </@header>
     <@header>Item</@header>
diff --git a/src/components/ebay-table/index.marko b/src/components/ebay-table/index.marko
index 41142fa7e..8ffeb461a 100644
--- a/src/components/ebay-table/index.marko
+++ b/src/components/ebay-table/index.marko
@@ -41,6 +41,7 @@ $ const {
                 <for|header, headerIndex| of=headers>
                     $ const {
                         columnType = "normal",
+                        rowHeader,
                         class: thClass,
                         name = `${headerIndex}`,
                         sort,
@@ -73,9 +74,7 @@ $ const {
                             sortEleAttr = { href };
                         } else if (sortOrder) {
                             sortEleAttr = {
-                                type: "button",
-                                "aria-pressed":
-                                    sortOrder !== "none" ? "true" : "false",
+                                type: "button"
                             };
                         }
                         <${href ? "a" : sortOrder ? "button" : null}
@@ -136,7 +135,7 @@ $ const {
                                     ) &&
                                     `table-cell--${header.columnType}`,
                             ];
-                            <${header.columnType === "row-header" ? "th" : "td"}
+                            <${header.rowHeader ? "th" : "td"}
                                 ...processHtmlAttributes(tdInput)
                                 class=[cellBaseClass, tdClass]
                             >
diff --git a/src/components/ebay-table/marko-tag.json b/src/components/ebay-table/marko-tag.json
index 2e55528da..3d0154037 100644
--- a/src/components/ebay-table/marko-tag.json
+++ b/src/components/ebay-table/marko-tag.json
@@ -19,8 +19,9 @@
         },
         "@html-attributes": "expression",
         "@column-type": {
-            "enum": ["normal", "numeric", "row-header", "layout", "icon-action"]
-        }
+            "enum": ["normal", "numeric", "layout", "icon-action"]
+        },
+        "@row-header": "boolean"
     },
     "@row <row>[]": {
         "attribute-groups": ["html-attributes"],
diff --git a/src/components/ebay-table/table.stories.ts b/src/components/ebay-table/table.stories.ts
index f15b02c21..e2e288833 100644
--- a/src/components/ebay-table/table.stories.ts
+++ b/src/components/ebay-table/table.stories.ts
@@ -47,6 +47,14 @@ export default {
                 category: "@attribute tags",
             },
         },
+        rowHeader: {
+            name: "row-header",
+            control: { type: "boolean" },
+            description: "If true, the cell will be rendered as a row header",
+            table: {
+                category: "@header attribute tags",
+            },
+        },
         row: {
             name: "@row",
             description: "row attribute tags",
@@ -68,12 +76,14 @@ export default {
             options: [
                 "normal",
                 "numeric",
-                "row-header",
                 "layout",
                 "icon-action",
             ],
             table: {
                 category: "@header attribute tags",
+                defaultValue: {
+                    summary: "normal",
+                },
             },
         },
         href: {
diff --git a/src/components/ebay-table/test/__snapshots__/test.server.js.snap b/src/components/ebay-table/test/__snapshots__/test.server.js.snap
index de34290fa..020e01efe 100644
--- a/src/components/ebay-table/test/__snapshots__/test.server.js.snap
+++ b/src/components/ebay-table/test/__snapshots__/test.server.js.snap
@@ -15,7 +15,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = `
             class="table-cell"
           >
             <button
-              aria-pressed="true"
               type="button"
             >
               Seller
@@ -45,7 +44,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = `
             class="table-cell"
           >
             <button
-              aria-pressed="false"
               type="button"
             >
               Item
@@ -75,7 +73,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = `
             class="table-cell"
           >
             <button
-              aria-pressed="false"
               type="button"
             >
               Status
@@ -95,7 +92,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = `
             class="table-cell table-cell--numeric"
           >
             <button
-              aria-pressed="false"
               type="button"
             >
               List Price
@@ -115,7 +111,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = `
             class="table-cell table-cell--numeric"
           >
             <button
-              aria-pressed="false"
               type="button"
             >
               Quantity Available
@@ -135,7 +130,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = `
             class="table-cell"
           >
             <button
-              aria-pressed="false"
               type="button"
             >
               Orders
@@ -155,7 +149,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = `
             class="table-cell table-cell--numeric"
           >
             <button
-              aria-pressed="false"
               type="button"
             >
               Watchers
@@ -173,7 +166,17 @@ exports[`ebay-table > renders ColumnSorting 1`] = `
           </th>
           <th
             class="table-cell table-cell--numeric"
-         ..."
+          >
+            <button
+              type="button"
+            >
+              Protection
+               
+              <svg
+                aria-hidden="true"
+                class="icon icon--12"
+                focusable="false"
+              [..."
 `;
 
 exports[`ebay-table > renders ColumnSortingClientSide 1`] = `
@@ -205,7 +208,6 @@ exports[`ebay-table > renders ColumnSortingClientSide 1`] = `
             class="table-cell table-cell--numeric"
           >
             <button
-              aria-pressed="false"
               type="button"
             >
               List Price
@@ -235,7 +237,6 @@ exports[`ebay-table > renders ColumnSortingClientSide 1`] = `
             class="table-cell table-cell--numeric"
           >
             <button
-              aria-pressed="false"
               type="button"
             >
               Quantity Available
@@ -374,7 +375,11 @@ exports[`ebay-table > renders ColumnSortingClientSide 1`] = `
           >
             <a
               href="https://ebay.com"
-            ..."
+            >
+              00-10542-89507
+            </a>
+          </td>
+        ..."
 `;
 
 exports[`ebay-table > renders ColumnSortingWithLink 1`] = `
diff --git a/src/components/ebay-table/test/sort/test.browser.js b/src/components/ebay-table/test/sort/test.browser.js
index b934743bf..e74f42f78 100644
--- a/src/components/ebay-table/test/sort/test.browser.js
+++ b/src/components/ebay-table/test/sort/test.browser.js
@@ -26,7 +26,6 @@ describe("given sortable table with Seller column is sorted in ascending order (
         it("then proper sort event should be emitted", async () => {
             expect(sellerColumn).toMatchInlineSnapshot(`
               <button
-                aria-pressed="true"
                 type="button"
               >
                 
@@ -68,7 +67,6 @@ describe("given sortable table with Seller column is sorted in ascending order (
             it("then proper sort event should be emitted", async () => {
                 expect(sellerColumn).toMatchInlineSnapshot(`
                   <button
-                    aria-pressed="false"
                     type="button"
                   >