@defra/interactive-map 0.0.22-alpha → 0.0.24-alpha

package/src/App/components/Viewport/Viewport.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, cleanup } from '@testing-library/react'
+import { render, cleanup, fireEvent } from '@testing-library/react'
 import { Viewport } from './Viewport.jsx'
 import { useConfig } from '../../store/configContext.js'
 import { useApp } from '../../store/appContext.js'
@@ -9,9 +9,6 @@ import { useKeyboardHint } from '../../hooks/useKeyboardHint.js'
 import { useKeyboardShortcuts } from '../../hooks/useKeyboardShortcuts.js'
 import { useMapEvents } from '../../hooks/useMapEvents.js'
 
-// ---------------------------
-// Mock dependencies
-// ---------------------------
 jest.mock('../../store/configContext.js', () => ({ useConfig: jest.fn() }))
 jest.mock('../../store/appContext.js', () => ({ useApp: jest.fn() }))
 jest.mock('../../store/mapContext.js', () => ({ useMap: jest.fn() }))
@@ -22,60 +19,60 @@ jest.mock('../../hooks/useMapEvents.js', () => ({ useMapEvents: jest.fn() }))
 jest.mock('../CrossHair/CrossHair', () => ({ CrossHair: jest.fn(() => <div data-testid='cross-hair' />) }))
 jest.mock('../Markers/Markers', () => ({ Markers: jest.fn(() => <div data-testid='markers' />) }))
 
