@defra/interactive-map 0.0.43-alpha → 0.0.44-alpha

package/src/App/components/{MoveControls/MoveControls.test.jsx → MapControls/MapControls.test.jsx}

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
-import { MoveControls } from './MoveControls.jsx'
+import { MapControls } from './MapControls.jsx'
 import { useApp } from '../../store/appContext.js'
 import { useConfig } from '../../store/configContext.js'
 import { useMap } from '../../store/mapContext.js'
@@ -11,19 +11,19 @@ jest.mock('../../store/configContext.js', () => ({ useConfig: jest.fn() }))
 jest.mock('../../store/mapContext.js', () => ({ useMap: jest.fn() }))
 jest.mock('../../store/serviceContext.js', () => ({ useService: jest.fn() }))
 
-describe('MoveControls', () => {
+describe('MapControls', () => {
   let dispatch
   let mapProvider
   let announce
 
   // MapButton and Tooltip also read from useApp() (buttonRefs, interfaceType), so every
-  // mockReturnValue needs to carry these alongside the fields MoveControls itself reads.
+  // mockReturnValue needs to carry these alongside the fields MapControls itself reads.
   const buildAppState = (overrides) => ({
     buttonRefs: { current: {} },
     interfaceType: 'mouse',
     breakpoint: 'desktop',
     dispatch,
-    expandedButtons: new Set(['moveControls']),
+    expandedButtons: new Set(['mapControls']),
     nudgeStepSize: 'large',
     layoutRefs: { viewportRef: { current: { focus: jest.fn() } } },
     ...overrides
@@ -50,29 +50,29 @@ describe('MoveControls', () => {
   afterEach(() => jest.clearAllMocks())
 
   it('renders with the id matching the trigger button aria-controls value', () => {
-    const { container } = render(<MoveControls />)
-    expect(container.querySelector('#im-move-controls-content')).toBeInTheDocument()
+    const { container } = render(<MapControls />)
+    expect(container.querySelector('#im-map-controls-content')).toBeInTheDocument()
   })
 
-  it('is not visually collapsed when moveControls is expanded', () => {
-    const { container } = render(<MoveControls />)
-    expect(container.querySelector('.im-c-move-controls--collapsed')).not.toBeInTheDocument()
+  it('is not visually collapsed when mapControls is expanded', () => {
+    const { container } = render(<MapControls />)
+    expect(container.querySelector('.im-c-map-controls--collapsed')).not.toBeInTheDocument()
   })
 
   it('moves focus to the first direction button when the control opens', () => {
-    const { rerender } = render(<MoveControls />)
+    const { rerender } = render(<MapControls />)
     useApp.mockReturnValue(buildAppState({ expandedButtons: new Set() }))
-    rerender(<MoveControls />)
+    rerender(<MapControls />)
 
-    useApp.mockReturnValue(buildAppState({ expandedButtons: new Set(['moveControls']) }))
-    rerender(<MoveControls />)
+    useApp.mockReturnValue(buildAppState({ expandedButtons: new Set(['mapControls']) }))
+    rerender(<MapControls />)
     expect(screen.getByRole('button', { name: 'Move up' })).toHaveFocus()
   })
 
   it('renders the directions group before the zoom group at every breakpoint', () => {
     ['mobile', 'tablet', 'desktop'].forEach(breakpoint => {
       useApp.mockReturnValue(buildAppState({ breakpoint }))
-      const { container, unmount } = render(<MoveControls />)
+      const { container, unmount } = render(<MapControls />)
       const groups = container.querySelectorAll('[role="group"]')
       expect(groups[0]).toHaveAttribute('aria-label', 'Direction controls')
       expect(groups[1]).toHaveAttribute('aria-label', 'Zoom controls')
@@ -80,14 +80,14 @@ describe('MoveControls', () => {
     })
   })
 
-  it('is collapsed when moveControls is not expanded', () => {
+  it('is collapsed when mapControls is not expanded', () => {
     useApp.mockReturnValue(buildAppState({ expandedButtons: new Set() }))
-    const { container } = render(<MoveControls />)
-    expect(container.querySelector('.im-c-move-controls--collapsed')).toBeInTheDocument()
+    const { container } = render(<MapControls />)
+    expect(container.querySelector('.im-c-map-controls--collapsed')).toBeInTheDocument()
   })
 
   it('labels direction buttons "Move" and pans by the large delta by default', () => {
-    render(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
     expect(mapProvider.panBy).toHaveBeenCalledWith([100, 0])
     expect(announce).toHaveBeenCalledWith('Moved right')
@@ -95,7 +95,7 @@ describe('MoveControls', () => {
 
   it('labels direction buttons "Nudge" and pans by the small delta when nudgeStepSize is small', () => {
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    render(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Nudge up' }))
     expect(mapProvider.panBy).toHaveBeenCalledWith([0, -5])
     expect(announce).toHaveBeenCalledWith('Nudged up')
@@ -103,7 +103,7 @@ describe('MoveControls', () => {
 
   it('routes direction clicks to mapProvider.activeMoveTarget instead of panning, when a plugin has claimed it', () => {
     mapProvider.activeMoveTarget = { move: jest.fn(), label: 'vertex' }
-    render(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
     expect(mapProvider.activeMoveTarget.move).toHaveBeenCalledWith(1, 0, true)
     expect(mapProvider.panBy).not.toHaveBeenCalled()
@@ -112,22 +112,22 @@ describe('MoveControls', () => {
 
   it('falls back to panning once activeMoveTarget is released', () => {
     mapProvider.activeMoveTarget = { move: jest.fn(), label: 'vertex' }
-    const { rerender } = render(<MoveControls />)
+    const { rerender } = render(<MapControls />)
     mapProvider.activeMoveTarget = null
-    rerender(<MoveControls />)
+    rerender(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
     expect(mapProvider.panBy).toHaveBeenCalledWith([100, 0])
   })
 
   it('omits the target label from the announcement when activeMoveTarget has none', () => {
     mapProvider.activeMoveTarget = { move: jest.fn() }
-    render(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Move up' }))
     expect(announce).toHaveBeenCalledWith('Moved up')
   })
 
   it('zooms in and out by the large delta by default and announces the action', () => {
-    render(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
     expect(mapProvider.zoomIn).toHaveBeenCalledWith(1)
     expect(announce).toHaveBeenCalledWith('Zoomed in')
@@ -139,26 +139,26 @@ describe('MoveControls', () => {
 
   it('zooms by the small delta when nudgeStepSize is small', () => {
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    render(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
     expect(mapProvider.zoomIn).toHaveBeenCalledWith(0.1)
   })
 
   it('disables the zoom in button at max zoom, and zoom out at min zoom', () => {
     useMap.mockReturnValue({ isAtMaxZoom: true, isAtMinZoom: false })
-    const { rerender } = render(<MoveControls />)
+    const { rerender } = render(<MapControls />)
     expect(screen.getByRole('button', { name: 'Zoom in' })).toHaveAttribute('aria-disabled', 'true')
     expect(screen.getByRole('button', { name: 'Zoom out' })).not.toHaveAttribute('aria-disabled')
 
     useMap.mockReturnValue({ isAtMaxZoom: false, isAtMinZoom: true })
-    rerender(<MoveControls />)
+    rerender(<MapControls />)
     expect(screen.getByRole('button', { name: 'Zoom in' })).not.toHaveAttribute('aria-disabled')
     expect(screen.getByRole('button', { name: 'Zoom out' })).toHaveAttribute('aria-disabled', 'true')
   })
 
   it('does not zoom when the relevant button is disabled at max/min zoom', () => {
     useMap.mockReturnValue({ isAtMaxZoom: true, isAtMinZoom: true })
-    render(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
     fireEvent.click(screen.getByRole('button', { name: 'Zoom out' }))
     expect(mapProvider.zoomIn).not.toHaveBeenCalled()
@@ -177,7 +177,7 @@ describe('MoveControls', () => {
     it('returns focus to the viewport after panning on mouse/touch, so arrow-key shortcuts elsewhere are not left stranded on the D-pad button', () => {
       const appState = buildAppState({ interfaceType: 'mouse' })
       useApp.mockReturnValue(appState)
-      render(<MoveControls />)
+      render(<MapControls />)
 
       fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
       expect(appState.layoutRefs.viewportRef.current.focus).toHaveBeenCalled()
@@ -185,19 +185,19 @@ describe('MoveControls', () => {
 
     it('keeps focus on the button when driven by keyboard, so repeated Enter/Space presses do not require re-tabbing', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard' }))
-      render(<MoveControls />)
+      render(<MapControls />)
       fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
       expect(rafSpy).not.toHaveBeenCalled()
     })
 
     it('also returns focus after zooming on mouse/touch, but not on keyboard', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'mouse' }))
-      const { rerender } = render(<MoveControls />)
+      const { rerender } = render(<MapControls />)
       fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
       expect(rafSpy).toHaveBeenCalledTimes(1)
 
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard' }))
-      rerender(<MoveControls />)
+      rerender(<MapControls />)
       fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
       expect(rafSpy).toHaveBeenCalledTimes(1)
     })
@@ -205,7 +205,7 @@ describe('MoveControls', () => {
     it('also returns focus after a vertex nudge via activeMoveTarget on mouse/touch', () => {
       mapProvider.activeMoveTarget = { move: jest.fn(), label: 'vertex' }
       useApp.mockReturnValue(buildAppState({ interfaceType: 'touch' }))
-      render(<MoveControls />)
+      render(<MapControls />)
       fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
       expect(rafSpy).toHaveBeenCalledTimes(1)
     })
@@ -217,7 +217,7 @@ describe('MoveControls', () => {
     // arrow keys without first tabbing all the way back out to the map.
     it('pans the map on an arrow key, regardless of which button currently has focus', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard' }))
-      render(<MoveControls />)
+      render(<MapControls />)
       // Focus a button unrelated to the direction being pressed, to prove this
       // isn't just reading the focused button's own handler.
       fireEvent.focus(screen.getByRole('button', { name: 'Zoom in' }))
@@ -229,7 +229,7 @@ describe('MoveControls', () => {
     it('routes the arrow key through activeMoveTarget when a plugin has claimed the control', () => {
       mapProvider.activeMoveTarget = { move: jest.fn(), label: 'vertex' }
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard' }))
-      render(<MoveControls />)
+      render(<MapControls />)
       fireEvent.keyDown(screen.getByRole('button', { name: 'Move up' }), { key: 'ArrowUp' })
       expect(mapProvider.activeMoveTarget.move).toHaveBeenCalledWith(0, -1, true)
       expect(mapProvider.panBy).not.toHaveBeenCalled()
@@ -237,14 +237,14 @@ describe('MoveControls', () => {
 
     it('ignores non-arrow keys, leaving default behaviour (e.g. Enter/Space activating the focused button) untouched', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard' }))
-      render(<MoveControls />)
+      render(<MapControls />)
       fireEvent.keyDown(screen.getByRole('button', { name: 'Move up' }), { key: 'Enter' })
       expect(mapProvider.panBy).not.toHaveBeenCalled()
     })
 
     it('shift+arrow overrides the Precision toggle to the small step, matching the map\'s own native keyboard shortcuts', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard', nudgeStepSize: 'large' }))
-      render(<MoveControls />)
+      render(<MapControls />)
       fireEvent.keyDown(screen.getByRole('button', { name: 'Move right' }), { key: 'ArrowRight', shiftKey: true })
       expect(mapProvider.panBy).toHaveBeenCalledWith([5, 0])
       expect(announce).toHaveBeenCalledWith('Nudged right')
@@ -252,7 +252,7 @@ describe('MoveControls', () => {
 
     it('shift+arrow still resolves to the small step when Precision is already on (idempotent, not a toggle-relative flip)', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard', nudgeStepSize: 'small' }))
-      render(<MoveControls />)
+      render(<MapControls />)
       fireEvent.keyDown(screen.getByRole('button', { name: 'Nudge right' }), { key: 'ArrowRight', shiftKey: true })
       expect(mapProvider.panBy).toHaveBeenCalledWith([5, 0])
       expect(announce).toHaveBeenCalledWith('Nudged right')
@@ -261,14 +261,14 @@ describe('MoveControls', () => {
     it('shift+arrow overrides activeMoveTarget.move to the small step too', () => {
       mapProvider.activeMoveTarget = { move: jest.fn(), label: 'vertex' }
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard', nudgeStepSize: 'large' }))
-      render(<MoveControls />)
+      render(<MapControls />)
       fireEvent.keyDown(screen.getByRole('button', { name: 'Move up' }), { key: 'ArrowUp', shiftKey: true })
       expect(mapProvider.activeMoveTarget.move).toHaveBeenCalledWith(0, -1, false)
     })
 
     it('arrow key without shift still follows the Precision toggle as before', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard', nudgeStepSize: 'large' }))
-      render(<MoveControls />)
+      render(<MapControls />)
       fireEvent.keyDown(screen.getByRole('button', { name: 'Move right' }), { key: 'ArrowRight' })
       expect(mapProvider.panBy).toHaveBeenCalledWith([100, 0])
       expect(announce).toHaveBeenCalledWith('Moved right')
@@ -276,11 +276,11 @@ describe('MoveControls', () => {
   })
 
   it('has a stable "Precision" label regardless of state', () => {
-    const { rerender } = render(<MoveControls />)
+    const { rerender } = render(<MapControls />)
     expect(screen.getByRole('button', { name: 'Precision' })).toBeInTheDocument()
 
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    rerender(<MoveControls />)
+    rerender(<MapControls />)
     expect(screen.getByRole('button', { name: 'Precision' })).toBeInTheDocument()
   })
 
@@ -294,29 +294,29 @@ describe('MoveControls', () => {
       return document.getElementById(button.getAttribute('aria-labelledby'))
     }
 
-    const { rerender } = render(<MoveControls />)
+    const { rerender } = render(<MapControls />)
     let tooltip = getOwnTooltip()
     expect(tooltip.querySelector('[aria-hidden="true"]')).toHaveTextContent('(Off)')
     expect(tooltip).toHaveTextContent('Precision (Off)')
 
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    rerender(<MoveControls />)
+    rerender(<MapControls />)
     tooltip = getOwnTooltip()
     expect(tooltip.querySelector('[aria-hidden="true"]')).toHaveTextContent('(On)')
     expect(tooltip).toHaveTextContent('Precision (On)')
   })
 
   it('reflects precision mode via aria-pressed, not via label changes', () => {
-    const { rerender } = render(<MoveControls />)
+    const { rerender } = render(<MapControls />)
     expect(screen.getByRole('button', { name: 'Precision' })).toHaveAttribute('aria-pressed', 'false')
 
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    rerender(<MoveControls />)
+    rerender(<MapControls />)
     expect(screen.getByRole('button', { name: 'Precision' })).toHaveAttribute('aria-pressed', 'true')
   })
 
   it('toggles precision on and announces it when currently in large-step mode', () => {
-    render(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Precision' }))
     expect(dispatch).toHaveBeenCalledWith({ type: 'TOGGLE_NUDGE_STEP' })
     expect(announce).toHaveBeenCalledWith('Precision on')
@@ -324,7 +324,7 @@ describe('MoveControls', () => {
 
   it('toggles precision off and announces it when currently in small-step mode', () => {
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    render(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Precision' }))
     expect(dispatch).toHaveBeenCalledWith({ type: 'TOGGLE_NUDGE_STEP' })
     expect(announce).toHaveBeenCalledWith('Precision off')

package/src/App/components/Markers/Markers.jsx

@@ -67,11 +67,11 @@ export const Markers = () => {
     const handleSetActive = ({ id: markerId }) => setActiveMarkerId(markerId)
     eventBus.on('interact:active', handleActive)
     eventBus.on('interact:selectionchange', handleSelectionChange)
-    eventBus.on(EVENTS.MAP_SET_ACTIVE_FEATURE, handleSetActive)
+    eventBus.on(EVENTS.MAP_SET_ACTIVE_ITEM, handleSetActive)
     return () => {
       eventBus.off('interact:active', handleActive)
       eventBus.off('interact:selectionchange', handleSelectionChange)
-      eventBus.off(EVENTS.MAP_SET_ACTIVE_FEATURE, handleSetActive)
+      eventBus.off(EVENTS.MAP_SET_ACTIVE_ITEM, handleSetActive)
     }
   }, [eventBus])
 

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

@@ -20,9 +20,9 @@ const SVG_SEL = 'svg'
 const makeEventBus = () => {
   const listeners = {}
   return {
-    on: jest.fn((e, fn) => { listeners[e] = fn }),
+    on: jest.fn((eventName, fn) => { listeners[eventName] = fn }),
     off: jest.fn(),
-    emit: (e, payload) => listeners[e]?.(payload)
+    emit: (eventName, payload) => listeners[eventName]?.(payload)
   }
 }
 
@@ -170,7 +170,7 @@ describe('Markers — selection', () => {
   })
 
   it('calls resolveActive when the marker is the active listbox item', () => {
-    const SET_ACTIVE = 'map:setactivefeature'
+    const SET_ACTIVE = 'map:setactiveitem'
     const sr = makeSymbolRegistry({ resolveActive: jest.fn(() => '<circle class="active"/>') })
     const { eb } = setup({ markers: [makeMarker()], symbolRegistry: sr })
     act(() => eb.emit(SET_ACTIVE, { id: MARKER_ID }))

package/src/App/components/Markers/SymbolMarker.test.jsx

@@ -19,8 +19,8 @@ describe('SymbolMarker', () => {
     expect(container.querySelector('svg').getAttribute('id')).toBe('my-map-marker-marker-1')
   })
 
-  // Decorative: the ancestor markers layer is aria-hidden, and Features (the accessible
-  // features listbox) is the sole accessible surface for a marker's label — see Features.jsx.
+  // Decorative: the ancestor markers layer is aria-hidden, and SpatialList (the accessible
+  // spatial listbox) is the sole accessible surface for a marker's label — see SpatialList.jsx.
   it('is aria-hidden', () => {
     const { container } = render(<SymbolMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
     expect(container.querySelector('svg').getAttribute('aria-hidden')).toBe('true')

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

@@ -11,7 +11,7 @@ export const MapStatus = () => {
     <div // NOSONAR: div + status role is semantically correct here, <output> implies a calculation result
       ref={mapStatusRef}
       role='status'
-      className='im-c-viewport__status'
+      className='im-u-visually-hidden'
     />
   )
 }

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

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react'
+import { useConfig } from '../../store/configContext.js'
+
+// Accessible spatial list: a listbox whose items are positioned to match wherever they are on
+// the map, navigable both sequentially (Arrow/Home/End) and spatially (Alt+Arrow — see
+// useSpatialListFocus.js). Content is whatever the current spatialListRegistry provider
+// contributes; `label` names it for aria-label accordingly.
+export const SpatialList = forwardRef(({ activeItemId, tabbableId, selectedIds = [], multiselectable = false, items = [], label = 'Map features', focusable = true, onFocus, onBlur, onSelectItem }, ref) => {
+  const { id } = useConfig()
+  const hasItems = items.length > 0
+  // Roving tabindex: exactly one option is a Tab stop at a time — see useSpatialListFocus.js.
+  const currentId = activeItemId ?? tabbableId
+  return (
+    <ul // NOSONAR: role='listbox' is correct for custom composite widget; native <select> cannot host SVG marker elements
+      id={`${id}-spatial-list`}
+      ref={ref}
+      role='listbox' // NOSONAR
+      aria-hidden={hasItems ? undefined : true}
+      aria-label={label}
+      aria-describedby={`${id}-keyboard-desc`}
+      aria-multiselectable={multiselectable || undefined}
+      className='im-c-spatial-list'
+      onFocus={onFocus}
+      onBlur={onBlur}
+    >
+      {items.map(item => (
+        <li // NOSONAR: role='option' overrides implicit listitem; this is the correct ARIA listbox child pattern.
+          // tabIndex/onClick let voice control and screen readers reach and activate each option
+          // directly. focusable: false (draw's vertex/midpoint items) keeps every item out of
+          // the Tab order — that population already has a full keyboard path via the map itself.
+          key={item.id} id={`${id}-spatial-list-item-${item.id}`} role='option' // NOSONAR
+          data-id={item.id}
+          tabIndex={focusable && item.id === currentId ? 0 : -1}
+          aria-selected={selectedIds.includes(item.id)}
+          // Positions the (visually clipped) option over its on-map feature, so AT overlays like
+          // Voice Control's "Show Numbers" number it at the right screen position.
+          style={item.x != null ? { left: item.x, top: item.y } : undefined}
+          onClick={() => onSelectItem?.(item.id)}
+        >
+          {item.label}
+        </li>
+      ))}
+    </ul>
+  )
+})
+
+SpatialList.displayName = 'SpatialList'

package/src/App/components/Viewport/{Features.module.scss → SpatialList.module.scss}

@@ -1,10 +1,10 @@
 @use '../../../scss/tools/index' as tools;
 
 // ===================================================
-// Component: Features
+// Component: SpatialList
 // ===================================================
 
-.im-c-features {
+.im-c-spatial-list {
   position: absolute;
   inset: 0;
   pointer-events: none;
@@ -24,7 +24,7 @@
     clip-path: inset(50%);
     white-space: nowrap;
     // Roving tabindex moves real focus (and click activation) onto individual options, so they
-    // need pointer events re-enabled — overridden off .im-c-features's pointer-events: none,
+    // need pointer events re-enabled — overridden off .im-c-spatial-list's pointer-events: none,
     // which otherwise lets mouse interaction pass through to the map everywhere else.
     pointer-events: auto;
   }