@defra/interactive-map 0.0.39-alpha → 0.0.41-alpha

package/src/App/renderer/mapPanels.js

@@ -4,6 +4,10 @@ import { withPluginContexts } from './pluginWrapper.js'
 import { Panel } from '../components/Panel/Panel.jsx'
 import { allowedSlots } from './slots.js'
 import { resolveTargetSlot, isModeAllowed, isConsumerHtml } from './slotHelpers.js'
+import { mapControls } from './mapControls.js'
+import { orderItems } from './orderItems.js'
+import { stringToKebab } from '../../utils/stringToKebab.js'
+import { logger } from '../../services/logger.js'
 
 /**
  * Determines whether a panel should be rendered in the given slot.
@@ -73,13 +77,7 @@ export function mapPanels ({ slot, appState, evaluateProp }) {
     const plugin = pluginRegistry.registeredPlugins.find(p => p.id === config.pluginId)
     const pluginId = plugin?.id
 
-    const WrappedChild = config.render
-      ? withPluginContexts(config.render, {
-        ...props,
-        pluginId,
-        pluginConfig: plugin?.config
-      })
-      : null
+    const html = pluginId ? evaluateProp(config.html, pluginId) : config.html
 
     return {
       id: panelId,
@@ -92,12 +90,49 @@ export function mapPanels ({ slot, appState, evaluateProp }) {
           panelConfig={config}
           props={props}
           focusOnOpen={focusOnOpen}
-          WrappedChild={WrappedChild}
+          items={buildPanelBodyItems({ panelId, config, props, plugin, pluginId, html, appState, evaluateProp })}
           label={evaluateProp(config.label, pluginId)}
-          html={pluginId ? evaluateProp(config.html, pluginId) : config.html}
+          html={html}
         />
       )
     }
   })
     .filter(Boolean)
 }
+
+/**
+ * Builds the ordered list of body items for a panel: its own render content (if any) plus
+ * any controls registered against its `<panelId>-panel` slot by other plugins. Static-html
+ * panels don't build an items list — dangerouslySetInnerHTML can't host injected controls,
+ * so any controls targeting one are silently skipped (with a dev warning).
+ */
+function buildPanelBodyItems ({ panelId, config, props, plugin, pluginId, html, appState, evaluateProp }) {
+  const injectedItems = mapControls({
+    slot: `${stringToKebab(panelId)}-panel`,
+    appState,
+    evaluateProp
+  })
+
+  if (html) {
+    /* istanbul ignore next */
+    if (process.env.NODE_ENV !== 'production' && injectedItems.length > 0) {
+      logger.warn(`Panel "${panelId}" uses static html — controls targeting its slot are not rendered.`)
+    }
+    return undefined
+  }
+
+  if (!config.render) {
+    return injectedItems
+  }
+
+  const WrappedChild = withPluginContexts(config.render, {
+    ...props,
+    pluginId,
+    pluginConfig: plugin?.config
+  })
+
+  return orderItems([
+    { id: panelId, order: 0, element: <WrappedChild {...props} /> },
+    ...injectedItems
+  ])
+}

package/src/App/renderer/mapPanels.test.js

@@ -2,10 +2,14 @@ import React from 'react'
 import { mapPanels } from './mapPanels.js'
 import { registeredPlugins } from '../registry/pluginRegistry.js'
 import { withPluginContexts } from './pluginWrapper.js'
+import { mapControls } from './mapControls.js'
+import { logger } from '../../services/logger.js'
 
+jest.mock('../../services/logger.js')
 jest.mock('../registry/panelRegistry.js')
 jest.mock('../registry/pluginRegistry.js', () => ({ registeredPlugins: [] }))
 jest.mock('./pluginWrapper.js', () => ({ withPluginContexts: jest.fn((c) => c) }))
