From 5df4b5e283eacc7d33e0111d5836465fdd78dedf Mon Sep 17 00:00:00 2001
From: Arjun Mahanti <arjun@squareup.com>
Date: Wed, 9 Sep 2026 09:50:04 -0700
Subject: [PATCH] fix(design-system): preserve navigation link semantics

Signed-off-by: Arjun Mahanti <arjun@squareup.com>
Co-authored-by: Codex <noreply@openai.com>
---
 .../src/features/design-system/catalog/display.tsx    |  7 ++++++-
 .../src/features/design-system/ui/OverviewPage.tsx    |  7 ++++++-
 desktop-next/tests/catalog.spec.ts                    | 11 +++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/desktop-next/src/features/design-system/catalog/display.tsx b/desktop-next/src/features/design-system/catalog/display.tsx
index e1bf2f1cc7..129241d6dc 100644
--- a/desktop-next/src/features/design-system/catalog/display.tsx
+++ b/desktop-next/src/features/design-system/catalog/display.tsx
@@ -30,7 +30,11 @@ export function CardDemo() {
       <p className="text-body text-secondary">
         A quiet container for a focused group of ideas.
       </p>
-      <Button nativeButton={false} render={<Link to="/design/compositions" />}>
+      <Button
+        nativeButton={false}
+        role="link"
+        render={<Link to="/design/compositions" />}
+      >
         Explore compositions
       </Button>
     </Card>
@@ -129,6 +133,7 @@ export function EmptyDemo() {
       action={
         <Button
           nativeButton={false}
+          role="link"
           render={<Link to="/design/compositions" />}
         >
           See an example project
diff --git a/desktop-next/src/features/design-system/ui/OverviewPage.tsx b/desktop-next/src/features/design-system/ui/OverviewPage.tsx
index 52ca004851..d396466ee2 100644
--- a/desktop-next/src/features/design-system/ui/OverviewPage.tsx
+++ b/desktop-next/src/features/design-system/ui/OverviewPage.tsx
@@ -17,11 +17,16 @@ export function OverviewPage() {
         intro="Quiet foundations. Expressive possibilities. A complete web component foundation for Buzz, with Inter, Lucide, and the same semantic roles from the smallest control to an agent’s response."
       />
       <div className="bui-inline mb-12">
-        <Button nativeButton={false} render={<Link to="/design/components" />}>
+        <Button
+          nativeButton={false}
+          role="link"
+          render={<Link to="/design/components" />}
+        >
           Explore {CATALOG.length} examples <ArrowRight aria-hidden="true" />
         </Button>
         <Button
           nativeButton={false}
+          role="link"
           variant="outline"
           render={<Link to="/design/compositions" />}
         >
diff --git a/desktop-next/tests/catalog.spec.ts b/desktop-next/tests/catalog.spec.ts
index 50dc1c70c8..1944e4ec21 100644
--- a/desktop-next/tests/catalog.spec.ts
+++ b/desktop-next/tests/catalog.spec.ts
@@ -280,3 +280,14 @@ test("every foundation page renders its public vocabulary without errors", async
   }
   expect(errors).toEqual([]);
 });
+
+test("styled navigation preserves link semantics and opens the component catalog", async ({
+  page,
+}) => {
+  await page.goto("/design");
+  await page
+    .getByRole("link", { name: "Explore 54 examples", exact: true })
+    .click();
+  await expect(page).toHaveURL("/design/components");
+  await expect(page.locator(".catalog-entry")).toHaveCount(54);
+});