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} />);
|
||||
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-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(" ")}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user