From 858c41b01d8b8dd187ac46d1965aecfa6a9a94be Mon Sep 17 00:00:00 2001
From: Dustin Healy <54083382+dustinhealy@users.noreply.github.com>
Date: Mon, 15 Dec 2025 13:21:45 -0800
Subject: [PATCH] fix: add aria-sort in table headers for archived chats and
 shared links datatables

---
 packages/client/src/components/DataTable.tsx | 51 ++++++++++++--------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/packages/client/src/components/DataTable.tsx b/packages/client/src/components/DataTable.tsx
index 6a26e31d76..2527aeead1 100644
--- a/packages/client/src/components/DataTable.tsx
+++ b/packages/client/src/components/DataTable.tsx
@@ -438,26 +438,37 @@ export default function DataTable<TData, TValue>({
           <TableHeader className="sticky top-0 z-50 bg-surface-secondary">
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id} className="border-b border-border-light">
-                {headerGroup.headers.map((header) => (
-                  <TableHead
-                    key={header.id}
-                    className="whitespace-nowrap bg-surface-secondary px-2 py-2 text-left text-sm font-medium text-text-secondary sm:px-4"
-                    style={getColumnStyle(
-                      header.column.columnDef as TableColumn<TData, TValue>,
-                      isSmallScreen,
-                    )}
-                    onClick={
-                      header.column.getCanSort()
-                        ? header.column.getToggleSortingHandler()
-                        : undefined
-                    }
-                    scope="col"
-                  >
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(header.column.columnDef.header, header.getContext())}
-                  </TableHead>
-                ))}
+                {headerGroup.headers.map((header) => {
+                  const sortState = header.column.getIsSorted();
+                  let ariaSort: 'ascending' | 'descending' | undefined;
+                  if (sortState === 'asc') {
+                    ariaSort = 'ascending';
+                  } else if (sortState === 'desc') {
+                    ariaSort = 'descending';
+                  }
+
+                  return (
+                    <TableHead
+                      key={header.id}
+                      className="whitespace-nowrap bg-surface-secondary px-2 py-2 text-left text-sm font-medium text-text-secondary sm:px-4"
+                      style={getColumnStyle(
+                        header.column.columnDef as TableColumn<TData, TValue>,
+                        isSmallScreen,
+                      )}
+                      onClick={
+                        header.column.getCanSort()
+                          ? header.column.getToggleSortingHandler()
+                          : undefined
+                      }
+                      scope="col"
+                      aria-sort={ariaSort}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  );
+                })}
               </TableRow>
             ))}
           </TableHeader>