From 89ce9a5db2c24164ee70daf89d89038eb0a45cab Mon Sep 17 00:00:00 2001
From: NFish <douxc512@gmail.com>
Date: Fri, 27 Dec 2024 18:10:36 +0800
Subject: [PATCH] Fix: avatar dropdown keyboard navigation (#12155)

---
 .../header/account-dropdown/index.tsx         | 92 +++++++++++--------
 .../workplace-selector/index.tsx              | 20 ++--
 .../components/workflow/operator/index.tsx    |  4 +-
 3 files changed, 69 insertions(+), 47 deletions(-)

diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index a30ab175ac..e92b16fd67 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -59,23 +59,21 @@ export default function AppSelector({ isMobile }: IAppSelector) {
         {
           ({ open }) => (
             <>
-              <div>
-                <Menu.Button
-                  className={`
+              <Menu.Button
+                className={`
                     inline-flex items-center
                     rounded-[20px] py-1 pr-2.5 pl-1 text-sm
                   text-gray-700 hover:bg-gray-200
                     mobile:px-1
                     ${open && 'bg-gray-200'}
                   `}
-                >
-                  <Avatar name={userProfile.name} className='sm:mr-2 mr-0' size={32} />
-                  {!isMobile && <>
-                    {userProfile.name}
-                    <RiArrowDownSLine className="w-3 h-3 ml-1 text-gray-700" />
-                  </>}
-                </Menu.Button>
-              </div>
+              >
+                <Avatar name={userProfile.name} className='sm:mr-2 mr-0' size={32} />
+                {!isMobile && <>
+                  {userProfile.name}
+                  <RiArrowDownSLine className="w-3 h-3 ml-1 text-gray-700" />
+                </>}
+              </Menu.Button>
               <Transition
                 as={Fragment}
                 enter="transition ease-out duration-100"
@@ -89,10 +87,10 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                   className="
                     absolute right-0 mt-1.5 w-60 max-w-80
                     divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
-                    shadow-lg
+                    shadow-lg focus:outline-none
                   "
                 >
-                  <Menu.Item>
+                  <Menu.Item disabled>
                     <div className='flex flex-nowrap items-center px-4 py-[13px]'>
                       <Avatar name={userProfile.name} size={36} className='mr-3' />
                       <div className='grow'>
@@ -107,89 +105,107 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                   </div>
                   <div className="px-1 py-1">
                     <Menu.Item>
-                      <Link
-                        className={classNames(itemClassName, 'group justify-between')}
+                      {({ active }) => <Link
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
                         href='/account'
                         target='_self' rel='noopener noreferrer'>
                         <div>{t('common.account.account')}</div>
                         <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>
+                      </Link>}
                     </Menu.Item>
                     <Menu.Item>
-                      <div className={itemClassName} onClick={() => setShowAccountSettingModal({ payload: 'members' })}>
+                      {({ active }) => <div className={classNames(itemClassName,
+                        active && 'bg-state-base-hover',
+                      )} onClick={() => setShowAccountSettingModal({ payload: 'members' })}>
                         <div>{t('common.userProfile.settings')}</div>
-                      </div>
+                      </div>}
                     </Menu.Item>
                     {canEmailSupport && <Menu.Item>
-                      <a
-                        className={classNames(itemClassName, 'group justify-between')}
+                      {({ active }) => <a
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
                         href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
                         target='_blank' rel='noopener noreferrer'>
                         <div>{t('common.userProfile.emailSupport')}</div>
                         <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </a>
+                      </a>}
                     </Menu.Item>}
                     <Menu.Item>
-                      <Link
-                        className={classNames(itemClassName, 'group justify-between')}
+                      {({ active }) => <Link
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
                         href='https://github.com/langgenius/dify/discussions/categories/feedbacks'
                         target='_blank' rel='noopener noreferrer'>
                         <div>{t('common.userProfile.communityFeedback')}</div>
                         <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>
+                      </Link>}
                     </Menu.Item>
                     <Menu.Item>
-                      <Link
-                        className={classNames(itemClassName, 'group justify-between')}
+                      {({ active }) => <Link
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
                         href='https://discord.gg/5AEfbxcd9k'
                         target='_blank' rel='noopener noreferrer'>
                         <div>{t('common.userProfile.community')}</div>
                         <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>
+                      </Link>}
                     </Menu.Item>
                     <Menu.Item>
-                      <Link
-                        className={classNames(itemClassName, 'group justify-between')}
+                      {({ active }) => <Link
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
                         href={
                           locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/`
                         }
                         target='_blank' rel='noopener noreferrer'>
                         <div>{t('common.userProfile.helpCenter')}</div>
                         <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>
+                      </Link>}
                     </Menu.Item>
                     <Menu.Item>
-                      <Link
-                        className={classNames(itemClassName, 'group justify-between')}
+                      {({ active }) => <Link
+                        className={classNames(itemClassName, 'group justify-between',
+                          active && 'bg-state-base-hover',
+                        )}
                         href='https://roadmap.dify.ai'
                         target='_blank' rel='noopener noreferrer'>
                         <div>{t('common.userProfile.roadmap')}</div>
                         <ArrowUpRight className='hidden w-[14px] h-[14px] text-text-tertiary group-hover:flex' />
-                      </Link>
+                      </Link>}
                     </Menu.Item>
                     {
                       document?.body?.getAttribute('data-public-site-about') !== 'hide' && (
                         <Menu.Item>
-                          <div className={classNames(itemClassName, 'justify-between')} onClick={() => setAboutVisible(true)}>
+                          {({ active }) => <div className={classNames(itemClassName, 'justify-between',
+                            active && 'bg-state-base-hover',
+                          )} onClick={() => setAboutVisible(true)}>
                             <div>{t('common.userProfile.about')}</div>
                             <div className='flex items-center'>
                               <div className='mr-2 system-xs-regular text-text-tertiary'>{langeniusVersionInfo.current_version}</div>
                               <Indicator color={langeniusVersionInfo.current_version === langeniusVersionInfo.latest_version ? 'green' : 'orange'} />
                             </div>
-                          </div>
+                          </div>}
                         </Menu.Item>
                       )
                     }
                   </div>
                   <Menu.Item>
-                    <div className='p-1' onClick={() => handleLogout()}>
+                    {({ active }) => <div className='p-1' onClick={() => handleLogout()}>
                       <div
-                        className='flex items-center justify-between h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover'
+                        className={
+                          classNames('flex items-center justify-between h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover',
+                            active && 'bg-state-base-hover')}
                       >
                         <div className='system-md-regular text-text-secondary'>{t('common.userProfile.logout')}</div>
                         <RiLogoutBoxRLine className='hidden w-4 h-4 text-text-tertiary group-hover:flex' />
                       </div>
-                    </div>
+                    </div>}
                   </Menu.Item>
                 </Menu.Items>
               </Transition>
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index 801f0b3d52..bcc72a7bb3 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -9,6 +9,7 @@ import { useWorkspacesContext } from '@/context/workspace-context'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { ToastContext } from '@/app/components/base/toast'
+import classNames from '@/utils/classnames'
 
 const itemClassName = `
   flex items-center px-3 py-2 h-10 cursor-pointer
@@ -50,7 +51,7 @@ const WorkplaceSelector = () => {
             <Menu.Button className={cn(
               `
                 ${itemClassName} w-full
-                group hover:bg-gray-50 cursor-pointer ${open && 'bg-gray-50'} rounded-lg
+                group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-lg
               `,
             )}>
               <div className={itemIconClassName}>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
@@ -70,7 +71,7 @@ const WorkplaceSelector = () => {
                 className={cn(
                   `
                     absolute top-[1px] min-w-[200px] max-h-[70vh] overflow-y-scroll z-10 bg-white border-[0.5px] border-gray-200
-                    divide-y divide-gray-100 origin-top-right rounded-xl
+                    divide-y divide-gray-100 origin-top-right rounded-xl focus:outline-none
                   `,
                   s.popup,
                 )}
@@ -78,11 +79,16 @@ const WorkplaceSelector = () => {
                 <div className="px-1 py-1">
                   {
                     workspaces.map(workspace => (
-                      <div className={itemClassName} key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
-                        <div className={itemIconClassName}>{workspace.name[0].toLocaleUpperCase()}</div>
-                        <div className={itemNameClassName}>{workspace.name}</div>
-                        {workspace.current && <Check className={itemCheckClassName} />}
-                      </div>
+                      <Menu.Item key={workspace.id}>
+                        {({ active }) => <div className={classNames(itemClassName,
+                          active && 'bg-state-base-hover',
+                        )} key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
+                          <div className={itemIconClassName}>{workspace.name[0].toLocaleUpperCase()}</div>
+                          <div className={itemNameClassName}>{workspace.name}</div>
+                          {workspace.current && <Check className={itemCheckClassName} />}
+                        </div>}
+
+                      </Menu.Item>
                     ))
                   }
                 </div>
diff --git a/web/app/components/workflow/operator/index.tsx b/web/app/components/workflow/operator/index.tsx
index 80c2bb5306..1ee5fef337 100644
--- a/web/app/components/workflow/operator/index.tsx
+++ b/web/app/components/workflow/operator/index.tsx
@@ -17,9 +17,9 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
           width: 102,
           height: 72,
         }}
-        maskColor='var(--color-shadow-shadow-5)'
+        maskColor='var(--color-workflow-minimap-bg)'
         className='!absolute !left-4 !bottom-14 z-[9] !m-0 !w-[102px] !h-[72px] !border-[0.5px] !border-divider-subtle
-        !rounded-lg !shadow-md !shadow-shadow-shadow-5 !bg-workflow-minimap-bg'
+        !rounded-lg !shadow-md !shadow-shadow-shadow-5 !bg-background-default-subtle'
       />
       <div className='flex items-center mt-1 gap-2 absolute left-4 bottom-4 z-[9]'>
         <ZoomInOut />