From 86b73ba205aa1be23297140c419bbc585503d602 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Wed, 24 Jun 2026 17:16:40 +0800
Subject: [PATCH] fix: align switch focus outline (#37870)

---
 packages/dify-ui/src/switch/__tests__/index.spec.tsx | 8 ++++++--
 packages/dify-ui/src/switch/index.tsx                | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/dify-ui/src/switch/__tests__/index.spec.tsx b/packages/dify-ui/src/switch/__tests__/index.spec.tsx
index 28aa8a655ce..0e289539581 100644
--- a/packages/dify-ui/src/switch/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/switch/__tests__/index.spec.tsx
@@ -123,9 +123,13 @@ describe('Switch', () => {
     await expect.element(screen.getByRole('switch')).toHaveAttribute('data-checked', '')
   })
 
-  it('should have focus-visible ring-3 styles', async () => {
+  it('should replace the native focus outline with the accent focus ring', async () => {
     const screen = await render(<Switch checked={false} />)
-    await expect.element(screen.getByRole('switch')).toHaveClass('focus-visible:ring-2')
+    await expect.element(screen.getByRole('switch')).toHaveClass(
+      'outline-hidden',
+      'focus-visible:ring-2',
+      'focus-visible:ring-state-accent-solid',
+    )
   })
 
   it('should respect prefers-reduced-motion', async () => {
diff --git a/packages/dify-ui/src/switch/index.tsx b/packages/dify-ui/src/switch/index.tsx
index d35809ecad8..768e009488e 100644
--- a/packages/dify-ui/src/switch/index.tsx
+++ b/packages/dify-ui/src/switch/index.tsx
@@ -10,7 +10,7 @@ import { cn } from '../cn'
 const switchRootStateClassName = 'bg-components-toggle-bg-unchecked hover:bg-components-toggle-bg-unchecked-hover data-checked:bg-components-toggle-bg data-checked:hover:bg-components-toggle-bg-hover data-disabled:cursor-not-allowed data-disabled:bg-components-toggle-bg-unchecked-disabled data-disabled:hover:bg-components-toggle-bg-unchecked-disabled data-disabled:data-checked:bg-components-toggle-bg-disabled data-disabled:data-checked:hover:bg-components-toggle-bg-disabled'
 
 const switchRootVariants = cva(
-  `group relative inline-flex shrink-0 cursor-pointer touch-manipulation items-center transition-colors duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-state-accent-solid motion-reduce:transition-none ${switchRootStateClassName}`,
+  `group relative inline-flex shrink-0 cursor-pointer touch-manipulation items-center outline-hidden transition-colors duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-state-accent-solid motion-reduce:transition-none ${switchRootStateClassName}`,
   {
     variants: {
       size: {