From 3d7896ca438199ee0a1e4a24a23733b7fd6d3dbb Mon Sep 17 00:00:00 2001
From: Andrey Goder <andy.goder@gmail.com>
Date: Wed, 5 Aug 2026 15:50:50 -0700
Subject: [PATCH] Remove the href from disabled TopNav items (#408)

A disabled TopNavItem still rendered a live href, so middle-click and "Open link in new tab" bypassed the React click guard and navigated to the disabled destination.

Null the href (plus target/rel) when disabled, matching Link and SideNavItem. The anchor still renders, with aria-disabled and tabIndex -1 as before.

Claude-Session: https://claude.ai/code/session_01XFkkvUQfynGRedEYDNxKoY
---
 src/components/TopNav/TopNav.test.tsx | 19 +++++++++++++++++++
 src/components/TopNav/TopNavItem.tsx  |  6 +++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/TopNav/TopNav.test.tsx b/src/components/TopNav/TopNav.test.tsx
index 311aa86d..ff3e2a40 100644
--- a/src/components/TopNav/TopNav.test.tsx
+++ b/src/components/TopNav/TopNav.test.tsx
@@ -183,6 +183,25 @@ describe('TopNavItem', () => {
     expect(link).toHaveAttribute('tabindex', '-1');
   });
 
+  it('drops the href, target, and rel of a disabled item', () => {
+    render(
+      <TopNav label="Nav">
+        <TopNavItem
+          href="/admin"
+          isDisabled
+          label="Admin"
+          rel="nofollow"
+          target="_blank"
+        />
+      </TopNav>,
+    );
+
+    const link = screen.getByRole('link', {name: /Admin/});
+    expect(link).not.toHaveAttribute('href');
+    expect(link).not.toHaveAttribute('target');
+    expect(link).not.toHaveAttribute('rel');
+  });
+
   it('prevents navigation when disabled', () => {
     render(
       <TopNav label="Nav">
diff --git a/src/components/TopNav/TopNavItem.tsx b/src/components/TopNav/TopNavItem.tsx
index 73e9dfb2..8feecb8f 100644
--- a/src/components/TopNav/TopNavItem.tsx
+++ b/src/components/TopNav/TopNavItem.tsx
@@ -150,15 +150,15 @@ export function TopNavItem({
       as={as}
       className={className_}
       data-testid={dataTestId}
-      href={href}
+      href={isDisabled ? undefined : href}
       isDisabled={href == null ? isDisabled : undefined}
       isLink={href != null}
       onClick={handleClick}
       ref={ref}
-      rel={href != null ? linkRel : undefined}
+      rel={href != null && !isDisabled ? linkRel : undefined}
       style={style}
       tabIndex={href != null && isDisabled ? -1 : undefined}
-      target={href != null ? target : undefined}>
+      target={href != null && !isDisabled ? target : undefined}>
       {content}
       {opensInNewTab && !isIconOnly ? (
         <>