From 0c5b3fd0f2c125ea11ea6c2674614b9aa9f4f196 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Mon, 15 Jun 2026 15:00:52 +0800
Subject: [PATCH] fix: keep segmented control focus ring inset (#37448)

---
 packages/dify-ui/src/segmented-control/__tests__/index.spec.tsx | 2 +-
 packages/dify-ui/src/segmented-control/index.tsx                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dify-ui/src/segmented-control/__tests__/index.spec.tsx b/packages/dify-ui/src/segmented-control/__tests__/index.spec.tsx
index cf01712fb5..46adc5122d 100644
--- a/packages/dify-ui/src/segmented-control/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/segmented-control/__tests__/index.spec.tsx
@@ -25,7 +25,7 @@ describe('SegmentedControl wrappers', () => {
     await expect.element(screen.getByRole('button', { name: 'One' })).toHaveClass(
       'data-pressed:bg-components-segmented-control-item-active-bg',
       'data-pressed:text-text-accent-light-mode-only',
-      'focus-visible:z-10',
+      'focus-visible:ring-inset',
     )
   })
 
diff --git a/packages/dify-ui/src/segmented-control/index.tsx b/packages/dify-ui/src/segmented-control/index.tsx
index ceb3454cc6..ba347b58f1 100644
--- a/packages/dify-ui/src/segmented-control/index.tsx
+++ b/packages/dify-ui/src/segmented-control/index.tsx
@@ -33,7 +33,7 @@ export function SegmentedControlItem<Value extends string = string>({
 }: SegmentedControlItemProps<Value>) {
   return (
     <BaseToggle
-      className={cn('relative flex h-7 min-w-0 touch-manipulation items-center justify-center gap-0.5 overflow-hidden whitespace-nowrap rounded-lg border-[0.5px] border-transparent px-2 py-1 system-sm-medium text-text-secondary transition-colors duration-150 hover:bg-state-base-hover hover:text-text-secondary focus-visible:z-10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid data-pressed:border-components-segmented-control-item-active-border data-pressed:bg-components-segmented-control-item-active-bg data-pressed:text-text-accent-light-mode-only data-pressed:shadow-xs data-pressed:shadow-shadow-shadow-3 data-disabled:cursor-not-allowed data-disabled:bg-transparent data-disabled:text-text-disabled data-disabled:shadow-none data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled motion-reduce:transition-none', className)}
+      className={cn('relative flex h-7 min-w-0 touch-manipulation items-center justify-center gap-0.5 overflow-hidden whitespace-nowrap rounded-lg border-[0.5px] border-transparent px-2 py-1 system-sm-medium text-text-secondary transition-colors duration-150 hover:bg-state-base-hover hover:text-text-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:ring-inset data-pressed:border-components-segmented-control-item-active-border data-pressed:bg-components-segmented-control-item-active-bg data-pressed:text-text-accent-light-mode-only data-pressed:shadow-xs data-pressed:shadow-shadow-shadow-3 data-disabled:cursor-not-allowed data-disabled:bg-transparent data-disabled:text-text-disabled data-disabled:shadow-none data-disabled:hover:bg-transparent data-disabled:hover:text-text-disabled motion-reduce:transition-none', className)}
       {...props}
     />
   )