From 484360f15930814db0f5c5384dc99c8eaeb64134 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Thu, 25 Jun 2026 12:07:31 -0400
Subject: [PATCH 1/2] fix(ui): Ensure tab focus ring is visible for keyboard
 interactions

---
 packages/ui/src/elements/Tabs.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/elements/Tabs.tsx b/packages/ui/src/elements/Tabs.tsx
index 805c1035ef4..97b221ea5c6 100644
--- a/packages/ui/src/elements/Tabs.tsx
+++ b/packages/ui/src/elements/Tabs.tsx
@@ -3,7 +3,7 @@ import type { PropsWithChildren } from 'react';
 import React from 'react';
 
 import { Button, descriptors, Flex, useLocalizations } from '../customizables';
-import type { PropsOfComponent } from '../styledSystem';
+import { common, type PropsOfComponent } from '../styledSystem';
 import { getValidChildren } from '../utils/getValidReactChildren';
 
 type TabsContextValue = {
@@ -173,6 +173,9 @@ export const Tab = (props: TabProps) => {
           padding: `${t.space.$2x5} ${t.space.$0x25}`,
           width: 'fit-content',
           '&:hover, &:focus-visible': { backgroundColor: t.colors.$transparent, boxShadow: 'none' },
+          '&:focus-visible': {
+            ...common.focusRing(t),
+          },
         }),
         sx,
       ]}

From 939d5b06e16a1362284eb0e4f7d8c0e314aea39c Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Thu, 25 Jun 2026 12:15:25 -0400
Subject: [PATCH 2/2] chore(ui): Add changeset for tab focus ring fix

---
 .changeset/ui-tab-focus-ring.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/ui-tab-focus-ring.md

diff --git a/.changeset/ui-tab-focus-ring.md b/.changeset/ui-tab-focus-ring.md
new file mode 100644
index 00000000000..ed01a1c0774
--- /dev/null
+++ b/.changeset/ui-tab-focus-ring.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix focus ring visibility on `Tab` elements for keyboard navigation.