From 29f2f77bc0b7f2f96ff48b03b9945e962265f28b Mon Sep 17 00:00:00 2001
From: dhgoal <153369624+dhgoal@users.noreply.github.com>
Date: Sun, 12 Jul 2026 04:30:28 +0900
Subject: [PATCH] feat(ui): add focus-visible ring styling to ProfileTabs and
 EndpointKindTabs buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both tab strips built their button className via classNames(...) with no
focus-visible/outline classes, so keyboard-focused tabs fell back to the raw
default browser outline — the two outliers versus the rest of the app, which
applies the existing .mg-focus-ring utility (styles.css, used by mg-metric-tile,
hero-subnet-chips, ...). Wire that same utility onto both tab buttons so a
keyboard-focused tab shows the design-system ring and no ring on mouse click
(:focus-visible). No new CSS, no markup restructuring, no change to
hover/active/selected styling.

Closes #3451
---
 apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx | 2 +-
 apps/ui/src/components/metagraphed/profile-tabs.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx b/apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx
index 2ab6ebf58..706c33fd1 100644
--- a/apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx
+++ b/apps/ui/src/components/metagraphed/endpoint-kind-tabs.tsx
@@ -29,7 +29,7 @@ export function EndpointKindTabs({ value, counts, onChange }: Props) {
             aria-selected={active}
             onClick={() => onChange(k)}
             className={classNames(
-              "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 font-mono text-[10px] uppercase tracking-widest transition-colors",
+              "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 font-mono text-[10px] uppercase tracking-widest transition-colors mg-focus-ring",
               active
                 ? "border-accent/60 bg-accent/15 text-ink-strong"
                 : "border-border bg-card text-ink-muted hover:text-ink-strong hover:border-ink/30",
diff --git a/apps/ui/src/components/metagraphed/profile-tabs.tsx b/apps/ui/src/components/metagraphed/profile-tabs.tsx
index 9a4ae77d7..e8ae32ab4 100644
--- a/apps/ui/src/components/metagraphed/profile-tabs.tsx
+++ b/apps/ui/src/components/metagraphed/profile-tabs.tsx
@@ -38,7 +38,7 @@ export function ProfileTabs({ tabs, defaultTab }: { tabs: ProfileTabSpec[]; defa
                   })
                 }
                 className={classNames(
-                  "relative inline-flex items-center gap-1.5 py-3 text-[13px] font-medium whitespace-nowrap transition-colors",
+                  "relative inline-flex items-center gap-1.5 py-3 text-[13px] font-medium whitespace-nowrap transition-colors mg-focus-ring",
                   isActive
                     ? "text-ink-strong after:absolute after:left-0 after:right-0 after:-bottom-px after:h-[2px] after:bg-ink-strong after:content-['']"
                     : "text-ink-muted hover:text-ink-strong",