opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-06-24 21:11:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: align switch focus outline (#37870)

Browse Source
This commit is contained in:
yyh 2026-06-24 17:16:40 +08:00 committed by GitHub
parent fe62177ba5
commit 86b73ba205
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/dify-ui/src/switch/__tests__/index.spec.tsx
View File

@ -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 () => {

2
packages/dify-ui/src/switch/index.tsx
View File

@ -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: {