From f8d381e6c58e23f5dcfeb74444957abbb227dbca Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Mon, 10 Aug 2026 10:33:11 +0800
Subject: [PATCH] fix(web): name chat settings triggers (#40341)

---
 .../inputs-form/__tests__/view-form-dropdown.spec.tsx  | 10 ++++++----
 .../inputs-form/view-form-dropdown.tsx                 |  3 ++-
 .../inputs-form/__tests__/view-form-dropdown.spec.tsx  |  5 ++++-
 .../inputs-form/view-form-dropdown.tsx                 |  7 +++++--
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/__tests__/view-form-dropdown.spec.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/__tests__/view-form-dropdown.spec.tsx
index 47bfd16513b..b2626c32bf5 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/__tests__/view-form-dropdown.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/__tests__/view-form-dropdown.spec.tsx
@@ -66,17 +66,19 @@ describe('ViewFormDropdown', () => {
     // Initially, settings icon should be hidden (portal content)
     expect(screen.queryByText('share.chat.chatSettingsTitle')).not.toBeInTheDocument()
 
-    // Find trigger (ActionButton renders a button)
-    const trigger = screen.getByRole('button')
+    const trigger = screen.getByRole('button', { name: 'share.chat.viewChatSettings' })
     expect(trigger).toBeInTheDocument()
+    expect(trigger).toHaveAttribute('aria-expanded', 'false')
 
     // Open dropdown
     await user.click(trigger)
+    expect(trigger).toHaveAttribute('aria-expanded', 'true')
     expect(screen.getByText('share.chat.chatSettingsTitle')).toBeInTheDocument()
     expect(screen.getByText('Test Label')).toBeInTheDocument()
 
     // Close dropdown
     await user.click(trigger)
+    expect(trigger).toHaveAttribute('aria-expanded', 'false')
     expect(screen.queryByText('share.chat.chatSettingsTitle')).not.toBeInTheDocument()
   })
 
@@ -90,7 +92,7 @@ describe('ViewFormDropdown', () => {
 
     const user = userEvent.setup()
     render(<ViewFormDropdown />)
-    await user.click(screen.getByRole('button'))
+    await user.click(screen.getByRole('button', { name: 'share.chat.viewChatSettings' }))
 
     expect(screen.getByText('Text Form')).toBeInTheDocument()
     expect(screen.getByText('Num Form')).toBeInTheDocument()
@@ -99,7 +101,7 @@ describe('ViewFormDropdown', () => {
   it('applies correct state to ActionButton when open', async () => {
     const user = userEvent.setup()
     render(<ViewFormDropdown />)
-    const trigger = screen.getByRole('button')
+    const trigger = screen.getByRole('button', { name: 'share.chat.viewChatSettings' })
 
     // closed state
     expect(trigger).not.toHaveClass('action-btn-hover')
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx
index 3763be293d4..e20a076a827 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/view-form-dropdown.tsx
@@ -13,10 +13,11 @@ const ViewFormDropdown = () => {
         render={(props, state) => (
           <ActionButton
             {...props}
+            aria-label={t(($) => $['chat.viewChatSettings'], { ns: 'share' })}
             size="l"
             state={state.open ? ActionButtonState.Hover : ActionButtonState.Default}
           >
-            <RiChatSettingsLine className="h-4.5 w-4.5" />
+            <RiChatSettingsLine aria-hidden="true" className="h-4.5 w-4.5" />
           </ActionButton>
         )}
       />
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/view-form-dropdown.spec.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/view-form-dropdown.spec.tsx
index 78858d37a54..ba170d31d66 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/view-form-dropdown.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/view-form-dropdown.spec.tsx
@@ -11,13 +11,16 @@ describe('ViewFormDropdown', () => {
     const user = userEvent.setup()
     render(<ViewFormDropdown />)
 
-    const trigger = screen.getByTestId('view-form-dropdown-trigger')
+    const trigger = screen.getByRole('button', { name: 'share.chat.viewChatSettings' })
+    expect(trigger).toHaveAttribute('aria-expanded', 'false')
     expect(screen.queryByText('Form content')).not.toBeInTheDocument()
 
     await user.click(trigger)
+    expect(trigger).toHaveAttribute('aria-expanded', 'true')
     expect(screen.getByText('Form content')).toBeInTheDocument()
 
     await user.click(trigger)
+    expect(trigger).toHaveAttribute('aria-expanded', 'false')
     expect(screen.queryByText('Form content')).not.toBeInTheDocument()
   })
 })
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
index cf43eacd3bf..7fabf170577 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
@@ -17,11 +17,14 @@ const ViewFormDropdown = ({ iconColor }: Props) => {
         render={(props, state) => (
           <ActionButton
             {...props}
+            aria-label={t(($) => $['chat.viewChatSettings'], { ns: 'share' })}
             size="l"
             state={state.open ? ActionButtonState.Hover : ActionButtonState.Default}
-            data-testid="view-form-dropdown-trigger"
           >
-            <div className={cn('i-ri-chat-settings-line h-4.5 w-4.5 shrink-0', iconColor)} />
+            <span
+              aria-hidden
+              className={cn('i-ri-chat-settings-line h-4.5 w-4.5 shrink-0', iconColor)}
+            />
           </ActionButton>
         )}
       />