fix(frontend): make NavSessions rows keyboard-accessible (role/tabIndex/Enter+Space)
This commit is contained in:
@@ -25,3 +25,12 @@ test("active session is highlighted", () => {
|
|||||||
render(<NavSessions sessions={SESSIONS} activeSessionId="s2" onOpenPanel={vi.fn()} menuFor={() => null} />);
|
render(<NavSessions sessions={SESSIONS} activeSessionId="s2" onOpenPanel={vi.fn()} menuFor={() => null} />);
|
||||||
expect(screen.getByTestId("session-item-s2")).toHaveAttribute("data-active", "true");
|
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(<NavSessions sessions={SESSIONS} activeSessionId={null} onOpenPanel={onOpenPanel} menuFor={() => null} />);
|
||||||
|
const row = screen.getByTestId("session-item-s1");
|
||||||
|
row.focus();
|
||||||
|
await userEvent.keyboard("{Enter}");
|
||||||
|
expect(onOpenPanel).toHaveBeenCalledWith("s1");
|
||||||
|
});
|
||||||
|
|||||||
@@ -27,8 +27,17 @@ export function NavSessions({ sessions, activeSessionId, onOpenPanel, menuFor }:
|
|||||||
data-testid={`session-item-${s.id}`}
|
data-testid={`session-item-${s.id}`}
|
||||||
data-active={active ? "true" : "false"}
|
data-active={active ? "true" : "false"}
|
||||||
onClick={() => onOpenPanel(s.id)}
|
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={[
|
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",
|
active ? "bg-[oklch(var(--primary)/0.12)]" : "hover:bg-accent",
|
||||||
].join(" ")}
|
].join(" ")}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user