From f590d9248ea4f47a4ee9457535958ccb1f2d0fcf Mon Sep 17 00:00:00 2001 From: Dan Leech Date: Mon, 1 Jun 2026 11:36:46 +0100 Subject: [PATCH] Keybopard help shortcut amended --- src/App/components/Hints/Hints.test.jsx | 4 ++-- src/App/controls/keyboardMappings.js | 3 +-- src/App/controls/keyboardShortcuts.js | 5 +++-- src/App/controls/keyboardShortcuts.test.js | 24 ++++++++++++++++++++++ src/config/defaults.js | 4 +--- src/utils/platform.js | 14 ------------- src/utils/platform.test.js | 19 ----------------- 7 files changed, 31 insertions(+), 42 deletions(-) create mode 100644 src/App/controls/keyboardShortcuts.test.js delete mode 100644 src/utils/platform.js delete mode 100644 src/utils/platform.test.js diff --git a/src/App/components/Hints/Hints.test.jsx b/src/App/components/Hints/Hints.test.jsx index bb8f4d12..a0cb0f55 100644 --- a/src/App/components/Hints/Hints.test.jsx +++ b/src/App/components/Hints/Hints.test.jsx @@ -23,7 +23,7 @@ const setup = ({ mainEl = document.createElement('div') } = {}) => { return () => {} }) } - useConfig.mockReturnValue({ id: 'test-map', keyboardHintText: 'Alt + K' }) + useConfig.mockReturnValue({ id: 'test-map', keyboardHintText: 'Shift + ?' }) useService.mockReturnValue({ hints: mockHints }) useApp.mockReturnValue({ layoutRefs: { mainRef: { current: mainEl } } }) if (mainEl) document.body.appendChild(mainEl) @@ -49,7 +49,7 @@ describe('Hints — rendering', () => { render() const desc = mainEl.querySelector('#test-map-keyboard-desc') expect(desc).toBeTruthy() - expect(desc.innerHTML).toBe('Alt + K') + expect(desc.innerHTML).toBe('Shift + ?') }) it('renders no hint content when there is no active hint', () => { diff --git a/src/App/controls/keyboardMappings.js b/src/App/controls/keyboardMappings.js index 990687a9..7532e3c5 100755 --- a/src/App/controls/keyboardMappings.js +++ b/src/App/controls/keyboardMappings.js @@ -11,8 +11,7 @@ export const keyboardMappings = { }, keyup: { - 'Alt+k': 'showKeyboardControls', - 'Alt+K': 'showKeyboardControls', + '?': 'showKeyboardControls', 'Alt+ArrowRight': 'highlightNextLabel', 'Alt+ArrowLeft': 'highlightNextLabel', 'Alt+ArrowUp': 'highlightNextLabel', diff --git a/src/App/controls/keyboardShortcuts.js b/src/App/controls/keyboardShortcuts.js index f18ea059..e939913e 100755 --- a/src/App/controls/keyboardShortcuts.js +++ b/src/App/controls/keyboardShortcuts.js @@ -1,11 +1,12 @@ // src/controls/keyboardShortcuts.js -import { altKeyHtml } from '../../utils/platform.js' +const isMac = /mac/i.test(navigator.userAgentData?.platform ?? navigator.platform) +const altKeyHtml = isMac ? 'Option' : 'Alt' export const coreShortcuts = [ { id: 'showKeyboardHelp', title: 'Show keyboard help', - command: `${altKeyHtml} + K`, + command: 'Shift + ?', context: 'global', enabled: true }, diff --git a/src/App/controls/keyboardShortcuts.test.js b/src/App/controls/keyboardShortcuts.test.js new file mode 100644 index 00000000..6e4506cc --- /dev/null +++ b/src/App/controls/keyboardShortcuts.test.js @@ -0,0 +1,24 @@ +describe('keyboardShortcuts', () => { + beforeEach(() => jest.resetModules()) + + const load = () => require('./keyboardShortcuts.js').coreShortcuts + + const altShortcuts = (shortcuts) => + shortcuts.filter(s => s.command?.includes('Alt') || s.command?.includes('Option')) + + it('uses Option key label on Mac', () => { + Object.defineProperty(navigator, 'platform', { value: 'MacIntel', configurable: true }) + const shortcuts = load() + altShortcuts(shortcuts).forEach(s => { + expect(s.command).toContain('Option') + }) + }) + + it('uses Alt key label on non-Mac', () => { + Object.defineProperty(navigator, 'platform', { value: 'Win32', configurable: true }) + const shortcuts = load() + altShortcuts(shortcuts).forEach(s => { + expect(s.command).toContain('Alt') + }) + }) +}) diff --git a/src/config/defaults.js b/src/config/defaults.js index b4a82198..78e6b943 100755 --- a/src/config/defaults.js +++ b/src/config/defaults.js @@ -6,8 +6,6 @@ * * @type {Partial} */ -import { altKeyHtml } from '../utils/platform.js' - const defaults = { appColorScheme: 'light', autoColorScheme: false, @@ -22,7 +20,7 @@ const defaults = { genericErrorText: 'There was a problem loading the map. Please try again later.', hasExitButton: false, hybridWidth: null, // Defaults to maxMobileWidth if not set - keyboardHintText: `Press ${altKeyHtml} + K to view keyboard shortcuts`, + keyboardHintText: 'Press Shift + ? to view keyboard shortcuts', mapLabel: 'Interactive map application', mapProvider: null, mapSize: 'small', diff --git a/src/utils/platform.js b/src/utils/platform.js deleted file mode 100644 index 36b12620..00000000 --- a/src/utils/platform.js +++ /dev/null @@ -1,14 +0,0 @@ -/** True when running on macOS. */ -const isMac = /mac/i.test(navigator.userAgentData?.platform ?? navigator.platform) - -/** - * An HTML string for the modifier key that activates Alt-based shortcuts. - * Renders as `Option` on Mac and `Alt` elsewhere. - * @type {string} - */ -const altKeyHtml = isMac ? 'Option' : 'Alt' - -export { - isMac, - altKeyHtml -} diff --git a/src/utils/platform.test.js b/src/utils/platform.test.js deleted file mode 100644 index ba8de161..00000000 --- a/src/utils/platform.test.js +++ /dev/null @@ -1,19 +0,0 @@ -describe('platform', () => { - beforeEach(() => jest.resetModules()) - - const load = () => require('./platform.js') - - it('detects Mac and returns Option key html', () => { - Object.defineProperty(navigator, 'platform', { value: 'MacIntel', configurable: true }) - const { isMac, altKeyHtml } = load() - expect(isMac).toBe(true) - expect(altKeyHtml).toBe('Option') - }) - - it('detects non-Mac and returns Alt key html', () => { - Object.defineProperty(navigator, 'platform', { value: 'Win32', configurable: true }) - const { isMac, altKeyHtml } = load() - expect(isMac).toBe(false) - expect(altKeyHtml).toBe('Alt') - }) -})