From f7f9dab7d0a1004e9d3bf4e7026ab260be08e6ac Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Thu, 23 Jul 2026 23:43:24 -0700
Subject: [PATCH] fix(ui): make the suggested MCP network range keyboard
 operable

The suggested CIDR chip was a click-only span both before and after the shadcn
migration, so keyboard users could not reach or activate it. Render it as a
Button, which brings focus and Enter/Space activation with it, and cover the
keyboard path with a test that fails against the old span.
---
 .../_components/MCPNetworkSettings.test.tsx        | 14 ++++++++++++++
 .../mcp-servers/_components/MCPNetworkSettings.tsx |  7 ++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.test.tsx
index 358968df039..9526f5de074 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.test.tsx
@@ -58,6 +58,20 @@ describe("MCPNetworkSettings", () => {
     expect(screen.getByText("203.0.113.0/24")).toBeInTheDocument();
   });
 
+  it("exposes the suggested range as a control a keyboard user can reach and activate", async () => {
+    vi.mocked(fetchMCPClientIp).mockResolvedValue("203.0.113.45");
+
+    renderSettings();
+    const suggested = await screen.findByRole("button", { name: /203\.0\.113\.0\/24/ });
+
+    suggested.focus();
+    expect(suggested).toHaveFocus();
+
+    await userEvent.keyboard("{Enter}");
+
+    await waitFor(() => expect(screen.queryByText("Suggested range:")).not.toBeInTheDocument());
+  });
+
   it("adds the suggested range to the list when clicked, and stops suggesting it", async () => {
     vi.mocked(fetchMCPClientIp).mockResolvedValue("203.0.113.45");
 
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx
index 9226bb36a11..8b4d2a58652 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPNetworkSettings.tsx
@@ -127,14 +127,15 @@ const MCPNetworkSettings: React.FC<MCPNetworkSettingsProps> = ({ accessToken })
             {suggestedRange && !privateRanges.includes(suggestedRange) && (
               <div className="mt-1 flex items-center gap-2">
                 <p className="text-sm">Suggested range: </p>
-                <Badge
+                <Button
                   variant="outline"
-                  className="cursor-pointer font-mono"
+                  size="sm"
+                  className="font-mono"
                   onClick={() => addSuggestedRange(suggestedRange)}
                 >
                   <Plus />
                   {suggestedRange}
-                </Badge>
+                </Button>
               </div>
             )}
           </div>