diff --git a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx b/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx index cd7a494419..5113f477d7 100644 --- a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx +++ b/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx @@ -2,6 +2,7 @@ import { WorkspaceAvatar } from '@affine/component/workspace-avatar'; import { CloudWorkspaceIcon, LocalWorkspaceIcon } from '@blocksuite/icons'; import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name'; import type React from 'react'; +import { useCallback } from 'react'; import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace'; import type { AllWorkspace } from '../../../../shared'; @@ -18,6 +19,10 @@ export type WorkspaceSelectorProps = { onClick: () => void; }; +/** + * @todo-Doma Co-locate WorkspaceListModal with {@link WorkspaceSelector}, + * because it's never used elsewhere. + */ export const WorkspaceSelector: React.FC = ({ currentWorkspace, onClick, @@ -26,8 +31,28 @@ export const WorkspaceSelector: React.FC = ({ currentWorkspace?.blockSuiteWorkspace ?? null ); const [workspace] = useCurrentWorkspace(); + + // Open dialog when `Enter` or `Space` pressed + // TODO-Doma Refactor with `@radix-ui/react-dialog` or other libraries that handle these out of the box and be accessible by default + const handleKeyDown = useCallback( + (e: React.KeyboardEvent) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + // TODO-Doma Rename this callback to `onOpenDialog` or something to reduce ambiguity. + onClick(); + } + }, + [onClick] + ); + return ( - + - { - setOpenSubFavorite(!showSubFavorite); - }, [showSubFavorite])} - collapse={showSubFavorite} - > - - {t['Favorites']()} + { + setOpenSubFavorite(!showSubFavorite); + }, [showSubFavorite])} + collapse={showSubFavorite} + > + + (null); + + const handleQuickSearchButtonKeyDown = useCallback( + (e: React.KeyboardEvent) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onOpenQuickSearchModal(); + } + }, + [onOpenQuickSearchModal] + ); return ( <> { onOpenQuickSearchModal(); }, [onOpenQuickSearchModal])} + onKeyDown={handleQuickSearchButtonKeyDown} >