diff --git a/src/renderer/src/components/sidebar/SidebarSettingsHelpMenu.test.tsx b/src/renderer/src/components/sidebar/SidebarSettingsHelpMenu.test.tsx index 97218602f..d63a15553 100644 --- a/src/renderer/src/components/sidebar/SidebarSettingsHelpMenu.test.tsx +++ b/src/renderer/src/components/sidebar/SidebarSettingsHelpMenu.test.tsx @@ -10,7 +10,7 @@ const mocks = vi.hoisted(() => ({ appRestart: vi.fn(), updaterCheck: vi.fn(), shellOpenUrl: vi.fn(), - useShortcutLabel: vi.fn(), + useShortcutKeys: vi.fn(), setupProgress: { ready: true, coreDoneCount: 2, @@ -32,7 +32,7 @@ vi.mock('@/store', () => ({ })) vi.mock('@/hooks/useShortcutLabel', () => ({ - useShortcutLabel: mocks.useShortcutLabel + useShortcutKeys: mocks.useShortcutKeys })) vi.mock('@/hooks/useMountedRef', () => ({ @@ -72,12 +72,14 @@ vi.mock('@/components/ui/tooltip', () => ({ vi.mock('@/components/ui/button', () => ({ Button: ({ children, - onClick + onClick, + 'aria-label': ariaLabel }: { children: ReactNode onClick?: (event: React.MouseEvent) => void + 'aria-label'?: string }) => ( - ) @@ -97,7 +99,7 @@ vi.mock('./SidebarFeedbackDialog', () => ({ describe('SidebarSettingsHelpMenu', () => { beforeEach(() => { vi.clearAllMocks() - mocks.useShortcutLabel.mockReturnValue('⌘,') + mocks.useShortcutKeys.mockReturnValue(['⌘', ',']) updateStatus = { state: 'idle' } mocks.setupProgress = { ready: true, @@ -112,9 +114,17 @@ describe('SidebarSettingsHelpMenu', () => { expect(html).toContain('Help') }) - it('renders Settings menu item', () => { + it('renders the settings button with correct aria-label', () => { const html = renderToStaticMarkup() - expect(html).toContain('Settings') + expect(html).toContain('aria-label="Settings"') + }) + + it('renders the settings button before the help button', () => { + const html = renderToStaticMarkup() + const settingsIndex = html.indexOf('lucide-settings') + const helpIndex = html.indexOf('lucide-circle-question-mark') + expect(settingsIndex).toBeGreaterThanOrEqual(0) + expect(helpIndex).toBeGreaterThan(settingsIndex) }) it('renders Send Feedback menu item', () => { @@ -179,8 +189,9 @@ describe('SidebarSettingsHelpMenu', () => { expect(html).toContain('Check for Updates') }) - it('renders shortcut label next to Settings', () => { + it('renders shortcut keys in the settings tooltip', () => { const html = renderToStaticMarkup() - expect(html).toContain('⌘,') + expect(html).toContain('⌘') + expect(html).toContain('>,') }) }) diff --git a/src/renderer/src/components/sidebar/SidebarSettingsHelpMenu.tsx b/src/renderer/src/components/sidebar/SidebarSettingsHelpMenu.tsx index a56c8ba70..0da82554d 100644 --- a/src/renderer/src/components/sidebar/SidebarSettingsHelpMenu.tsx +++ b/src/renderer/src/components/sidebar/SidebarSettingsHelpMenu.tsx @@ -26,7 +26,8 @@ import { DropdownMenuTrigger } from '@/components/ui/dropdown-menu' import { useMountedRef } from '@/hooks/useMountedRef' -import { useShortcutLabel } from '@/hooks/useShortcutLabel' +import { useShortcutKeys } from '@/hooks/useShortcutLabel' +import { ShortcutKeyCombo } from '@/components/ShortcutKeyCombo' import { showOnboardingFromRenderer } from '../onboarding/show-onboarding-event' import { SetupGuideProgressRing } from '../setup-guide/SetupGuideProgressRing' import { useSetupGuideProgress } from '../setup-guide/use-setup-guide-progress' @@ -84,7 +85,7 @@ export function SidebarSettingsHelpMenu(): React.JSX.Element { const updateStatus = useAppStore((s) => s.updateStatus) const setupProgress = useSetupGuideProgress(true, false, false) - const settingsShortcut = useShortcutLabel('app.settings') + const settingsShortcutKeys = useShortcutKeys('app.settings') const [menuOpen, setMenuOpen] = useState(false) const [feedbackOpen, setFeedbackOpen] = useState(false) const [showAdminOptions, setShowAdminOptions] = useState(false) @@ -157,145 +158,173 @@ export function SidebarSettingsHelpMenu(): React.JSX.Element { return ( <> - +
- - - + - - {translate('auto.components.sidebar.SidebarSettingsHelpMenu.2991a0106c', 'Help')} + + {translate('auto.components.sidebar.SidebarSettingsHelpMenu.a428c25998', 'Settings')} + {settingsShortcutKeys.length > 0 ? ( + + ) : null} - - - - {translate('auto.components.sidebar.SidebarSettingsHelpMenu.a428c25998', 'Settings')} - {settingsShortcut} - - - - {translate( - 'auto.components.sidebar.SidebarSettingsHelpMenu.e565171a7c', - 'Keyboard Shortcuts' - )} - - - setFeedbackOpen(true)}> - - {translate( - 'auto.components.sidebar.SidebarSettingsHelpMenu.4cf5b868d7', - 'Send Feedback' - )} - - {showMilestones ? ( - - + + + + + + + + + {translate('auto.components.sidebar.SidebarSettingsHelpMenu.2991a0106c', 'Help')} + + + + + {translate( - 'auto.components.sidebar.SidebarSettingsHelpMenu.f8a2c91d4e', - 'Milestones' - )} - - - ) : null} - {showAdminOptions ? ( - - - {translate( - 'auto.components.sidebar.SidebarSettingsHelpMenu.b7e4d2a19c', - 'Onboarding' + 'auto.components.sidebar.SidebarSettingsHelpMenu.e565171a7c', + 'Keyboard Shortcuts' )} - ) : null} - } - /> - } - /> - - } - /> - openExternalUrl(DISCORD_URL)}> - - {translate('auto.components.sidebar.SidebarSettingsHelpMenu.eb9884e55b', 'Discord')} - - - openExternalUrl(X_URL)}> - - {translate('auto.components.sidebar.SidebarSettingsHelpMenu.c4f8e1b72a', 'X')} - - - - - {updateStatus.state === 'checking' ? ( - - ) : ( - - )} - {translate( - 'auto.components.sidebar.SidebarSettingsHelpMenu.29c56f30ee', - 'Check for Updates' - )} - - {showAdminOptions ? ( - <> - - - + + setFeedbackOpen(true)}> + + {translate( + 'auto.components.sidebar.SidebarSettingsHelpMenu.4cf5b868d7', + 'Send Feedback' + )} + + {showMilestones ? ( + + {translate( - 'auto.components.sidebar.SidebarSettingsHelpMenu.ad3d3ed7f1', - 'Restart Orca' + 'auto.components.sidebar.SidebarSettingsHelpMenu.f8a2c91d4e', + 'Milestones' + )} + + + ) : null} + {showAdminOptions ? ( + + + {translate( + 'auto.components.sidebar.SidebarSettingsHelpMenu.b7e4d2a19c', + 'Onboarding' )} - - ) : null} - - + ) : null} + } + /> + } + /> + + } + /> + openExternalUrl(DISCORD_URL)}> + + {translate('auto.components.sidebar.SidebarSettingsHelpMenu.eb9884e55b', 'Discord')} + + + openExternalUrl(X_URL)}> + + {translate('auto.components.sidebar.SidebarSettingsHelpMenu.c4f8e1b72a', 'X')} + + + + + {updateStatus.state === 'checking' ? ( + + ) : ( + + )} + {translate( + 'auto.components.sidebar.SidebarSettingsHelpMenu.29c56f30ee', + 'Check for Updates' + )} + + {showAdminOptions ? ( + <> + + + + {translate( + 'auto.components.sidebar.SidebarSettingsHelpMenu.ad3d3ed7f1', + 'Restart Orca' + )} + + + ) : null} + + +
)