Keybopard help shortcut amended

src/App/components/Hints/Hints.test.jsx

@@ -23,7 +23,7 @@ const setup = ({ mainEl = document.createElement('div') } = {}) => {
       return () => {}
     })
   }
-  useConfig.mockReturnValue({ id: 'test-map', keyboardHintText: '<kbd>Alt</kbd> + <kbd>K</kbd>' })
+  useConfig.mockReturnValue({ id: 'test-map', keyboardHintText: '<kbd>Shift</kbd> + <kbd>?</kbd>' })
   useService.mockReturnValue({ hints: mockHints })
   useApp.mockReturnValue({ layoutRefs: { mainRef: { current: mainEl } } })
   if (mainEl) document.body.appendChild(mainEl)
@@ -49,7 +49,7 @@ describe('Hints — rendering', () => {
     render(<Hints />)
     const desc = mainEl.querySelector('#test-map-keyboard-desc')
     expect(desc).toBeTruthy()
-    expect(desc.innerHTML).toBe('<kbd>Alt</kbd> + <kbd>K</kbd>')
+    expect(desc.innerHTML).toBe('<kbd>Shift</kbd> + <kbd>?</kbd>')
   })
 
   it('renders no hint content when there is no active hint', () => {

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',

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 ? '<kbd>Option</kbd>' : '<kbd>Alt</kbd>'
 
 export const coreShortcuts = [
   {
     id: 'showKeyboardHelp',
     title: 'Show keyboard help',
-    command: `${altKeyHtml} + <kbd>K</kbd>`,
+    command: '<kbd>Shift</kbd> + <kbd>?</kbd>',
     context: 'global',
     enabled: true
   },

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('<kbd>Option</kbd>')
+    })
+  })
+
+  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('<kbd>Alt</kbd>')
+    })
+  })
+})

src/config/defaults.js

@@ -6,8 +6,6 @@
  *
  * @type {Partial<import('../types.js').InteractiveMapConfig>}
  */
-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: `<span class="im-u-visually-hidden">Press </span>${altKeyHtml} + <kbd>K</kbd> <span class="im-u-visually-hidden">to view </span>keyboard shortcuts`,
+  keyboardHintText: '<span class="im-u-visually-hidden">Press </span><kbd>Shift</kbd> + <kbd>?</kbd> <span class="im-u-visually-hidden">to view </span>keyboard shortcuts',
   mapLabel: 'Interactive map application',
   mapProvider: null,
   mapSize: 'small',