fix(webapp): use native selectable row controls

Author: carderne

apps/webapp/app/components/code/TSQLResultsTable.tsx

@@ -918,19 +918,8 @@ function HeaderCellContent({
   const [isFilterHovered, setIsFilterHovered] = useState(false);
 
   const sortHighlighted = isCellHovered && !isFilterHovered;
-
-  return (
-    <div
-      className={cn(
-        "flex w-full items-center gap-1 overflow-hidden bg-background-bright py-2 pl-2 pr-3",
-        "font-mono text-xs font-medium text-text-bright",
-        alignment === "right" && "justify-end",
-        canSort && "cursor-pointer select-none"
-      )}
-      onMouseEnter={() => setIsCellHovered(true)}
-      onMouseLeave={() => setIsCellHovered(false)}
-      onClick={onSortClick}
-    >
+  const headerContent = (
+    <>
       {tooltip ? (
         <div
           className={cn("flex min-w-0 flex-1 items-center gap-1 truncate", {
@@ -950,7 +939,6 @@ function HeaderCellContent({
       ) : (
         <span className="min-w-0 flex-1 truncate text-left">{children}</span>
       )}
-      {/* Sort indicator */}
       {canSort && (
         <span
           className={cn(
@@ -967,6 +955,33 @@ function HeaderCellContent({
           )}
         </span>
       )}
+    </>
+  );
+
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center gap-1 overflow-hidden bg-background-bright py-2 pl-2 pr-3",
+        "font-mono text-xs font-medium text-text-bright",
+        alignment === "right" && "justify-end"
+      )}
+      onMouseEnter={() => setIsCellHovered(true)}
+      onMouseLeave={() => setIsCellHovered(false)}
+    >
+      {canSort ? (
+        <button
+          type="button"
+          onClick={onSortClick}
+          className={cn(
+            "flex min-w-0 flex-1 cursor-pointer select-none items-center gap-1 overflow-hidden text-left focus-custom",
+            alignment === "right" && "justify-end"
+          )}
+        >
+          {headerContent}
+        </button>
+      ) : (
+        headerContent
+      )}
       {onFilterClick && (
         <button
           type="button"

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}
                                     />

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx

@@ -2093,7 +2093,9 @@ 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(
@@ -2143,7 +2145,7 @@ function VersionsTab({
             <span className="shrink-0 text-xs text-text-dimmed">
               <DateTime date={v.createdAt} />
             </span>
-          </div>
+          </button>
         );
       })}
     </div>