diff --git a/packages/dashboard/app/components/Lane.css b/packages/dashboard/app/components/Lane.css index c1612288f2..8a6e67358e 100644 --- a/packages/dashboard/app/components/Lane.css +++ b/packages/dashboard/app/components/Lane.css @@ -95,6 +95,17 @@ gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); + cursor: pointer; + user-select: none; +} + +.lane-header:hover { + background: var(--surface-hover, var(--surface)); +} + +.lane-header:focus-visible { + outline: 2px solid var(--focus-ring, var(--color-primary)); + outline-offset: -2px; } .lane-name { diff --git a/packages/dashboard/app/components/Lane.tsx b/packages/dashboard/app/components/Lane.tsx index 547af5cb74..8fd3000d2a 100644 --- a/packages/dashboard/app/components/Lane.tsx +++ b/packages/dashboard/app/components/Lane.tsx @@ -1,5 +1,5 @@ import "./Lane.css"; -import { memo, useCallback, useEffect, useMemo, useRef } from "react"; +import { memo, useCallback, useEffect, useMemo, useRef, type KeyboardEvent } from "react"; import { useTranslation } from "react-i18next"; import type { Task, TaskDetail, Column as ColumnType, TaskCreateInput, GithubIssueAction } from "@fusion/core"; import { Column } from "./Column"; @@ -134,6 +134,11 @@ function LaneComponent(props: LaneProps) { }, []); const handleToggle = useCallback(() => onToggleCollapse(workflow.id), [onToggleCollapse, workflow.id]); + const handleHeaderKeyDown = useCallback((event: KeyboardEvent) => { + if (event.key !== "Enter" && event.key !== " ") return; + event.preventDefault(); + handleToggle(); + }, [handleToggle]); const makeCanDrop = useCallback( (targetColumnId: string) => (taskId: string) => props.canDropTask(taskId, targetColumnId, workflow.id), @@ -142,17 +147,18 @@ function LaneComponent(props: LaneProps) { return (
-
-