fix: keep account dropdown open when switching theme (#32918)

web/app/components/base/theme-switcher.tsx

@@ -13,44 +13,50 @@ export default function ThemeSwitcher() {
 
   return (
     <div className="flex items-center rounded-[10px] bg-components-segmented-control-bg-normal p-0.5">
-      <div
+      <button
+        type="button"
         className={cn(
           'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
           theme === 'system' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
         )}
         onClick={() => handleThemeChange('system')}
+        aria-label="System theme"
         data-testid="system-theme-container"
       >
         <div className="p-0.5">
           <span className="i-ri-computer-line h-4 w-4" />
         </div>
-      </div>
+      </button>
       <div className={cn('h-[14px] w-px bg-transparent', theme === 'dark' && 'bg-divider-regular')} data-testid="divider"></div>
-      <div
+      <button
+        type="button"
         className={cn(
           'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
           theme === 'light' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
         )}
         onClick={() => handleThemeChange('light')}
+        aria-label="Light theme"
         data-testid="light-theme-container"
       >
         <div className="p-0.5">
           <span className="i-ri-sun-line h-4 w-4" />
         </div>
-      </div>
+      </button>
       <div className={cn('h-[14px] w-px bg-transparent', theme === 'system' && 'bg-divider-regular')} data-testid="divider"></div>
-      <div
+      <button
+        type="button"
         className={cn(
           'rounded-lg px-2 py-1 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
           theme === 'dark' && 'bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-sm hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
         )}
         onClick={() => handleThemeChange('dark')}
+        aria-label="Dark theme"
         data-testid="dark-theme-container"
       >
         <div className="p-0.5">
           <span className="i-ri-moon-line h-4 w-4" />
         </div>
-      </div>
+      </button>
     </div>
   )
 }

web/app/components/header/account-dropdown/index.spec.tsx

@@ -29,6 +29,10 @@ vi.mock('@/app/components/header/github-star', () => ({
   default: () => <div data-testid="github-star">GithubStar</div>,
 }))
 
+vi.mock('@/app/components/base/theme-switcher', () => ({
+  default: () => <button type="button" data-testid="theme-switcher-button">Theme switcher</button>,
+}))
+
 vi.mock('@/context/app-context', () => ({
   useAppContext: vi.fn(),
 }))
@@ -276,6 +280,16 @@ describe('AccountDropdown', () => {
       // Assert
       expect(screen.queryByTestId('account-about')).not.toBeInTheDocument()
     })
+
+    it('should keep account dropdown open when clicking the theme switcher', () => {
+      // Act
+      renderWithRouter(<AppSelector />)
+      fireEvent.click(screen.getByRole('button', { name: 'common.account.account' }))
+      fireEvent.click(screen.getByTestId('theme-switcher-button'))
+
+      // Assert
+      expect(screen.getByText('common.userProfile.logout')).toBeInTheDocument()
+    })
   })
 
   describe('Branding and Environment', () => {

web/app/components/header/account-dropdown/index.tsx

@@ -228,8 +228,8 @@ export default function AppSelector() {
           )}
           <AccountMenuSection>
             <DropdownMenuItem
+              closeOnClick={false}
               className="cursor-default data-[highlighted]:bg-transparent"
-              onSelect={e => e.preventDefault()}
             >
               <MenuItemContent
                 iconClassName="i-ri-t-shirt-2-line"