From 514fddb60c8475c99e23b0d084d2fac339085a3d Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:14:29 +0800
Subject: [PATCH] fix(ui): align infotip popover focus styles (#37377)

---
 packages/dify-ui/src/popover/__tests__/index.spec.tsx | 5 +++++
 packages/dify-ui/src/popover/index.tsx                | 1 +
 web/app/components/base/infotip/index.tsx             | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/dify-ui/src/popover/__tests__/index.spec.tsx b/packages/dify-ui/src/popover/__tests__/index.spec.tsx
index ba368c9ad37..64b3d76122b 100644
--- a/packages/dify-ui/src/popover/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/popover/__tests__/index.spec.tsx
@@ -29,6 +29,11 @@ describe('PopoverContent', () => {
       await expect.element(screen.getByRole('group', { name: 'default positioner' })).toHaveAttribute('data-side', 'bottom')
       await expect.element(screen.getByRole('group', { name: 'default positioner' })).toHaveAttribute('data-align', 'center')
       await expect.element(screen.getByRole('dialog', { name: 'default popover' })).toHaveTextContent('Default content')
+      await expect.element(screen.getByRole('dialog', { name: 'default popover' })).toHaveClass(
+        'outline-hidden',
+        'focus:outline-hidden',
+        'focus-visible:outline-hidden',
+      )
     })
 
     it('should apply parsed custom placement and custom offsets when placement props are provided', async () => {
diff --git a/packages/dify-ui/src/popover/index.tsx b/packages/dify-ui/src/popover/index.tsx
index c29c50d1fe1..aad0bde3d4a 100644
--- a/packages/dify-ui/src/popover/index.tsx
+++ b/packages/dify-ui/src/popover/index.tsx
@@ -57,6 +57,7 @@ export function PopoverContent({
         <BasePopover.Popup
           className={cn(
             'rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg',
+            'outline-hidden focus:outline-hidden focus-visible:outline-hidden',
             'origin-(--transform-origin) transition-[transform,scale,opacity] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',
             popupClassName,
           )}
diff --git a/web/app/components/base/infotip/index.tsx b/web/app/components/base/infotip/index.tsx
index fd8382446ba..fbe9398d61b 100644
--- a/web/app/components/base/infotip/index.tsx
+++ b/web/app/components/base/infotip/index.tsx
@@ -71,7 +71,7 @@ export function Infotip({
         aria-label={ariaLabel}
         onClick={handleClick}
         className={cn(
-          'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
+          'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 focus-visible:ring-2 focus-visible:ring-state-accent-solid focus-visible:outline-hidden',
           className,
         )}
       >