+jest.mock('./mapControls.js', () => ({ mapControls: jest.fn(() => []) }))
 jest.mock('../components/Panel/Panel.jsx', () => ({ Panel: (props) => <div data-testid='panel' {...props} /> }))
 jest.mock('./slots.js', () => ({ allowedSlots: { panel: ['header', 'modal', 'left-top'] } }))
 
@@ -23,6 +27,7 @@ describe('mapPanels', () => {
 
   beforeEach(() => {
     jest.clearAllMocks()
+    mapControls.mockReturnValue([])
     registeredPlugins.length = 0
     defaultAppState = {
       breakpoint: 'desktop',
@@ -116,9 +121,53 @@ describe('mapPanels', () => {
     )
   })
 
-  it('sets WrappedChild null if no render function', () => {
+  it('builds an empty items list if there is no render function and no injected controls', () => {
     const result = map()
-    expect(result[0].element.props.WrappedChild).toBeNull()
+    expect(result[0].element.props.items).toEqual([])
+  })
+
+  it('builds a single-item items list for a panel with its own render content', () => {
+    const renderFn = () => <div>child</div>
+    defaultAppState.panelConfig = ({ p1: { ...baseConfig, render: renderFn } })
+    const result = map()
+    expect(result[0].element.props.items).toEqual([
+      { id: 'p1', order: 0, element: expect.anything() }
+    ])
+  })
+
+  it('requests injected controls using the <panelId>-panel slot convention', () => {
+    map()
+    expect(mapControls).toHaveBeenCalledWith(expect.objectContaining({ slot: 'p1-panel' }))
+  })
+
+  it('merges and orders the panel\'s own content with controls injected via mapControls', () => {
+    const renderFn = () => <div>child</div>
+    mapControls.mockReturnValue([{ id: 'injected1', order: 1, element: <span>injected</span> }])
+    defaultAppState.panelConfig = ({ p1: { ...baseConfig, render: renderFn } })
+    const result = map()
+    // injected1 has order 1, so it's spliced ahead of the panel's own (unordered) content
+    expect(result[0].element.props.items.map(i => i.id)).toEqual(['injected1', 'p1'])
+  })
+
+  it('returns just the injected controls when the panel has neither render nor html', () => {
+    mapControls.mockReturnValue([{ id: 'injected1', order: 0, element: <span>injected</span> }])
+    defaultAppState.panelConfig = ({ p1: { desktop: { slot: 'header' }, includeModes: ['view'] } })
+    const result = map()
+    expect(result[0].element.props.items.map(i => i.id)).toEqual(['injected1'])
+  })
+
+  it('does not build an items list for a static-html panel (dangerouslySetInnerHTML can\'t host injected controls)', () => {
+    defaultAppState.panelConfig = ({ p1: { desktop: { slot: 'header' }, includeModes: ['view'], pluginId: 'plug1', html: '<p>Hi</p>' } })
+    const result = map()
+    expect(result[0].element.props.items).toBeUndefined()
+    expect(result[0].element.props.html).toBe('<p>Hi</p>')
+  })
+
+  it('warns in dev when controls target a static-html panel', () => {
+    mapControls.mockReturnValue([{ id: 'injected1', order: 0, element: <span>injected</span> }])
+    defaultAppState.panelConfig = ({ p1: { desktop: { slot: 'header' }, includeModes: ['view'], pluginId: 'plug1', html: '<p>Hi</p>' } })
+    map()
+    expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('p1'))
   })
 
   it('returns correct structure and defaults', () => {

package/src/App/renderer/orderItems.js

@@ -0,0 +1,28 @@
+// src/core/renderers/orderItems.js
+
+/**
+ * Orders a list of `{ id, order, element }` items for a single render target
+ * (a layout slot, or a panel body).
+ *
+ * Items without an explicit `order` (or `order === 0`) keep their natural/registration
+ * sequence. Items with an explicit `order` are spliced into that 1-based position among
+ * the unordered items, clamped to the valid range.
+ */
+export function orderItems (items) {
+  // Start with items that have no explicit order (in their natural sequence)
+  const withoutOrder = items.filter(item => item.order == null || item.order === 0)
+  const withOrder = items.filter(item => item.order != null && item.order !== 0)
+
+  // Sort items with order by their order value (stable sort preserves ties)
+  withOrder.sort((a, b) => a.order - b.order)
+
+  // Insert each ordered item at its specified position
+  const result = [...withoutOrder]
+  for (const item of withOrder) {
+    // Clamp position to valid range (1-based, so subtract 1 for array index)
+    const pos = Math.min(Math.max(item.order - 1, 0), result.length)
+    result.splice(pos, 0, item)
+  }
+
+  return result
+}

package/src/App/renderer/orderItems.test.js

@@ -0,0 +1,50 @@
+import { orderItems } from './orderItems.js'
+
+describe('orderItems', () => {
+  it('keeps unordered items in their natural sequence', () => {
+    const items = [{ id: 'a' }, { id: 'b' }, { id: 'c' }]
+    expect(orderItems(items).map(i => i.id)).toEqual(['a', 'b', 'c'])
+  })
+
+  it('treats order 0 the same as no order', () => {
+    const items = [{ id: 'a', order: 0 }, { id: 'b' }]
+    expect(orderItems(items).map(i => i.id)).toEqual(['a', 'b'])
+  })
+
+  it('inserts an ordered item at its 1-based position among unordered items', () => {
+    const items = [{ id: 'a' }, { id: 'b' }, { id: 'c', order: 1 }]
+    expect(orderItems(items).map(i => i.id)).toEqual(['c', 'a', 'b'])
+  })
+
+  it('splices ordered items in ascending order, each relative to the growing result', () => {
+    const items = [
+      { id: 'a' },
+      { id: 'b', order: 2 },
+      { id: 'c', order: 1 }
+    ]
+    // c (order 1) is spliced in first, ahead of 'a': [c, a]
+    // b (order 2) is then spliced at index 1 of that 2-item result: [c, b, a]
+    expect(orderItems(items).map(i => i.id)).toEqual(['c', 'b', 'a'])
+  })
+
+  it('clamps an order larger than the list to the end', () => {
+    const items = [{ id: 'a' }, { id: 'b' }, { id: 'c', order: 99 }]
+    expect(orderItems(items).map(i => i.id)).toEqual(['a', 'b', 'c'])
+  })
+
+  it('splices equal-order items each at position 0, reversing their relative order', () => {
+    // The stable sort keeps a before b, but with no unordered items to anchor against,
+    // each splice(0, 0, item) inserts ahead of the previous one.
+    const items = [{ id: 'a', order: 1 }, { id: 'b', order: 1 }]
+    expect(orderItems(items).map(i => i.id)).toEqual(['b', 'a'])
+  })
+
+  it('handles an all-ordered list', () => {
+    const items = [{ id: 'a', order: 2 }, { id: 'b', order: 1 }]
+    expect(orderItems(items).map(i => i.id)).toEqual(['b', 'a'])
+  })
+
+  it('handles an empty list', () => {
+    expect(orderItems([])).toEqual([])
+  })
+})

package/src/App/renderer/slotAggregator.js

@@ -2,28 +2,12 @@
 import { mapControls } from './mapControls.js'
 import { mapPanels } from './mapPanels.js'
 import { mapButtons } from './mapButtons.js'
+import { orderItems } from './orderItems.js'
 
 export function getSlotItems ({ evaluateProp, ...args }) {
   const controls = mapControls({ evaluateProp, ...args })
   const panels = mapPanels({ evaluateProp, ...args })
   const buttons = mapButtons({ evaluateProp, ...args })
 
-  const items = [...controls, ...panels, ...buttons]
-
-  // Start with items that have no explicit order (in their natural sequence)
-  const withoutOrder = items.filter(item => item.order == null || item.order === 0)
-  const withOrder = items.filter(item => item.order != null && item.order !== 0)
-
-  // Sort items with order by their order value (stable sort preserves ties)
-  withOrder.sort((a, b) => a.order - b.order)
-
-  // Insert each ordered item at its specified position
-  const result = [...withoutOrder]
-  for (const item of withOrder) {
-    // Clamp position to valid range (1-based, so subtract 1 for array index)
-    const pos = Math.min(Math.max(item.order - 1, 0), result.length)
-    result.splice(pos, 0, item)
-  }
-
-  return result
+  return orderItems([...controls, ...panels, ...buttons])
 }

package/src/App/renderer/slotHelpers.js

@@ -39,7 +39,9 @@ export const isControlVisible = (control, { breakpoint, mode, isFullscreen }) =>
   if (!bpConfig) {
     return false
   }
-  if (!allowedSlots.control.includes(bpConfig.slot)) {
+  // A control may also target a panel's body directly via the `<panelId>-panel`
+  // slot convention (mirrors the `<buttonId>-button` convention panels already use).
+  if (!allowedSlots.control.includes(bpConfig.slot) && !bpConfig.slot?.endsWith('-panel')) {
     return false
   }
   if (!isModeAllowed(control, mode)) {

package/src/App/renderer/slotHelpers.test.js

@@ -65,6 +65,11 @@ describe('isControlVisible', () => {
   it('returns true when inline:false and fullscreen', () => {
     expect(isControlVisible({ ...base, inline: false }, { breakpoint: 'desktop', mode: 'view', isFullscreen: true })).toBe(true)
   })
+
+  it('returns true for a control targeting a panel-body slot via the <panelId>-panel convention', () => {
+    const panelTargeting = { desktop: { slot: 'map-styles-panel' } }
+    expect(isControlVisible(panelTargeting, { breakpoint: 'desktop', mode: 'view', isFullscreen: false })).toBe(true)
+  })
 })
 
 describe('isConsumerHtml', () => {

package/src/App/renderer/slots.js

@@ -1,6 +1,7 @@
 // src/core/renderers/slots.js
 export const layoutSlots = Object.freeze({
   SIDE: 'side',
+  HEADER: 'header',
   BANNER: 'banner',
   TOP_LEFT: 'top-left',
   TOP_MIDDLE: 'top-middle',
@@ -19,6 +20,7 @@ export const layoutSlots = Object.freeze({
 
 export const allowedSlots = Object.freeze({
   control: [
+    layoutSlots.HEADER,
     layoutSlots.BANNER,
     layoutSlots.TOP_LEFT,
     layoutSlots.TOP_RIGHT,
@@ -31,6 +33,7 @@ export const allowedSlots = Object.freeze({
   ],
   panel: [
     layoutSlots.SIDE,
+    layoutSlots.HEADER,
     layoutSlots.BANNER,
     layoutSlots.LEFT_TOP,
     layoutSlots.LEFT_BOTTOM,

package/src/App/store/AppProvider.jsx

@@ -10,12 +10,13 @@ import { useMediaQueryDispatch } from '../hooks/useMediaQueryDispatch.js'
 export const AppContext = createContext(null)
 
 export const AppProvider = ({ options, children }) => {
-  const { pluginRegistry, buttonRegistry, panelRegistry, controlRegistry, eventBus, breakpointDetector } = options
+  const { pluginRegistry, buttonRegistry, panelRegistry, controlRegistry, keyboardShortcutRegistry, eventBus, breakpointDetector } = options
 
   const layoutRefs = {
     appContainerRef: useRef(null),
     sideRef: useRef(null),
     mainRef: useRef(null),
+    headerRef: useRef(null),
     topRef: useRef(null),
     topLeftColRef: useRef(null),
     topRightColRef: useRef(null),
@@ -94,7 +95,8 @@ export const AppProvider = ({ options, children }) => {
     pluginRegistry,
     buttonRegistry,
     panelRegistry,
-    controlRegistry
+    controlRegistry,
+    keyboardShortcutRegistry
   }), [state, dispatch])
 
   return (

package/src/App/store/appDispatchMiddleware.js

@@ -101,7 +101,7 @@ export function handleActionSideEffects (action, previousState, panelConfig, eve
     const mergedConfig = deepMerge(defaultControlConfig, config)
     BREAKPOINTS.forEach(bp => {
       const slot = mergedConfig[bp]?.slot
-      if (slot && !allowedSlots.control.includes(slot)) {
+      if (slot && !allowedSlots.control.includes(slot) && !slot.endsWith('-panel')) {
         logger.warn(`control "${id}" has invalid slot "${slot}" at breakpoint "${bp}". Allowed slots: ${allowedSlots.control.join(', ')}.`)
       }
     })

package/src/App/store/appDispatchMiddleware.test.js

@@ -185,6 +185,14 @@ describe('ADD_CONTROL', () => {
     )
     expect(console.warn).not.toHaveBeenCalled()
   })
+
+  it('does not warn for a control targeting a panel-body slot', () => {
+    run(
+      { type: 'ADD_CONTROL', payload: { id: 'myCtrl', config: { desktop: { slot: 'map-styles-panel' } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).not.toHaveBeenCalled()
+  })
 })
 
 describe('ADD_PANEL', () => {

package/src/InteractiveMap/InteractiveMap.js

@@ -111,13 +111,16 @@ export default class InteractiveMap {
         history.pushState({ isBack: true }, '', e.currentTarget.getAttribute('href'))
       }
       this.showApp()
+      // App is already mounted, so focus the viewport directly rather than via a mount effect.
+      this.rootEl.querySelector('[role="application"]')?.focus()
     } else if (this._root) {
       // app already open — no-op, no push
     } else {
       if (this.config.manageHistoryState) {
         history.pushState({ isBack: true }, '', e.currentTarget.getAttribute('href'))
       }
-      this.loadApp()
+      // Only a genuine launcher click moves focus into the map — never a resize/breakpoint transition.
+      this.loadApp({ focusOnMount: true })
     }
   }
 
@@ -175,9 +178,11 @@ export default class InteractiveMap {
    * Load and initialize the map application.
    *
    * @internal Not intended for end-user use.
+   * @param {Object} [options]
+   * @param {boolean} [options.focusOnMount=false] - Focus the viewport once mounted; only set by a genuine launcher click.
    * @returns {Promise<void>}
    */
-  async loadApp () {
+  async loadApp ({ focusOnMount = false } = {}) {
     if (this._root || this._isLoading) {
       return
     }
@@ -204,6 +209,7 @@ export default class InteractiveMap {
         id: this.id,
         initialBreakpoint: this._breakpointDetector.getBreakpoint(),
         initialInterfaceType: getInterfaceType(),
+        focusOnMount,
         ...this.config,
         MapProvider,
         mapProviderConfig,

package/src/InteractiveMap/InteractiveMap.test.js

@@ -185,6 +185,18 @@ describe('InteractiveMap — loadApp', () => {
     expect(typeof map.someMethod).toBe('function')
     expect(map.eventBus.emit).toHaveBeenCalledWith('app:opened', { statePreserved: false, isFullscreen: false })
   })
+
+  it('defaults focusOnMount to false when not passed', async () => {
+    const map = new InteractiveMap('map', { behaviour: 'buttonFirst', mapProvider: mapProviderMock })
+    await map.loadApp()
+    expect(initialiseApp).toHaveBeenCalledWith(rootEl, expect.objectContaining({ focusOnMount: false }))
+  })
+
+  it('passes focusOnMount through to initialiseApp when set', async () => {
+    const map = new InteractiveMap('map', { behaviour: 'buttonFirst', mapProvider: mapProviderMock })
+    await map.loadApp({ focusOnMount: true })
+    expect(initialiseApp).toHaveBeenCalledWith(rootEl, expect.objectContaining({ focusOnMount: true }))
+  })
 })
 
 // --- _handleButtonClick ---
@@ -193,25 +205,30 @@ describe('InteractiveMap — _handleButtonClick', () => {
   beforeEach(setupBeforeEach)
   afterEach(() => jest.restoreAllMocks())
 
-  it('pushState and loadApp on first open', async () => {
+  it('pushState and loadApp (with focusOnMount) on first open', async () => {
     const map = new InteractiveMap('map', { behaviour: 'buttonFirst', manageHistoryState: true, mapProvider: mapProviderMock })
     jest.spyOn(map, 'loadApp').mockResolvedValue()
     jest.spyOn(history, 'pushState').mockImplementation(() => {})
     await openButtonCallback({ currentTarget: { getAttribute: jest.fn().mockReturnValue('/?mv=map') } })
-    expect(map.loadApp).toHaveBeenCalled()
+    expect(map.loadApp).toHaveBeenCalledWith({ focusOnMount: true })
     expect(history.pushState).toHaveBeenCalledWith({ isBack: true }, '', '/?mv=map')
   })
 
-  it('calls showApp (not loadApp) when map is hidden', async () => {
+  it('calls showApp (not loadApp) and focuses the viewport when map is hidden', async () => {
     const map = new InteractiveMap('map', { behaviour: 'buttonFirst', manageHistoryState: true, mapProvider: mapProviderMock })
     map._isHidden = true
     jest.spyOn(map, 'showApp').mockImplementation(() => {})
     jest.spyOn(map, 'loadApp').mockResolvedValue()
     jest.spyOn(history, 'pushState').mockImplementation(() => {})
+    const viewport = document.createElement('div')
+    viewport.setAttribute('role', 'application')
+    viewport.setAttribute('tabindex', '0')
+    rootEl.appendChild(viewport)
     await openButtonCallback({ currentTarget: { getAttribute: jest.fn().mockReturnValue('/?mv=map') } })
     expect(map.showApp).toHaveBeenCalled()
     expect(map.loadApp).not.toHaveBeenCalled()
     expect(history.pushState).toHaveBeenCalled()
+    expect(viewport).toHaveFocus()
   })
 
   it('skips pushState when manageHistoryState is false', async () => {

package/src/config/appConfig.js

@@ -1,5 +1,5 @@
 import { KeyboardHelp } from '../App/components/KeyboardHelp/KeyboardHelp.jsx'
-import { MoveControl } from '../App/components/MoveControl/MoveControl.jsx'
+import { MoveControls } from '../App/components/MoveControls/MoveControls.jsx'
 
 const keyboardBasePanelSlots = {
   slot: 'middle',
@@ -13,13 +13,15 @@ const buttonSlots = {
   showLabel: false
 }
 
-const moveControlSlot = {
+const moveControlsSlot = {
   slot: 'right-bottom'
 }
 
 const exitButtonSlots = {
   slot: 'top-left',
-  showLabel: false
+  showLabel: false,
+  // Explicit order so exit always sorts first in its slot.
+  order: 1
 }
 
 const journeyBackSlots = { slot: 'actions', showLabel: true }
@@ -77,7 +79,7 @@ export const defaultAppConfig = {
     iconId: 'plus',
     keepFocus: true,
     onClick: (_e, { mapProvider, appConfig }) => mapProvider.zoomIn(appConfig.zoomDelta),
-    excludeWhen: ({ appState, appConfig }) => !appConfig.enableZoomControls || appConfig.enableMoveControl || appState.interfaceType === 'touch',
+    excludeWhen: ({ appState, appConfig }) => !appConfig.enableZoomControls || appConfig.enableMoveControls || appState.interfaceType === 'touch',
     enableWhen: ({ mapState }) => !mapState.isAtMaxZoom,
     mobile: buttonSlots,
     tablet: buttonSlots,
@@ -89,23 +91,23 @@ export const defaultAppConfig = {
     iconId: 'minus',
     keepFocus: true,
     onClick: (_e, { mapProvider, appConfig }) => mapProvider.zoomOut(appConfig.zoomDelta),
-    excludeWhen: ({ appState, appConfig }) => !appConfig.enableZoomControls || appConfig.enableMoveControl || appState.interfaceType === 'touch',
+    excludeWhen: ({ appState, appConfig }) => !appConfig.enableZoomControls || appConfig.enableMoveControls || appState.interfaceType === 'touch',
     enableWhen: ({ mapState }) => !mapState.isAtMinZoom,
     mobile: buttonSlots,
     tablet: buttonSlots,
     desktop: buttonSlots
   }, {
-    id: 'moveControl',
+    id: 'moveControls',
     label: 'Move and zoom controls',
     iconId: 'move',
     keepFocus: true,
     isExpanded: false,
-    ariaControls: ({ appConfig }) => `${appConfig.id}-move-control-content`,
+    ariaControls: ({ appConfig }) => `${appConfig.id}-move-controls-content`,
     onClick: (_e, { appState }) => appState.dispatch({
       type: 'TOGGLE_BUTTON_EXPANDED',
-      payload: { id: 'moveControl', isExpanded: !appState.expandedButtons.has('moveControl') }
+      payload: { id: 'moveControls', isExpanded: !appState.expandedButtons.has('moveControls') }
     }),
-    excludeWhen: ({ appConfig }) => !appConfig.enableMoveControl,
+    excludeWhen: ({ appConfig }) => !appConfig.enableMoveControls,
     mobile: buttonSlots,
     tablet: buttonSlots,
     desktop: buttonSlots
@@ -129,13 +131,13 @@ export const defaultAppConfig = {
   }],
 
   controls: [{
-    id: 'moveControl',
+    id: 'moveControls',
     label: 'Move and zoom',
-    excludeWhen: ({ appConfig }) => !appConfig.enableMoveControl,
-    mobile: moveControlSlot,
-    tablet: moveControlSlot,
-    desktop: moveControlSlot,
-    render: MoveControl
+    excludeWhen: ({ appConfig }) => !appConfig.enableMoveControls,
+    mobile: moveControlsSlot,
+    tablet: moveControlsSlot,
+    desktop: moveControlsSlot,
+    render: MoveControls
   }],
 
   icons: [{

package/src/config/appConfig.test.js

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react'
 import { defaultAppConfig, defaultButtonConfig, scaleFactor } from './appConfig'
 
 jest.mock('../App/store/appContext.js', () => ({
-  useApp: () => ({ listboxIsActive: false })
+  useApp: () => ({ listboxIsActive: false, keyboardShortcutRegistry: { getKeyboardShortcuts: () => [] } })
 }))
 
 describe('defaultAppConfig', () => {
@@ -19,7 +19,7 @@ describe('defaultAppConfig', () => {
   const journeyContinueBtn = buttons.find(b => b.id === 'journeyContinue')
   const zoomInBtn = buttons.find(b => b.id === 'zoomIn')
   const zoomOutBtn = buttons.find(b => b.id === 'zoomOut')
-  const moveControlBtn = buttons.find(b => b.id === 'moveControl')
+  const moveControlsBtn = buttons.find(b => b.id === 'moveControls')
 
   // --- UI RENDER TESTS ---
   it('renders KeyboardHelp panel', () => {
@@ -144,21 +144,21 @@ describe('defaultAppConfig', () => {
         appState: { interfaceType: 'mouse' }
       })).toBe(true)
 
-      // Branch B: Second part of OR is true (enableMoveControl)
+      // Branch B: Second part of OR is true (enableMoveControls)
       expect(btn.excludeWhen({
-        appConfig: { enableZoomControls: true, enableMoveControl: true },
+        appConfig: { enableZoomControls: true, enableMoveControls: true },
         appState: { interfaceType: 'mouse' }
       })).toBe(true)
 
       // Branch C: Third part of OR is true (interfaceType === 'touch')
       expect(btn.excludeWhen({
-        appConfig: { enableZoomControls: true, enableMoveControl: false },
+        appConfig: { enableZoomControls: true, enableMoveControls: false },
         appState: { interfaceType: 'touch' }
       })).toBe(true)
 
       // Branch D: All parts are false (Result: false)
       expect(btn.excludeWhen({
-        appConfig: { enableZoomControls: true, enableMoveControl: false },
+        appConfig: { enableZoomControls: true, enableMoveControls: false },
         appState: { interfaceType: 'mouse' }
       })).toBe(false)
     })
@@ -182,38 +182,38 @@ describe('defaultAppConfig', () => {
     expect(mapProviderMock.zoomOut).toHaveBeenCalledWith(2)
   })
 
-  // --- MOVE CONTROL TOGGLE BUTTON ---
-  it('covers all branches of moveControl excludeWhen', () => {
-    expect(moveControlBtn.excludeWhen({ appConfig: { enableMoveControl: false } })).toBe(true)
-    expect(moveControlBtn.excludeWhen({ appConfig: { enableMoveControl: true } })).toBe(false)
+  // --- MOVE CONTROLS TOGGLE BUTTON ---
+  it('covers all branches of moveControls excludeWhen', () => {
+    expect(moveControlsBtn.excludeWhen({ appConfig: { enableMoveControls: false } })).toBe(true)
+    expect(moveControlsBtn.excludeWhen({ appConfig: { enableMoveControls: true } })).toBe(false)
   })
 
-  it('moveControl ariaControls resolves the control element id', () => {
-    expect(moveControlBtn.ariaControls({ appConfig: { id: 'im' } })).toBe('im-move-control-content')
+  it('moveControls ariaControls resolves the control element id', () => {
+    expect(moveControlsBtn.ariaControls({ appConfig: { id: 'im' } })).toBe('im-move-controls-content')
   })
 
-  it('moveControl onClick toggles TOGGLE_BUTTON_EXPANDED based on current state', () => {
+  it('moveControls onClick toggles TOGGLE_BUTTON_EXPANDED based on current state', () => {
     const dispatch = jest.fn()
 
-    moveControlBtn.onClick({}, { appState: { dispatch, expandedButtons: new Set() } })
+    moveControlsBtn.onClick({}, { appState: { dispatch, expandedButtons: new Set() } })
     expect(dispatch).toHaveBeenCalledWith({
       type: 'TOGGLE_BUTTON_EXPANDED',
-      payload: { id: 'moveControl', isExpanded: true }
+      payload: { id: 'moveControls', isExpanded: true }
     })
 
     dispatch.mockClear()
-    moveControlBtn.onClick({}, { appState: { dispatch, expandedButtons: new Set(['moveControl']) } })
+    moveControlsBtn.onClick({}, { appState: { dispatch, expandedButtons: new Set(['moveControls']) } })
     expect(dispatch).toHaveBeenCalledWith({
       type: 'TOGGLE_BUTTON_EXPANDED',
-      payload: { id: 'moveControl', isExpanded: false }
+      payload: { id: 'moveControls', isExpanded: false }
     })
   })
 
-  // --- MOVE CONTROL ---
-  it('covers all branches of moveControl control excludeWhen', () => {
-    const control = defaultAppConfig.controls.find(c => c.id === 'moveControl')
-    expect(control.excludeWhen({ appConfig: { enableMoveControl: false } })).toBe(true)
-    expect(control.excludeWhen({ appConfig: { enableMoveControl: true } })).toBe(false)
+  // --- MOVE CONTROLS ---
+  it('covers all branches of moveControls control excludeWhen', () => {
+    const control = defaultAppConfig.controls.find(c => c.id === 'moveControls')
+    expect(control.excludeWhen({ appConfig: { enableMoveControls: false } })).toBe(true)
+    expect(control.excludeWhen({ appConfig: { enableMoveControls: true } })).toBe(false)
   })
 
   // --- SUPPLEMENTARY CONFIGS ---