@defra/interactive-map 0.0.35-alpha → 0.0.37-alpha

package/src/App/store/appActionsMap.js

@@ -152,6 +152,13 @@ const toggleHasExclusiveControl = (state, payload) => {
   }
 }
 
+const toggleNudgeStep = (state) => {
+  return {
+    ...state,
+    nudgeStepSize: state.nudgeStepSize === 'small' ? 'large' : 'small'
+  }
+}
+
 const setPluginsEvaluated = (state) =>
   state.arePluginsEvaluated ? state : { ...state, arePluginsEvaluated: true }
 
@@ -385,6 +392,7 @@ export const actionsMap = {
   RESTORE_PREVIOUS_PANELS: restorePreviousPanels,
   TOGGLE_APP_VISIBLE: toggleAppVisible,
   TOGGLE_HAS_EXCLUSIVE_CONTROL: toggleHasExclusiveControl,
+  TOGGLE_NUDGE_STEP: toggleNudgeStep,
   TOGGLE_BUTTON_DISABLED: toggleButtonDisabled,
   TOGGLE_BUTTON_HIDDEN: toggleButtonHidden,
   TOGGLE_BUTTON_PRESSED: toggleButtonPressed,

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

@@ -25,6 +25,7 @@ describe('actionsMap full coverage', () => {
       openPanels: { panel1: { props: {} } },
       previousOpenPanels: {},
       hasExclusiveControl: false,
+      nudgeStepSize: 'small',
       safeZoneInset: { top: 0, bottom: 0 },
       isLayoutReady: false,
       syncMapPadding: true,
@@ -138,6 +139,17 @@ describe('actionsMap full coverage', () => {
     expect(result.hasExclusiveControl).toBe(true)
   })
 
+  test('TOGGLE_NUDGE_STEP flips small to large', () => {
+    const result = actionsMap.TOGGLE_NUDGE_STEP(state)
+    expect(result.nudgeStepSize).toBe('large')
+  })
+
+  test('TOGGLE_NUDGE_STEP flips large to small', () => {
+    const s = { ...state, nudgeStepSize: 'large' }
+    const result = actionsMap.TOGGLE_NUDGE_STEP(s)
+    expect(result.nudgeStepSize).toBe('small')
+  })
+
   test('PLUGINS_EVALUATED is no-op when arePluginsEvaluated already true', () => {
     const s = { ...state, arePluginsEvaluated: true }
     expect(actionsMap.PLUGINS_EVALUATED(s)).toBe(s)

package/src/App/store/appReducer.js

@@ -45,6 +45,7 @@ export const initialState = (config) => {
     pressedButtons: new Set(),
     expandedButtons: new Set(),
     hasExclusiveControl: false,
+    nudgeStepSize: 'large',
     openPanels,
     previousOpenPanels: {},
     listboxIsActive: false,

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

@@ -47,6 +47,7 @@ describe('initialState', () => {
     expect(result.preferredColorScheme).toBe('dark')
     expect(result.mode).toBe('edit')
     expect(result.panelConfig).toEqual({ panel1: {} })
+    expect(result.nudgeStepSize).toBe('large')
   })
 
   test('uses appColorScheme when autoColorScheme is false', () => {

package/src/config/appConfig.js

@@ -1,4 +1,5 @@
 import { KeyboardHelp } from '../App/components/KeyboardHelp/KeyboardHelp.jsx'
+import { MoveControl } from '../App/components/MoveControl/MoveControl.jsx'
 
 const keyboardBasePanelSlots = {
   slot: 'middle',
@@ -12,6 +13,10 @@ const buttonSlots = {
   showLabel: false
 }
 
+const moveControlSlot = {
+  slot: 'right-bottom'
+}
+
 const exitButtonSlots = {
   slot: 'top-left',
   showLabel: false
@@ -72,7 +77,7 @@ export const defaultAppConfig = {
     iconId: 'plus',
     keepFocus: true,
     onClick: (_e, { mapProvider, appConfig }) => mapProvider.zoomIn(appConfig.zoomDelta),
-    excludeWhen: ({ appState, appConfig }) => !appConfig.enableZoomControls || appState.interfaceType === 'touch',
+    excludeWhen: ({ appState, appConfig }) => !appConfig.enableZoomControls || appConfig.enableMoveControl || appState.interfaceType === 'touch',
     enableWhen: ({ mapState }) => !mapState.isAtMaxZoom,
     mobile: buttonSlots,
     tablet: buttonSlots,
@@ -84,11 +89,26 @@ export const defaultAppConfig = {
     iconId: 'minus',
     keepFocus: true,
     onClick: (_e, { mapProvider, appConfig }) => mapProvider.zoomOut(appConfig.zoomDelta),
-    excludeWhen: ({ appState, appConfig }) => !appConfig.enableZoomControls || appState.interfaceType === 'touch',
+    excludeWhen: ({ appState, appConfig }) => !appConfig.enableZoomControls || appConfig.enableMoveControl || appState.interfaceType === 'touch',
     enableWhen: ({ mapState }) => !mapState.isAtMinZoom,
     mobile: buttonSlots,
     tablet: buttonSlots,
     desktop: buttonSlots
+  }, {
+    id: 'moveControl',
+    label: 'Move and zoom controls',
+    iconId: 'move',
+    keepFocus: true,
+    isExpanded: false,
+    ariaControls: ({ appConfig }) => `${appConfig.id}-move-control-content`,
+    onClick: (_e, { appState }) => appState.dispatch({
+      type: 'TOGGLE_BUTTON_EXPANDED',
+      payload: { id: 'moveControl', isExpanded: !appState.expandedButtons.has('moveControl') }
+    }),
+    excludeWhen: ({ appConfig }) => !appConfig.enableMoveControl,
+    mobile: buttonSlots,
+    tablet: buttonSlots,
+    desktop: buttonSlots
   }],
 
   panels: [{
@@ -108,6 +128,16 @@ export const defaultAppConfig = {
     render: (props) => <KeyboardHelp context={props?.context} />
   }],
 
+  controls: [{
+    id: 'moveControl',
+    label: 'Move and zoom',
+    excludeWhen: ({ appConfig }) => !appConfig.enableMoveControl,
+    mobile: moveControlSlot,
+    tablet: moveControlSlot,
+    desktop: moveControlSlot,
+    render: MoveControl
+  }],
+
   icons: [{
     id: 'maximise',
     svgContent: '<path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/>'
@@ -123,6 +153,15 @@ export const defaultAppConfig = {
   }, {
     id: 'chevron',
     svgContent: '<path d="m6 9 6 6 6-6"/>'
+  }, {
+    id: 'move',
+    svgContent: '<path d="M12 2v20"/><path d="m15 19-3 3-3-3"/><path d="m19 9 3 3-3 3"/><path d="M2 12h20"/><path d="m5 9-3 3 3 3"/><path d="m9 5 3-3 3 3"/>'
+  }, {
+    id: 'precision',
+    svgContent: '<circle cx="12" cy="12" r="10"/><line x1="22" x2="18" y1="12" y2="12"/><line x1="6" x2="2" y1="12" y2="12"/><line x1="12" x2="12" y1="6" y2="2"/><line x1="12" x2="12" y1="22" y2="18"/>'
+  }, {
+    id: 'precision-active',
+    svgContent: '<circle cx="12" cy="12" r="10"/><line x1="22" x2="16" y1="12" y2="12"/><line x1="8" x2="2" y1="12" y2="12"/><line x1="12" x2="12" y1="8" y2="2"/><line x1="12" x2="12" y1="22" y2="16"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/>'
   }]
 }
 

package/src/config/appConfig.test.js

@@ -19,6 +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')
 
   // --- UI RENDER TESTS ---
   it('renders KeyboardHelp panel', () => {
@@ -143,15 +144,21 @@ describe('defaultAppConfig', () => {
         appState: { interfaceType: 'mouse' }
       })).toBe(true)
 
-      // Branch B: Second part of OR is true (interfaceType === 'touch')
+      // Branch B: Second part of OR is true (enableMoveControl)
       expect(btn.excludeWhen({
-        appConfig: { enableZoomControls: true },
+        appConfig: { enableZoomControls: true, enableMoveControl: true },
+        appState: { interfaceType: 'mouse' }
+      })).toBe(true)
+
+      // Branch C: Third part of OR is true (interfaceType === 'touch')
+      expect(btn.excludeWhen({
+        appConfig: { enableZoomControls: true, enableMoveControl: false },
         appState: { interfaceType: 'touch' }
       })).toBe(true)
 
-      // Branch C: Both parts are false (Result: false)
+      // Branch D: All parts are false (Result: false)
       expect(btn.excludeWhen({
-        appConfig: { enableZoomControls: true },
+        appConfig: { enableZoomControls: true, enableMoveControl: false },
         appState: { interfaceType: 'mouse' }
       })).toBe(false)
     })
@@ -175,6 +182,40 @@ 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)
+  })
+
+  it('moveControl ariaControls resolves the control element id', () => {
+    expect(moveControlBtn.ariaControls({ appConfig: { id: 'im' } })).toBe('im-move-control-content')
+  })
+
+  it('moveControl onClick toggles TOGGLE_BUTTON_EXPANDED based on current state', () => {
+    const dispatch = jest.fn()
+
+    moveControlBtn.onClick({}, { appState: { dispatch, expandedButtons: new Set() } })
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'TOGGLE_BUTTON_EXPANDED',
+      payload: { id: 'moveControl', isExpanded: true }
+    })
+
+    dispatch.mockClear()
+    moveControlBtn.onClick({}, { appState: { dispatch, expandedButtons: new Set(['moveControl']) } })
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'TOGGLE_BUTTON_EXPANDED',
+      payload: { id: 'moveControl', 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)
+  })
+
   // --- SUPPLEMENTARY CONFIGS ---
   it('exports supplementary configs and constants', () => {
     expect(defaultButtonConfig.label).toBe('Button')

package/src/config/defaults.js

@@ -16,6 +16,7 @@ const defaults = {
   containerHeight: '600px',
   deviceNotSupportedText: 'Your device is not supported. A map is available with a more up-to-date browser or device.',
   enableFullscreen: false,
+  enableMoveControl: true,
   enableZoomControls: true,
   genericErrorText: 'There was a problem loading the map. Please try again later.',
   hasExitButton: false,

package/src/scss/main.scss

@@ -31,6 +31,7 @@
 @use '../App/components/Markers/Markers.module';
 @use '../App/components/Viewport/Features.module';
 @use '../App/components/Actions/Actions.module';
+@use '../App/components/MoveControl/MoveControl.module';
 
 // Components that dont have a corresponding React Component
 @use 'components';

package/src/types.js

@@ -685,8 +685,16 @@
  * @property {boolean} [enableFullscreen=false]
  * Whether a toggle fullscreen button is displayed.
  *
+ * @property {boolean} [enableMoveControl=true]
+ * Whether the move control is displayed — a button that reveals directional pan,
+ * zoom, and step-size buttons, providing a non-dragging alternative to panning
+ * and zooming the map (WCAG 2.5.7). Unlike enableZoomControls, it remains visible
+ * when the interface type is 'touch'. When enabled, enableZoomControls' buttons
+ * are hidden to avoid duplicating zoom controls.
+ *
  * @property {boolean} [enableZoomControls=true]
- * Whether zoom control buttons are displayed.
+ * Whether zoom control buttons are displayed. Not displayed when the interface
+ * type is 'touch', or when enableMoveControl is enabled.
  *
  * @property {[number, number, number, number]} [extent]
  * Initial extent [minX, minY, maxX, maxY]. Equivalent to bounds; use whichever matches your map provider's terminology.

package/src/utils/resolveNudgeStep.js

@@ -0,0 +1,2 @@
+export const resolveStepAmount = (isLargeStep, smallValue, largeValue) =>
+  isLargeStep ? largeValue : smallValue

package/src/utils/resolveNudgeStep.test.js

@@ -0,0 +1,11 @@
+import { resolveStepAmount } from './resolveNudgeStep.js'
+
+describe('resolveStepAmount', () => {
+  it('returns the small value when isLargeStep is false', () => {
+    expect(resolveStepAmount(false, 5, 100)).toBe(5)
+  })
+
+  it('returns the large value when isLargeStep is true', () => {
+    expect(resolveStepAmount(true, 5, 100)).toBe(100)
+  })
+})