From a8f009a96566cebdd44e9e64d0ffc922822cc409 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Thu, 4 Jun 2026 22:12:28 +0800
Subject: [PATCH] fix(ui): align form control focus rings (#37069)

---
 .../dify-ui/src/checkbox/__tests__/index.spec.tsx     |  1 +
 packages/dify-ui/src/checkbox/index.tsx               |  2 +-
 packages/dify-ui/src/slider/__tests__/index.spec.tsx  | 11 +++++++++++
 packages/dify-ui/src/slider/index.tsx                 |  2 +-
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/dify-ui/src/checkbox/__tests__/index.spec.tsx b/packages/dify-ui/src/checkbox/__tests__/index.spec.tsx
index 77edc59892..af1843945c 100644
--- a/packages/dify-ui/src/checkbox/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/checkbox/__tests__/index.spec.tsx
@@ -17,6 +17,7 @@ describe('Checkbox', () => {
     await expect.element(checkbox).toHaveAttribute('data-unchecked', '')
     await expect.element(checkbox).not.toHaveAttribute('data-checked')
     await expect.element(checkbox).not.toHaveAttribute('data-indeterminate')
+    await expect.element(checkbox).toHaveClass('focus-visible:ring-2', 'focus-visible:ring-components-input-border-hover')
   })
 
   it('should expose checked data attributes and icon styling hooks', async () => {
diff --git a/packages/dify-ui/src/checkbox/index.tsx b/packages/dify-ui/src/checkbox/index.tsx
index 5e099be500..93774446df 100644
--- a/packages/dify-ui/src/checkbox/index.tsx
+++ b/packages/dify-ui/src/checkbox/index.tsx
@@ -9,7 +9,7 @@ const checkboxRootClassName = cn(
   'inline-flex size-4 shrink-0 touch-manipulation items-center justify-center rounded-sm shadow-xs shadow-shadow-shadow-3 transition-colors motion-reduce:transition-none',
   'border border-components-checkbox-border bg-components-checkbox-bg-unchecked text-components-checkbox-icon',
   'hover:border-components-checkbox-border-hover hover:bg-components-checkbox-bg-unchecked-hover',
-  'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-components-checkbox-bg focus-visible:ring-offset-0',
+  'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-components-input-border-hover focus-visible:ring-offset-0',
   'data-checked:border-transparent data-checked:bg-components-checkbox-bg data-checked:hover:bg-components-checkbox-bg-hover',
   'data-indeterminate:border-transparent data-indeterminate:bg-components-checkbox-bg data-indeterminate:hover:bg-components-checkbox-bg-hover',
   'data-disabled:cursor-not-allowed data-disabled:border-components-checkbox-border-disabled data-disabled:bg-components-checkbox-bg-disabled',
diff --git a/packages/dify-ui/src/slider/__tests__/index.spec.tsx b/packages/dify-ui/src/slider/__tests__/index.spec.tsx
index 7d06c52557..0d46fa15d8 100644
--- a/packages/dify-ui/src/slider/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/slider/__tests__/index.spec.tsx
@@ -80,6 +80,17 @@ describe('Slider', () => {
     expect(screen.container.querySelector('.outer-test')).toBeInTheDocument()
   })
 
+  it('should expose focus-visible ring styles on the thumb wrapper', async () => {
+    const screen = await render(<Slider value={10} onValueChange={vi.fn()} aria-label="Value" />)
+
+    const thumb = screen.getByLabelText('Value').element().parentElement
+
+    expect(thumb).toHaveClass(
+      'has-[:focus-visible]:ring-2',
+      'has-[:focus-visible]:ring-components-input-border-hover',
+    )
+  })
+
   it('should not render prehydration script tags', async () => {
     const screen = await render(<Slider value={10} onValueChange={vi.fn()} aria-label="Value" />)
 
diff --git a/packages/dify-ui/src/slider/index.tsx b/packages/dify-ui/src/slider/index.tsx
index 82702c481e..1730d51861 100644
--- a/packages/dify-ui/src/slider/index.tsx
+++ b/packages/dify-ui/src/slider/index.tsx
@@ -73,7 +73,7 @@ const sliderThumbClassName = cn(
   'border-components-slider-knob-border bg-components-slider-knob shadow-sm',
   'transition-[background-color,border-color,box-shadow,opacity] motion-reduce:transition-none',
   'hover:bg-components-slider-knob-hover',
-  'focus-visible:ring-2 focus-visible:ring-components-slider-knob-border-hover focus-visible:ring-offset-0 focus-visible:outline-hidden',
+  'has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-components-input-border-hover has-[:focus-visible]:ring-offset-0',
   'active:shadow-md',
   'group-data-disabled/slider:border-components-slider-knob-border group-data-disabled/slider:bg-components-slider-knob-disabled group-data-disabled/slider:shadow-none',
 )