fix(webapp): align tree mouse and keyboard interactions

Author: carderne

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

@@ -968,6 +968,14 @@ function TasksTreeView({
     },
   });
 
+  const getInteractiveNodeProps = useCallback(
+    (id: string) => ({
+      ...getNodeProps(id),
+      onClick: () => selectNode(id),
+    }),
+    [getNodeProps, selectNode]
+  );
+
   return (
     <div className="grid h-full grid-rows-[2.5rem_1fr_3.25rem] overflow-hidden">
       <div className="flex items-center justify-between gap-2 border-b border-grid-dimmed px-1.5">
@@ -1047,7 +1055,7 @@ function TasksTreeView({
               autoFocus
               tree={events}
               nodes={nodes}
-              getNodeProps={getNodeProps}
+              getNodeProps={getInteractiveNodeProps}
               getTreeProps={getTreeProps}
               parentClassName="pl-3"
               renderNode={({ node, state, index }) => (
@@ -1058,9 +1066,6 @@ function TasksTreeView({
                       ? "bg-grid-dimmed hover:bg-grid-bright"
                       : "bg-transparent hover:bg-grid-dimmed"
                   )}
-                  onClick={() => {
-                    selectNode(node.id);
-                  }}
                 >
                   <div className="flex h-8 items-center">
                     {Array.from({ length: node.level }).map((_, index) => (
@@ -1070,9 +1075,12 @@ function TasksTreeView({
                         isSelected={state.selected}
                       />
                     ))}
-                    <div
+                    <button
+                      type="button"
+                      disabled={!node.hasChildren}
+                      aria-label={state.expanded ? "Collapse task" : "Expand task"}
                       className={cn(
-                        "flex h-8 w-4 items-center",
+                        "flex h-8 w-4 items-center focus-custom",
                         node.hasChildren && "hover:bg-surface-control"
                       )}
                       onClick={(e) => {
@@ -1098,7 +1106,7 @@ function TasksTreeView({
                       ) : (
                         <div className="h-8 w-4" />
                       )}
-                    </div>
+                    </button>
                   </div>
 
                   <div className="flex w-full items-center justify-between gap-2 pl-1">

apps/webapp/app/routes/storybook.tree-view/route.tsx

@@ -4,7 +4,7 @@ import {
   FolderOpenIcon,
   MagnifyingGlassIcon,
 } from "@heroicons/react/20/solid";
-import { useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { Input } from "~/components/primitives/Input";
 import type { Tree } from "~/components/primitives/TreeView/TreeView";
@@ -177,6 +177,14 @@ function TreeViewParent({
     },
   });
 
+  const getInteractiveNodeProps = useCallback(
+    (id: string) => ({
+      ...getNodeProps(id),
+      onClick: () => toggleNodeSelection(id),
+    }),
+    [getNodeProps, toggleNodeSelection]
+  );
+
   return (
     <div className="flex w-72 flex-col items-start gap-y-4 p-4">
       <div className="flex items-center gap-2">
@@ -203,7 +211,7 @@ function TreeViewParent({
         autoFocus
         tree={tree}
         nodes={nodes}
-        getNodeProps={getNodeProps}
+        getNodeProps={getInteractiveNodeProps}
         getTreeProps={getTreeProps}
         parentClassName="h-96 bg-background-deep"
         renderNode={({ node, state, index, virtualizer, virtualItem }) => (
@@ -215,20 +223,22 @@ function TreeViewParent({
               "flex cursor-pointer items-center gap-2 py-1 hover:bg-blue-500/10",
               state.selected && "bg-blue-500/20 hover:bg-blue-500/30"
             )}
-            onClick={() => {
-              toggleNodeSelection(node.id);
-            }}
           >
-            <div
-              className="h-4 w-4"
+            <button
+              type="button"
+              aria-label={
+                node.hasChildren
+                  ? state.expanded
+                    ? "Collapse node"
+                    : "Expand node"
+                  : "Select node"
+              }
+              className="h-4 w-4 focus-custom"
               onClick={(e) => {
                 e.stopPropagation();
                 toggleExpandNode(node.id);
                 selectNode(node.id, true);
               }}
-              onKeyDown={(e) => {
-                console.log(e.key);
-              }}
             >
               {node.hasChildren ? (
                 state.expanded ? (
@@ -239,7 +249,7 @@ function TreeViewParent({
               ) : (
                 <DocumentIcon className="h-4 w-4" />
               )}
-            </div>
+            </button>
             <div>{node.data.title}</div>
           </div>
         )}