fix(webui): refine pane move focus state

This commit is contained in:
chengyongru
2026-08-12 10:27:57 +08:00
parent d0240a9074
commit 3822db3e2a
2 changed files with 10 additions and 2 deletions
@@ -719,12 +719,13 @@ export function PaneWorkbench({
}) : undefined} }) : undefined}
aria-keyshortcuts={active ? "ArrowLeft ArrowRight ArrowUp ArrowDown" : undefined} aria-keyshortcuts={active ? "ArrowLeft ArrowRight ArrowUp ArrowDown" : undefined}
data-workbench-pane-action data-workbench-pane-action
data-workbench-move-handle
data-testid={`pane-move-handle-${pane.key}`} data-testid={`pane-move-handle-${pane.key}`}
onPointerDown={(event) => handleMovePointerDown(pane.key, event)} onPointerDown={(event) => handleMovePointerDown(pane.key, event)}
onKeyDown={(event) => handleMoveKeyDown(pane.key, event)} onKeyDown={(event) => handleMoveKeyDown(pane.key, event)}
className={cn( className={cn(
"group host-no-drag absolute bottom-0 left-1/2 z-30 flex h-6 w-12 -translate-x-1/2 touch-none items-center justify-center rounded-full", "group host-no-drag absolute bottom-0 left-1/2 z-30 flex h-6 w-12 -translate-x-1/2 touch-none items-center justify-center rounded-full",
"cursor-grab focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background active:cursor-grabbing", "cursor-grab focus-visible:outline-none active:cursor-grabbing",
"transition-opacity duration-100 motion-reduce:transition-none", "transition-opacity duration-100 motion-reduce:transition-none",
active ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0", active ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
)} )}
@@ -732,7 +733,8 @@ export function PaneWorkbench({
<span <span
aria-hidden aria-hidden
className={cn( className={cn(
"h-[3px] w-9 rounded-full bg-foreground/35 transition-colors duration-100 motion-reduce:transition-none", "h-[3px] w-9 rounded-full bg-foreground/35 transition-[height,background-color] duration-100 motion-reduce:transition-none",
"group-focus-visible:h-[5px] group-focus-visible:bg-foreground/70",
draggingPaneKey === pane.key draggingPaneKey === pane.key
? "bg-foreground/65" ? "bg-foreground/65"
: "group-hover:bg-foreground/50", : "group-hover:bg-foreground/50",
+6
View File
@@ -867,3 +867,9 @@
min-height: 2rem; min-height: 2rem;
} }
} }
@media (forced-colors: active) {
[data-workbench-move-handle]:focus-visible {
outline: 2px solid CanvasText;
outline-offset: 2px;
}
}