fix: address remaining review comments — arrow-key nav, IME guard, test resilience

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
armaan 2026-07-03 17:58:29 +00:00
parent 4e1a15ff19
commit 7a7f1d27e0
4 changed files with 32 additions and 3 deletions

View File

@ -182,7 +182,7 @@ function PageClientInner() {
}, [createProject, creatingProject, hasProjectName]);
const handleProjectNameKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {
if (event.key !== "Enter") {
if (event.key !== "Enter" || event.nativeEvent.isComposing) {
return;
}

View File

@ -148,7 +148,8 @@ describe("OnboardingPage", () => {
);
const backButtonClassName = screen.getByRole("button", { name: "Go back to previous step" }).getAttribute("class") ?? "";
const progressRailClassName = screen.getByRole("button", { name: "Apps" }).parentElement?.parentElement?.getAttribute("class") ?? "";
const progressRail = screen.getByRole("button", { name: "Apps" }).closest(".w-\\[150px\\]");
const progressRailClassName = progressRail?.getAttribute("class") ?? "";
expect(backButtonClassName).toContain("inline-flex");
expect(backButtonClassName).toContain("absolute");

View File

@ -40,7 +40,7 @@ describe("HostedAuthMethodPreview", () => {
fireEvent.click(screen.getByRole("tab", { name: "Email & Password" }));
expect(screen.getByLabelText("Password")).toBeDefined();
screen.getByLabelText("Password");
expect(screen.getByRole("tab", { name: "Email & Password" }).getAttribute("data-state")).toBe("active");
});
});

View File

@ -95,11 +95,39 @@ function HostedPreviewTabsList({ className, children, ...props }: HTMLAttributes
return () => observer.disconnect();
}, [measure]);
const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
const container = containerRef.current;
if (container == null) {
return;
}
const tabs = Array.from(container.querySelectorAll<HTMLElement>('[role="tab"]'));
const currentIndex = tabs.findIndex((tab) => tab === document.activeElement);
if (currentIndex === -1) {
return;
}
let nextIndex: number | null = null;
if (event.key === "ArrowRight") {
nextIndex = (currentIndex + 1) % tabs.length;
} else if (event.key === "ArrowLeft") {
nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
} else if (event.key === "Home") {
nextIndex = 0;
} else if (event.key === "End") {
nextIndex = tabs.length - 1;
}
if (nextIndex != null) {
event.preventDefault();
tabs[nextIndex].focus();
tabs[nextIndex].click();
}
}, []);
return (
<div
ref={containerRef}
role="tablist"
className={cn("stack-scope relative inline-flex h-9 items-center justify-center rounded-lg border border-black/[0.08] bg-zinc-100/70 p-1 text-muted-foreground dark:border-white/[0.10] dark:bg-zinc-900/45", className)}
onKeyDown={handleKeyDown}
{...props}
>
{indicatorStyle != null && (