From 4e1a15ff1967cef130593b44db8af7e96355d58b Mon Sep 17 00:00:00 2001
From: armaan <armaan@stack-auth.com>
Date: Fri, 3 Jul 2026 00:28:41 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20address=20review=20feedback=20=E2=80=94?=
 =?UTF-8?q?=20destructure=20defaultValue,=20add=20ARIA=20wiring,=20tighten?=
 =?UTF-8?q?=20test=20assertions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Destructure defaultValue before spreading props onto div in HostedPreviewTabs
- Add id/aria-controls/tabIndex to tab triggers and id/aria-labelledby to tab panels
- Narrow regression test assertions to check only the HostedAuthMethodPreview wrapper block

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../project-onboarding-wizard.test.tsx           | 10 +++++++---
 .../[projectId]/auth-methods/page-client.test.ts | 10 +++++++---
 .../src/components/hosted-auth-preview.tsx       | 16 +++++++++++++---
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.test.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.test.tsx
index 746473e12..a586a0dc6 100644
--- a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.test.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/project-onboarding-wizard.test.tsx
@@ -180,9 +180,13 @@ describe("ProjectOnboardingWizard", () => {
     const testDir = dirname(fileURLToPath(import.meta.url));
     const source = readFileSync(join(testDir, "project-onboarding-wizard.tsx"), "utf-8");
 
-    expect(source).not.toContain("pointer-events-none");
-    expect(source).not.toContain("inert>");
-    expect(source).not.toContain("bg-transparent");
+    const previewBlockMatch = source.match(/(<[^>]*HostedAuthMethodPreview[\s\S]*?\/>[\s\S]{0,300})/);
+    expect(previewBlockMatch).not.toBeNull();
+    const previewBlock = previewBlockMatch![1];
+
+    expect(previewBlock).not.toContain("pointer-events-none");
+    expect(previewBlock).not.toContain("inert");
+    expect(previewBlock).not.toContain("bg-transparent");
   });
 
   it("keeps required apps when normalizing persisted onboarding state", () => {
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.test.ts b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.test.ts
index c8db3d9c8..6dc6cbde9 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.test.ts
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.test.ts
@@ -8,8 +8,12 @@ describe("auth methods live preview", () => {
     const testDir = dirname(fileURLToPath(import.meta.url));
     const source = readFileSync(join(testDir, "page-client.tsx"), "utf-8");
 
-    expect(source).not.toContain("pointer-events-none");
-    expect(source).not.toContain("inert>");
-    expect(source).not.toContain("bg-transparent z-10");
+    const previewBlockMatch = source.match(/(<[^>]*HostedAuthMethodPreview[\s\S]*?\/>[\s\S]{0,300})/);
+    expect(previewBlockMatch).not.toBeNull();
+    const previewBlock = previewBlockMatch![1];
+
+    expect(previewBlock).not.toContain("pointer-events-none");
+    expect(previewBlock).not.toContain("inert");
+    expect(previewBlock).not.toContain("bg-transparent");
   });
 });
diff --git a/apps/dashboard/src/components/hosted-auth-preview.tsx b/apps/dashboard/src/components/hosted-auth-preview.tsx
index 7ed946c55..ba50653d5 100644
--- a/apps/dashboard/src/components/hosted-auth-preview.tsx
+++ b/apps/dashboard/src/components/hosted-auth-preview.tsx
@@ -42,10 +42,10 @@ function useHostedPreviewTabsContext() {
   return context;
 }
 
-function HostedPreviewTabs(props: HTMLAttributes<HTMLDivElement> & {
+function HostedPreviewTabs({ defaultValue, ...rest }: HTMLAttributes<HTMLDivElement> & {
   defaultValue: string,
 }) {
-  const [value, setValue] = useState(props.defaultValue);
+  const [value, setValue] = useState(defaultValue);
   const contextValue = useMemo<HostedPreviewTabsContextValue>(() => ({
     value,
     setValue,
@@ -53,7 +53,7 @@ function HostedPreviewTabs(props: HTMLAttributes<HTMLDivElement> & {
 
   return (
     <HostedPreviewTabsContext.Provider value={contextValue}>
-      <div {...props} />
+      <div {...rest} />
     </HostedPreviewTabsContext.Provider>
   );
 }
@@ -119,12 +119,17 @@ function HostedPreviewTabsTrigger({ className, value, onClick, ...props }: React
 }) {
   const tabs = useHostedPreviewTabsContext();
   const active = tabs.value === value;
+  const tabId = `hosted-preview-tab-${value}`;
+  const panelId = `hosted-preview-panel-${value}`;
 
   return (
     <button
       type="button"
       role="tab"
+      id={tabId}
       aria-selected={active}
+      aria-controls={panelId}
+      tabIndex={active ? 0 : -1}
       data-state={active ? "active" : "inactive"}
       className={cn(
         "relative z-10 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium text-muted-foreground ring-offset-background transition-colors duration-300 hover:text-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold data-[state=active]:text-foreground",
@@ -147,9 +152,14 @@ function HostedPreviewTabsContent({ className, value, ...props }: HTMLAttributes
     return null;
   }
 
+  const panelId = `hosted-preview-panel-${value}`;
+  const tabId = `hosted-preview-tab-${value}`;
+
   return (
     <div
       role="tabpanel"
+      id={panelId}
+      aria-labelledby={tabId}
       data-state="active"
       className={cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className)}
       {...props}