-describe('Viewport', () => {
-  let viewportEl
-  let mainEl
-  const mockMapProvider = { initMap: jest.fn(), updateMap: jest.fn(), clearHighlightedLabel: jest.fn() }
+const KEYBOARD_HINT_TEXT = 'Test keyboad hint text'
+
+const mockMapProvider = { initMap: jest.fn(), updateMap: jest.fn(), clearHighlightedLabel: jest.fn() }
+
+function setupHookMocks (mainEl, viewportEl) {
+  useConfig.mockReturnValue({
+    id: 'test-map',
+    mapLabel: 'Test Map',
+    keyboardHintText: KEYBOARD_HINT_TEXT,
+    mapProvider: mockMapProvider
+  })
+  useApp.mockReturnValue({
+    interfaceType: 'desktop',
+    mode: 'default',
+    previousMode: 'default',
+    layoutRefs: { mainRef: { current: mainEl }, viewportRef: { current: viewportEl }, safeZoneRef: { current: null } },
+    safeZoneInset: {},
+    dispatch: jest.fn()
+  })
+  useMap.mockReturnValue({ mapSize: 'medium', dispatch: jest.fn() })
+  useService.mockReturnValue({
+    announce: jest.fn(),
+    hints: { show: jest.fn(), dismiss: jest.fn(), subscribe: jest.fn(() => jest.fn()) },
+    eventBus: { on: jest.fn(), off: jest.fn(), emit: jest.fn() }
+  })
+  useKeyboardHint.mockImplementation(({ onViewportFocusChange }) => ({
+    handleFocus: () => onViewportFocusChange(true),
+    handleBlur: () => onViewportFocusChange(false)
+  }))
+  useKeyboardShortcuts.mockImplementation(() => {})
+  useMapEvents.mockImplementation(() => {})
+}
+
+function renderViewport () {
+  const { container, rerender } = render(<Viewport />)
+  const viewport = container.querySelector('.im-c-viewport')
+  const mapContainer = container.querySelector('.im-c-viewport__map-container')
+  const safeZone = container.querySelector('.im-c-viewport__safezone')
+  const crossHair = container.querySelector('[data-testid="cross-hair"]')
+  const markers = container.querySelector('[data-testid="markers"]')
+  return { container, viewport, mapContainer, safeZone, crossHair, markers, rerender }
+}
+
+describe('Viewport rendering', () => {
+  let viewportEl, mainEl
 
   beforeEach(() => {
     cleanup()
     jest.clearAllMocks()
-
     viewportEl = document.createElement('div')
     mainEl = document.createElement('div')
     document.body.appendChild(viewportEl)
     document.body.appendChild(mainEl)
-
-    // ---------------------------
-    // Hook mocks
-    // ---------------------------
-    useConfig.mockReturnValue({
-      id: 'test-map',
-      mapLabel: 'Test Map',
-      keyboardHintText: 'Press arrow keys',
-      mapProvider: mockMapProvider
-    })
-
-    useApp.mockReturnValue({
-      interfaceType: 'desktop',
-      mode: 'default',
-      previousMode: 'default',
-      layoutRefs: { mainRef: { current: mainEl }, viewportRef: { current: viewportEl }, safeZoneRef: { current: null } },
-      safeZoneInset: {}
-    })
-
-    useMap.mockReturnValue({
-      mapSize: 'medium',
-      dispatch: jest.fn()
-    })
-
-    useService.mockReturnValue({
-      announce: jest.fn(),
-      eventBus: {
-        on: jest.fn(),
-        off: jest.fn(),
-        emit: jest.fn()
-      }
-    })
-
-    useKeyboardHint.mockImplementation(({ onViewportFocusChange }) => ({
-      showHint: true,
-      handleFocus: () => onViewportFocusChange(true),
-      handleBlur: () => onViewportFocusChange(false)
-    }))
-
-    useKeyboardShortcuts.mockImplementation(() => {})
-    useMapEvents.mockImplementation(() => {})
+    setupHookMocks(mainEl, viewportEl)
   })
 
   afterEach(() => {
@@ -83,17 +80,6 @@ describe('Viewport', () => {
     mainEl.remove()
   })
 
-  const renderViewport = () => {
-    const { container, rerender, unmount } = render(<Viewport />)
-    const viewport = container.querySelector('.im-c-viewport')
-    const mapContainer = container.querySelector('.im-c-viewport__map-container')
-    const safeZone = container.querySelector('.im-c-viewport__safezone')
-    const keyboardHint = mainEl.querySelector('.im-c-viewport__keyboard-hint')
-    const crossHair = container.querySelector('[data-testid="cross-hair"]')
-    const markers = container.querySelector('[data-testid="markers"]')
-    return { viewport, mapContainer, safeZone, keyboardHint, crossHair, markers, rerender, unmount }
-  }
-
   it('renders viewport, map container, safe zone, CrossHair, and Markers', () => {
     const { viewport, mapContainer, safeZone, crossHair, markers } = renderViewport()
     expect(viewport).toBeInTheDocument()
@@ -109,10 +95,44 @@ describe('Viewport', () => {
     expect(viewport).toHaveClass('im-c-viewport--medium')
   })
 
-  it('renders keyboard hint when showHint is true', () => {
-    const { keyboardHint } = renderViewport()
-    expect(keyboardHint).toBeInTheDocument()
-    expect(keyboardHint.innerHTML).toBe('Press arrow keys')
+  it('sets aria-describedby to the shared hints container id', () => {
+    const { viewport } = renderViewport()
+    expect(viewport).toHaveAttribute('aria-describedby', 'test-map-keyboard-desc')
+  })
+
+  it('calls hints.show() with keyboardHintText when viewport gains keyboard focus', () => {
+    const { hints } = useService()
+    renderViewport()
+    const { onViewportFocusChange } = useKeyboardHint.mock.calls[0][0]
+    onViewportFocusChange(true)
+    expect(hints.show).toHaveBeenCalledWith(KEYBOARD_HINT_TEXT, { duration: 0 })
+  })
+
+  it('calls hints.dismiss() when viewport loses focus', () => {
+    const { hints } = useService()
+    renderViewport()
+    const { onViewportFocusChange } = useKeyboardHint.mock.calls[0][0]
+    onViewportFocusChange(false)
+    expect(hints.dismiss).toHaveBeenCalled()
+  })
+})
+
+describe('Viewport interactions', () => {
+  let viewportEl, mainEl
+
+  beforeEach(() => {
+    cleanup()
+    jest.clearAllMocks()
+    viewportEl = document.createElement('div')
+    mainEl = document.createElement('div')
+    document.body.appendChild(viewportEl)
+    document.body.appendChild(mainEl)
+    setupHookMocks(mainEl, viewportEl)
+  })
+
+  afterEach(() => {
+    viewportEl.remove()
+    mainEl.remove()
   })
 
   it('attaches keyboard shortcuts', () => {
@@ -120,6 +140,15 @@ describe('Viewport', () => {
     expect(useKeyboardShortcuts).toHaveBeenCalled()
   })
 
+  it('dispatches SET_LISTBOX_ACTIVE when interact:listboxcapable fires', () => {
+    renderViewport()
+    const { eventBus } = useService()
+    const [, handler] = eventBus.on.mock.calls.find(([event]) => event === 'interact:listboxcapable')
+    handler()
+    const { dispatch } = useApp()
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_LISTBOX_ACTIVE' })
+  })
+
   it('calls mapProvider.clearHighlightedLabel on map:click', () => {
     const clearMock = jest.fn()
     useConfig.mockReturnValueOnce({ ...useConfig(), mapProvider: { ...mockMapProvider, clearHighlightedLabel: clearMock } })
@@ -128,6 +157,20 @@ describe('Viewport', () => {
     expect(clearMock).toHaveBeenCalled()
   })
 
+  it('calls hints.show() when the features listbox gains focus', () => {
+    const { hints } = useService()
+    const { container } = renderViewport()
+    fireEvent.focus(container.querySelector('[role="listbox"]'))
+    expect(hints.show).toHaveBeenCalledWith(KEYBOARD_HINT_TEXT, { duration: 0 })
+  })
+
+  it('calls hints.dismiss() when the features listbox loses focus', () => {
+    const { hints } = useService()
+    const { container } = renderViewport()
+    fireEvent.blur(container.querySelector('[role="listbox"]'))
+    expect(hints.dismiss).toHaveBeenCalled()
+  })
+
   it('focuses viewport when mode changes', () => {
     const { viewport, rerender } = renderViewport()
     const focusMock = jest.spyOn(viewport, 'focus')

package/src/App/controls/keyboardActions.js

@@ -1,4 +1,5 @@
-import { reverseGeocode } from '../../services/reverseGeocode.js'
+import { reverseGeocode, hasReverseGeocode } from '../../services/reverseGeocode.js'
+import { logger } from '../../services/logger.js'
 
 export const createKeyboardActions = (mapProvider, announce, {
   containerRef,
@@ -13,12 +14,13 @@ export const createKeyboardActions = (mapProvider, announce, {
   const getZoom = (shift) => (shift ? nudgeZoomDelta : zoomDelta)
 
   return {
-    showKeyboardControls: () => {
+    showKeyboardControls: (e) => {
+      const context = e.target === containerRef.current ? 'viewport' : 'listbox'
       dispatch({
         type: 'OPEN_PANEL',
         payload: {
           panelId: 'keyboardHelp',
-          props: { triggeringElement: containerRef.current }
+          props: { triggeringElement: e.target, context }
         }
       })
     },
@@ -36,6 +38,10 @@ export const createKeyboardActions = (mapProvider, announce, {
     zoomOut: (e) => mapProvider.zoomOut(getZoom(e.shiftKey)),
 
     getInfo: async (_e) => {
+      if (!hasReverseGeocode()) {
+        logger.warn('Alt+I pressed but reverseGeocode has not been configured')
+        return
+      }
       const coord = mapProvider.getCenter()
       const place = await reverseGeocode(mapProvider.getZoom(), coord)
       const area = mapProvider.getAreaDimensions?.()

package/src/App/controls/keyboardActions.test.js

@@ -1,139 +1,174 @@
 import { createKeyboardActions } from './keyboardActions.js'
-import { reverseGeocode } from '../../services/reverseGeocode.js'
+import { reverseGeocode, hasReverseGeocode } from '../../services/reverseGeocode.js'
+import { logger } from '../../services/logger.js'
 
 jest.mock('../../services/reverseGeocode.js', () => ({
-  reverseGeocode: jest.fn()
+  reverseGeocode: jest.fn(),
+  hasReverseGeocode: jest.fn()
 }))
 
-describe('createKeyboardActions', () => {
-  beforeAll(() => {
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn().mockReturnValue({
-        matches: false,
-        addListener: jest.fn(),
-        removeListener: jest.fn(),
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn()
-      })
-    })
+jest.mock('../../services/logger.js', () => ({
+  logger: { warn: jest.fn() }
+}))
+
+const PAN_DELTA = 10
+const NUDGE_PAN_DELTA = 5
+const ZOOM_DELTA = 2
+const NUDGE_ZOOM_DELTA = 1
+const ZOOM_LEVEL = 12
+
+const makeMapProvider = () => ({
+  panBy: jest.fn(),
+  zoomIn: jest.fn(),
+  zoomOut: jest.fn(),
+  getCenter: jest.fn().mockReturnValue({ lng: 1, lat: 2 }),
+  getZoom: jest.fn().mockReturnValue(ZOOM_LEVEL),
+  getAreaDimensions: jest.fn().mockReturnValue('5km²'),
+  highlightNextLabel: jest.fn(),
+  highlightLabelAtCenter: jest.fn(),
+  clearHighlightedLabel: jest.fn()
+})
+
+const makeActions = (overrides = {}) => {
+  const mapProvider = makeMapProvider()
+  const announce = jest.fn()
+  const dispatch = jest.fn()
+  const containerEl = document.createElement('div')
+  const containerRef = { current: containerEl }
+  const actions = createKeyboardActions(mapProvider, announce, {
+    containerRef,
+    dispatch,
+    panDelta: PAN_DELTA,
+    nudgePanDelta: NUDGE_PAN_DELTA,
+    zoomDelta: ZOOM_DELTA,
+    nudgeZoomDelta: NUDGE_ZOOM_DELTA,
+    readMapText: true,
+    ...overrides
   })
+  return { actions, mapProvider, announce, dispatch, containerRef }
+}
+
+afterEach(() => {
+  document.body.querySelectorAll('[role="listbox"]').forEach(el => el.remove())
+})
 
-  const panDelta = 10
-  const nudgePanDelta = 5
-  const zoomDelta = 2
-  const nudgeZoomDelta = 1
-
-  let mapProvider, announce, dispatch, containerRef, readMapText
-
-  const create = () =>
-    createKeyboardActions(mapProvider, announce, {
-      containerRef,
-      dispatch,
-      panDelta,
-      nudgePanDelta,
-      zoomDelta,
-      nudgeZoomDelta,
-      readMapText
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', { // NOSONAR: window required for broader browser support
+    writable: true,
+    value: jest.fn().mockReturnValue({
+      matches: false,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn()
     })
+  })
+})
+
+beforeEach(() => {
+  hasReverseGeocode.mockReturnValue(true)
+})
 
-  beforeEach(() => {
-    mapProvider = {
-      panBy: jest.fn(),
-      zoomIn: jest.fn(),
-      zoomOut: jest.fn(),
-      getCenter: jest.fn().mockReturnValue({ lng: 1, lat: 2 }),
-      getZoom: jest.fn().mockReturnValue(12),
-      getAreaDimensions: jest.fn().mockReturnValue('5km²'),
-      highlightNextLabel: jest.fn(),
-      highlightLabelAtCenter: jest.fn(),
-      clearHighlightedLabel: jest.fn()
-    }
-
-    announce = jest.fn()
-    dispatch = jest.fn()
-    containerRef = { current: {} }
-    readMapText = true
+describe('navigation actions', () => {
+  test('showKeyboardControls uses viewport context when target is the container', () => {
+    const { actions, dispatch, containerRef } = makeActions()
+    actions.showKeyboardControls({ target: containerRef.current })
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'OPEN_PANEL',
+      payload: { panelId: 'keyboardHelp', props: { triggeringElement: containerRef.current, context: 'viewport' } }
+    })
   })
 
-  test('showKeyboardControls dispatches correct action', () => {
-    create().showKeyboardControls()
+  test('showKeyboardControls uses listbox context when target is not the container', () => {
+    const { actions, dispatch } = makeActions()
+    const target = document.createElement('div')
+    actions.showKeyboardControls({ target })
     expect(dispatch).toHaveBeenCalledWith({
       type: 'OPEN_PANEL',
-      payload: {
-        panelId: 'keyboardHelp',
-        props: { triggeringElement: containerRef.current }
-      }
+      payload: { panelId: 'keyboardHelp', props: { triggeringElement: target, context: 'listbox' } }
     })
   })
 
   test.each([
-    ['panUp', { shiftKey: false }, [0, -panDelta]],
-    ['panDown', { shiftKey: true }, [0, nudgePanDelta]],
-    ['panLeft', { shiftKey: false }, [-panDelta, 0]],
-    ['panRight', { shiftKey: true }, [nudgePanDelta, 0]]
+    ['panUp', { shiftKey: false }, [0, -PAN_DELTA]],
+    ['panDown', { shiftKey: true }, [0, NUDGE_PAN_DELTA]],
+    ['panLeft', { shiftKey: false }, [-PAN_DELTA, 0]],
+    ['panRight', { shiftKey: true }, [NUDGE_PAN_DELTA, 0]]
   ])('%s uses correct deltas', (method, event, expected) => {
-    create()[method](event)
+    const { actions, mapProvider } = makeActions()
+    actions[method](event)
     expect(mapProvider.panBy).toHaveBeenCalledWith(expected)
   })
 
   test.each([
-    ['zoomIn', { shiftKey: false }, zoomDelta],
-    ['zoomOut', { shiftKey: true }, nudgeZoomDelta]
+    ['zoomIn', { shiftKey: false }, ZOOM_DELTA],
+    ['zoomOut', { shiftKey: true }, NUDGE_ZOOM_DELTA]
   ])('%s uses correct deltas', (method, event, expected) => {
-    create()[method](event)
+    const { actions, mapProvider } = makeActions()
+    actions[method](event)
     expect(mapProvider[method]).toHaveBeenCalledWith(expected)
   })
 
-  test('getInfo performs reverse geocode, places marker, and announces', async () => {
-    reverseGeocode.mockResolvedValue('London')
-    await create().getInfo()
+  test('clearSelection calls clearHighlightedLabel', () => {
+    const { actions, mapProvider } = makeActions()
+    actions.clearSelection()
+    expect(mapProvider.clearHighlightedLabel).toHaveBeenCalled()
+  })
+})
 
-    expect(reverseGeocode).toHaveBeenCalledWith(12, { lng: 1, lat: 2 })
+describe('getInfo', () => {
+  test('does nothing when reverseGeocode is not configured', async () => {
+    hasReverseGeocode.mockReturnValue(false)
+    const { actions, announce } = makeActions()
+    await actions.getInfo()
+    expect(reverseGeocode).not.toHaveBeenCalled()
+    expect(announce).not.toHaveBeenCalled()
+    expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('reverseGeocode'))
+  })
 
+  test('performs reverse geocode and announces result with area', async () => {
+    reverseGeocode.mockResolvedValue('London')
+    const { actions, announce } = makeActions()
+    await actions.getInfo()
+    expect(reverseGeocode).toHaveBeenCalledWith(ZOOM_LEVEL, { lng: 1, lat: 2 })
     expect(announce).toHaveBeenCalledWith('London. Covering 5km².', 'core')
   })
 
-  test('getInfo handles missing getAreaDimensions', async () => {
-    delete mapProvider.getAreaDimensions
+  test('announces result without area when getAreaDimensions is absent', async () => {
     reverseGeocode.mockResolvedValue('Paris')
-
-    await create().getInfo()
+    const { actions, mapProvider, announce } = makeActions()
+    delete mapProvider.getAreaDimensions
+    await actions.getInfo()
     expect(announce).toHaveBeenCalledWith('Paris.', 'core')
   })
+})
 
+describe('label actions', () => {
   test('highlightNextLabel announces returned label', () => {
+    const { actions, mapProvider, announce } = makeActions()
     mapProvider.highlightNextLabel.mockReturnValue('Label A')
-    create().highlightNextLabel({ key: 'A' })
-
+    actions.highlightNextLabel({ key: 'A' })
     expect(announce).toHaveBeenCalledWith('Label A', 'core')
   })
 
-  test('highlightNextLabel no-op when readMapText=false', () => {
-    readMapText = false
-    create().highlightNextLabel({ key: 'X' })
-
+  test('highlightNextLabel is no-op when readMapText is false', () => {
+    const { actions, mapProvider, announce } = makeActions({ readMapText: false })
+    actions.highlightNextLabel({ key: 'X' })
     expect(mapProvider.highlightNextLabel).not.toHaveBeenCalled()
     expect(announce).not.toHaveBeenCalled()
   })
 
-  test('highlightLabelAtCenter announces label', () => {
+  test('highlightLabelAtCenter announces returned label', () => {
+    const { actions, mapProvider, announce } = makeActions()
     mapProvider.highlightLabelAtCenter.mockReturnValue('Center Label')
-    create().highlightLabelAtCenter()
-
+    actions.highlightLabelAtCenter()
     expect(announce).toHaveBeenCalledWith('Center Label', 'core')
   })
 
-  test('highlightLabelAtCenter no-op when readMapText=false', () => {
-    readMapText = false
-    create().highlightLabelAtCenter()
-
+  test('highlightLabelAtCenter is no-op when readMapText is false', () => {
+    const { actions, mapProvider, announce } = makeActions({ readMapText: false })
+    actions.highlightLabelAtCenter()
     expect(mapProvider.highlightLabelAtCenter).not.toHaveBeenCalled()
     expect(announce).not.toHaveBeenCalled()
   })
-
-  test('clearSelection calls correct method', () => {
-    create().clearSelection()
-    expect(mapProvider.clearHighlightedLabel).toHaveBeenCalled()
-  })
 })

package/src/App/controls/keyboardShortcuts.js

@@ -3,49 +3,37 @@
 export const coreShortcuts = [
   {
     id: 'showKeyboardHelp',
-    group: 'General',
     title: 'Show keyboard help',
     command: '<kbd>Alt</kbd> + <kbd>K</kbd>',
-    enabled: true
-  },
-  {
-    id: 'selectControl',
-    group: 'General',
-    title: 'Select a map control',
-    command: '<kbd>Tab</kbd> or <kbd>Shift</kbd> + <kbd>Tab</kbd>',
+    context: 'global',
     enabled: true
   },
   {
     id: 'moveLarge',
-    group: 'Navigation',
     title: 'Move in large steps',
     command: '<kbd>←</kbd>, <kbd>↑</kbd>, <kbd>→</kbd> or <kbd>↓</kbd>',
     enabled: true
   },
   {
     id: 'nudgeMap',
-    group: 'Navigation',
     title: 'Nudge map',
     command: '<kbd>Shift</kbd> + <kbd>←</kbd>, <kbd>↑</kbd>, <kbd>→</kbd> or <kbd>↓</kbd>',
     enabled: false
   },
   {
     id: 'zoomLarge',
-    group: 'Navigation',
     title: 'Zoom in large steps',
     command: '<kbd>+</kbd> or <kbd>-</kbd>',
     enabled: true
   },
   {
     id: 'nudgeZoom',
-    group: 'Navigation',
     title: 'Nudge zoom',
     command: '<kbd>Shift</kbd> + <kbd>+</kbd> or <kbd>-</kbd>',
     enabled: false
   },
   {
     id: 'highlightLabelAtCenter',
-    group: 'Labels',
     title: 'Highlight label at centre',
     command: '<kbd>Alt</kbd> + <kbd>Enter</kbd>',
     enabled: false,
@@ -53,7 +41,6 @@ export const coreShortcuts = [
   },
   {
     id: 'highlightNextLabel',
-    group: 'Labels',
     title: 'Highlight nearby label',
     command: '<kbd>Alt</kbd> + <kbd>→</kbd>, <kbd>←</kbd>, <kbd>↑</kbd> or <kbd>↓</kbd>',
     enabled: false,