docs/src/app/loading.tsx (1)

1-7: Add basic a11y semantics to the loading UI

Expose the loading state to assistive tech.

Apply this diff:

 export default function Loading() {
   return (
-    <div>
-      Loading...
-    </div>
+    <div role="status" aria-live="polite" aria-busy="true">
+      Loading...
+    </div>
   );
 }

docs/src/app/handler/[...stack]/page.tsx (1)

1-6: Handler wiring matches examples; consider explicit typing/dynamic hint.

• Typing: if the SDK exports a route-props type, prefer it over unknown for DX.
• Next caching: handler routes often rely on cookies/headers; consider forcing dynamic to avoid accidental static optimization.

Apply if desired:

+// Optional: ensure no static optimization for the auth handler
+export const dynamic = 'force-dynamic';
+
-import { stackServerApp } from '@/stack';
+import { stackServerApp } from '@/stack';
 import { StackHandler } from '@stackframe/stack';

-export default function Handler(props: unknown) {
+// If available: import { StackRouteProps } from '@stackframe/stack'
+// export default function Handler(props: StackRouteProps) {
+export default function Handler(props: any) {
   return <StackHandler fullPage app={stackServerApp} routeProps={props} />;
 }

Confirm whether the SDK recommends dynamic = 'force-dynamic' for this route in its docs.

docs/src/components/stack-auth/stack-user-button-demo.tsx (2)

21-23: Handle transient undefined/null user states explicitly (minor).

useUser() may be briefly undefined/null during hydration. Your truthy check works; if you want stricter intent, use user != null.

- {user ? (
+ {user != null ? (

---

116-124: Announce status changes to assistive tech.

Make the live account/mock status screen-reader friendly.

- <div className="text-xs text-fd-muted-foreground">
+ <div className="text-xs text-fd-muted-foreground" role="status" aria-live="polite">

docs/src/components/layouts/home-layout.tsx (2)

143-145: Add an accessible label if the library doesn’t provide one.

If UserButton renders only an avatar without visible text, confirm it includes an internal aria-label (e.g., “Account”). If not, pass a prop or wrap with a labeled button for a11y.

---

196-258: Compact navbar additions look good; minor a11y polish.

• Consider aria-label on the GitHub/Discord icon links (desktop compact view relies on icon-only).
• If the library supports a compact/small variant of UserButton, use it here for visual consistency.

- <Link ... title="GitHub">
+ <Link ... title="GitHub" aria-label="GitHub">
    <Github className="h-4 w-4" />
  </Link>
- <Link ... title="Discord">
+ <Link ... title="Discord" aria-label="Discord">
    <DiscordIcon className="h-4 w-4" />
  </Link>

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.