From 5ae24710e41345ffb9813a23e510d3abd1d89413 Mon Sep 17 00:00:00 2001
From: Chris Arderne <chris@trigger.dev>
Date: Wed, 19 Aug 2026 16:35:46 +0100
Subject: [PATCH] fix(webapp): use native selectable row controls (#4700)

## Summary

Use native controls for sortable columns and selectable prompt versions.

Table headers keep filter actions separate from sort buttons, prompt
version rows expose pressed state, and a redundant deployment click
interceptor is removed.

Base: [#4699](https://github.com/triggerdotdev/trigger.dev/pull/4699)
---
 .../app/components/code/TSQLResultsTable.tsx  | 20 ++++++++++++++-----
 .../route.tsx                                 |  5 +----
 .../route.tsx                                 |  8 +++++---
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index c1a627b8d..c3ad0ccdf 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -927,6 +927,8 @@ function HeaderCellContent({
 
   const sortHighlighted = isCellHovered && !isFilterHovered;
 
+  /* oxlint-disable jsx-a11y/click-events-have-key-events -- The sortable header contains separate tooltip and filter controls that cannot be nested in a button. */
+  /* oxlint-disable jsx-a11y/no-static-element-interactions -- Preserve the existing full-header pointer target rather than nesting its child controls. */
   return (
     <div
       className={cn(
@@ -946,7 +948,7 @@ function HeaderCellContent({
           })}
         >
           <span className="truncate text-left">{children}</span>
-          <span className="flex shrink-0">
+          <span className="flex shrink-0" onClick={(event) => event.stopPropagation()}>
             <InfoIconTooltip
               content={tooltip}
               contentClassName="normal-case tracking-normal"
@@ -958,11 +960,17 @@ function HeaderCellContent({
       ) : (
         <span className="min-w-0 flex-1 truncate text-left">{children}</span>
       )}
-      {/* Sort indicator */}
+      {/* The full header remains a pointer target, while this dedicated control makes sorting keyboard-accessible without nesting the tooltip or filter controls. */}
       {canSort && (
-        <span
+        <button
+          type="button"
+          aria-label="Toggle sort"
+          onClick={(event) => {
+            event.stopPropagation();
+            onSortClick?.(event);
+          }}
           className={cn(
-            "shrink-0 transition-colors",
+            "shrink-0 rounded transition-colors focus-custom",
             sortHighlighted ? "text-text-bright" : "text-text-dimmed"
           )}
         >
@@ -973,7 +981,7 @@ function HeaderCellContent({
           ) : (
             <ChevronUpDownIcon className="size-4" />
           )}
-        </span>
+        </button>
       )}
       {onFilterClick && (
         <button
@@ -993,6 +1001,8 @@ function HeaderCellContent({
     </div>
   );
 }
+/* oxlint-enable jsx-a11y/click-events-have-key-events */
+/* oxlint-enable jsx-a11y/no-static-element-interactions */
 
 /**
  * Filter input cell for the filter row
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
index 66fdc0d96..d0813ea33 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx
@@ -340,10 +340,7 @@ export default function Page() {
                             {hasVercelIntegration && (
                               <TableCell isSelected={isSelected}>
                                 {deployment.vercelDeploymentUrl ? (
-                                  <div
-                                    className="-ml-1 flex items-center"
-                                    onClick={(e) => e.stopPropagation()}
-                                  >
+                                  <div className="-ml-1 flex items-center">
                                     <VercelLink
                                       vercelDeploymentUrl={deployment.vercelDeploymentUrl}
                                     />
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index a1f332eca..cf02be888 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -2093,11 +2093,13 @@ function VersionsTab({
         const isOverride = v.labels.includes("override");
 
         return (
-          <div
+          <button
+            type="button"
+            aria-pressed={isSelected}
             key={v.id}
             onClick={() => onSelectVersion(v.version)}
             className={cn(
-              "flex cursor-pointer items-center gap-3 px-3 py-3 text-sm transition",
+              "flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-left text-sm transition focus-custom",
               isSelected
                 ? "bg-indigo-500/10 hover:bg-indigo-500/[0.07]"
                 : "hover:bg-background-hover"
@@ -2143,7 +2145,7 @@ function VersionsTab({
             <span className="shrink-0 text-xs text-text-dimmed">
               <DateTime date={v.createdAt} />
             </span>
-          </div>
+          </button>
         );
       })}
     </div>