diff --git a/frontend/src/shell/NavSessions.test.tsx b/frontend/src/shell/NavSessions.test.tsx index 80a2f954..48042570 100644 --- a/frontend/src/shell/NavSessions.test.tsx +++ b/frontend/src/shell/NavSessions.test.tsx @@ -25,3 +25,12 @@ test("active session is highlighted", () => { render( null} />); expect(screen.getByTestId("session-item-s2")).toHaveAttribute("data-active", "true"); }); + +test("pressing Enter on a focused row opens the panel", async () => { + const onOpenPanel = vi.fn(); + render( null} />); + const row = screen.getByTestId("session-item-s1"); + row.focus(); + await userEvent.keyboard("{Enter}"); + expect(onOpenPanel).toHaveBeenCalledWith("s1"); +}); diff --git a/frontend/src/shell/NavSessions.tsx b/frontend/src/shell/NavSessions.tsx index 8081824a..fb727cee 100644 --- a/frontend/src/shell/NavSessions.tsx +++ b/frontend/src/shell/NavSessions.tsx @@ -27,8 +27,17 @@ export function NavSessions({ sessions, activeSessionId, onOpenPanel, menuFor }: data-testid={`session-item-${s.id}`} data-active={active ? "true" : "false"} onClick={() => onOpenPanel(s.id)} + role="button" + tabIndex={0} + aria-label={s.name || s.question || s.id} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + onOpenPanel(s.id); + } + }} className={[ - "group flex w-full cursor-pointer items-start gap-1 rounded-lg px-2.5 py-2 text-left transition-colors", + "group flex w-full cursor-pointer items-start gap-1 rounded-lg px-2.5 py-2 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40", active ? "bg-[oklch(var(--primary)/0.12)]" : "hover:bg-accent", ].join(" ")} >