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

package/src/App/store/AppProvider.jsx

@@ -10,7 +10,7 @@ import { useMediaQueryDispatch } from '../hooks/useMediaQueryDispatch.js'
 export const AppContext = createContext(null)
 
 export const AppProvider = ({ options, children }) => {
-  const { pluginRegistry, buttonRegistry, panelRegistry, controlRegistry, keyboardShortcutRegistry, eventBus, breakpointDetector } = options
+  const { pluginRegistry, buttonRegistry, panelRegistry, controlRegistry, keyboardShortcutRegistry, spatialListRegistry, eventBus, breakpointDetector } = options
 
   const layoutRefs = {
     appContainerRef: useRef(null),
@@ -96,7 +96,8 @@ export const AppProvider = ({ options, children }) => {
     buttonRegistry,
     panelRegistry,
     controlRegistry,
-    keyboardShortcutRegistry
+    keyboardShortcutRegistry,
+    spatialListRegistry
   }), [state, dispatch])
 
   return (

package/src/config/appConfig.js

@@ -1,5 +1,5 @@
 import { KeyboardHelp } from '../App/components/KeyboardHelp/KeyboardHelp.jsx'
-import { MoveControls } from '../App/components/MoveControls/MoveControls.jsx'
+import { MapControls } from '../App/components/MapControls/MapControls.jsx'
 
 const keyboardBasePanelSlots = {
   slot: 'middle',
@@ -13,7 +13,7 @@ const buttonSlots = {
   showLabel: false
 }
 
-const moveControlsSlot = {
+const mapControlsSlot = {
   slot: 'right-bottom'
 }
 
@@ -79,7 +79,7 @@ export const defaultAppConfig = {
     iconId: 'plus',
     keepFocus: true,
     onClick: (_e, { mapProvider, appConfig }) => mapProvider.zoomIn(appConfig.zoomDelta),
-    excludeWhen: ({ appState, appConfig }) => !appConfig.enableZoomControls || appConfig.enableMoveControls || appState.interfaceType === 'touch',
+    excludeWhen: ({ appState, appConfig }) => !appConfig.enableZoomControls || appConfig.enableMapControls || appState.interfaceType === 'touch',
     enableWhen: ({ mapState }) => !mapState.isAtMaxZoom,
     mobile: buttonSlots,
     tablet: buttonSlots,
@@ -91,23 +91,23 @@ export const defaultAppConfig = {
     iconId: 'minus',
     keepFocus: true,
     onClick: (_e, { mapProvider, appConfig }) => mapProvider.zoomOut(appConfig.zoomDelta),
-    excludeWhen: ({ appState, appConfig }) => !appConfig.enableZoomControls || appConfig.enableMoveControls || appState.interfaceType === 'touch',
+    excludeWhen: ({ appState, appConfig }) => !appConfig.enableZoomControls || appConfig.enableMapControls || appState.interfaceType === 'touch',
     enableWhen: ({ mapState }) => !mapState.isAtMinZoom,
     mobile: buttonSlots,
     tablet: buttonSlots,
     desktop: buttonSlots
   }, {
-    id: 'moveControls',
+    id: 'mapControls',
     label: 'Map controls',
     iconId: 'move',
     keepFocus: true,
     isExpanded: false,
-    ariaControls: ({ appConfig }) => `${appConfig.id}-move-controls-content`,
+    ariaControls: ({ appConfig }) => `${appConfig.id}-map-controls-content`,
     onClick: (_e, { appState }) => appState.dispatch({
       type: 'TOGGLE_BUTTON_EXPANDED',
-      payload: { id: 'moveControls', isExpanded: !appState.expandedButtons.has('moveControls') }
+      payload: { id: 'mapControls', isExpanded: !appState.expandedButtons.has('mapControls') }
     }),
-    excludeWhen: ({ appConfig }) => !appConfig.enableMoveControls,
+    excludeWhen: ({ appConfig }) => !appConfig.enableMapControls,
     mobile: buttonSlots,
     tablet: buttonSlots,
     desktop: buttonSlots
@@ -131,13 +131,13 @@ export const defaultAppConfig = {
   }],
 
   controls: [{
-    id: 'moveControls',
+    id: 'mapControls',
     label: 'Move and zoom',
-    excludeWhen: ({ appConfig }) => !appConfig.enableMoveControls,
-    mobile: moveControlsSlot,
-    tablet: moveControlsSlot,
-    desktop: moveControlsSlot,
-    render: MoveControls
+    excludeWhen: ({ appConfig }) => !appConfig.enableMapControls,
+    mobile: mapControlsSlot,
+    tablet: mapControlsSlot,
+    desktop: mapControlsSlot,
+    render: MapControls
   }],
 
   icons: [{

package/src/config/appConfig.test.js

@@ -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 moveControlsBtn = buttons.find(b => b.id === 'moveControls')
+  const mapControlsBtn = buttons.find(b => b.id === 'mapControls')
 
   // --- 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 (enableMoveControls)
+      // Branch B: Second part of OR is true (enableMapControls)
       expect(btn.excludeWhen({
-        appConfig: { enableZoomControls: true, enableMoveControls: true },
+        appConfig: { enableZoomControls: true, enableMapControls: true },
         appState: { interfaceType: 'mouse' }
       })).toBe(true)
 
       // Branch C: Third part of OR is true (interfaceType === 'touch')
       expect(btn.excludeWhen({
-        appConfig: { enableZoomControls: true, enableMoveControls: false },
+        appConfig: { enableZoomControls: true, enableMapControls: false },
         appState: { interfaceType: 'touch' }
       })).toBe(true)
 
       // Branch D: All parts are false (Result: false)
       expect(btn.excludeWhen({
-        appConfig: { enableZoomControls: true, enableMoveControls: false },
+        appConfig: { enableZoomControls: true, enableMapControls: false },
         appState: { interfaceType: 'mouse' }
       })).toBe(false)
     })
@@ -183,37 +183,37 @@ describe('defaultAppConfig', () => {
   })
 
   // --- 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('covers all branches of mapControls excludeWhen', () => {
+    expect(mapControlsBtn.excludeWhen({ appConfig: { enableMapControls: false } })).toBe(true)
+    expect(mapControlsBtn.excludeWhen({ appConfig: { enableMapControls: true } })).toBe(false)
   })
 
-  it('moveControls ariaControls resolves the control element id', () => {
-    expect(moveControlsBtn.ariaControls({ appConfig: { id: 'im' } })).toBe('im-move-controls-content')
+  it('mapControls ariaControls resolves the control element id', () => {
+    expect(mapControlsBtn.ariaControls({ appConfig: { id: 'im' } })).toBe('im-map-controls-content')
   })
 
-  it('moveControls onClick toggles TOGGLE_BUTTON_EXPANDED based on current state', () => {
+  it('mapControls onClick toggles TOGGLE_BUTTON_EXPANDED based on current state', () => {
     const dispatch = jest.fn()
 
-    moveControlsBtn.onClick({}, { appState: { dispatch, expandedButtons: new Set() } })
+    mapControlsBtn.onClick({}, { appState: { dispatch, expandedButtons: new Set() } })
     expect(dispatch).toHaveBeenCalledWith({
       type: 'TOGGLE_BUTTON_EXPANDED',
-      payload: { id: 'moveControls', isExpanded: true }
+      payload: { id: 'mapControls', isExpanded: true }
     })
 
     dispatch.mockClear()
-    moveControlsBtn.onClick({}, { appState: { dispatch, expandedButtons: new Set(['moveControls']) } })
+    mapControlsBtn.onClick({}, { appState: { dispatch, expandedButtons: new Set(['mapControls']) } })
     expect(dispatch).toHaveBeenCalledWith({
       type: 'TOGGLE_BUTTON_EXPANDED',
-      payload: { id: 'moveControls', isExpanded: false }
+      payload: { id: 'mapControls', isExpanded: 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)
+  it('covers all branches of mapControls control excludeWhen', () => {
+    const control = defaultAppConfig.controls.find(c => c.id === 'mapControls')
+    expect(control.excludeWhen({ appConfig: { enableMapControls: false } })).toBe(true)
+    expect(control.excludeWhen({ appConfig: { enableMapControls: true } })).toBe(false)
   })
 
   // --- SUPPLEMENTARY CONFIGS ---

package/src/config/defaults.js

@@ -16,7 +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,
-  enableMoveControls: true,
+  enableMapControls: true,
   enableZoomControls: true,
   genericErrorText: 'There was a problem loading the map. Please try again later.',
   hasExitButton: false,
@@ -32,7 +32,7 @@ const defaults = {
   urlPosition: 'sync',
   maxMobileWidth: 640,
   minDesktopWidth: 835,
-  moveControlsHintText: 'A "Move and zoom controls" button is also available, opening further controls for moving and zooming.',
+  mapControlsHintText: 'A "Move and zoom controls" button is also available, opening further controls for moving and zooming.',
   nudgePanDelta: 5,
   nudgeZoomDelta: 0.1,
   panDelta: 100,

package/src/config/events.js

@@ -145,14 +145,14 @@ export const EVENTS = {
   MAP_SET_STYLE: 'map:setstyle',
   /** @internal Set map size. Payload: { width, height } */
   MAP_SET_SIZE: 'map:setsize',
-  /** @internal Set the accessible features list. Payload: { items: { id: string, label: string }[] } */
-  MAP_SET_FEATURES: 'map:setfeatures',
-  /** @internal Suppress/restore the accessible features list. Payload: { suppressed: boolean } */
-  MAP_SET_FEATURES_SUPPRESSED: 'map:setfeaturessuppressed',
-  /** @internal Set the active feature in the accessible features list. Payload: { id: string | null } */
-  MAP_SET_ACTIVE_FEATURE: 'map:setactivefeature',
-  /** @internal Select the active listbox feature as the real selection (Enter key). Payload: none */
-  MAP_SELECT_FEATURE: 'map:selectfeature',
+  /** @internal Set the accessible spatial list's items. Payload: { items: { id: string, label: string }[], multiselectable: boolean, label?: string } */
+  MAP_SET_SPATIAL_LIST: 'map:setspatiallist',
+  /** @internal Suppress/restore the accessible spatial list. Payload: { suppressed: boolean } */
+  MAP_SET_SPATIAL_LIST_SUPPRESSED: 'map:setspatiallistsuppressed',
+  /** @internal Set the active item in the accessible spatial list (roving tabindex position). Payload: { id: string | null } */
+  MAP_SET_ACTIVE_ITEM: 'map:setactiveitem',
+  /** @internal Select the active spatial list item as the real selection (Enter key). Payload: none */
+  MAP_SELECT_ITEM: 'map:selectitem',
   /** @internal Set pixel ratio. Payload: pixelRatio */
   MAP_SET_PIXEL_RATIO: 'map:setpixelratio',
   /** @internal Fit the map to a bounding box. Payload: [west, south, east, north] */

package/src/scss/main.scss

@@ -29,9 +29,9 @@
 @use '../App/components/Hints/Hints.module';
 @use '../App/components/CrossHair/CrossHair.module';
 @use '../App/components/Markers/Markers.module';
-@use '../App/components/Viewport/Features.module';
+@use '../App/components/Viewport/SpatialList.module';
 @use '../App/components/Actions/Actions.module';
-@use '../App/components/MoveControls/MoveControls.module';
+@use '../App/components/MapControls/MapControls.module';
 
 // Components that dont have a corresponding React Component
 @use 'components';

package/src/test-utils.js

@@ -37,6 +37,14 @@ export const createMockRegistries = (overrides = {}) => {
       registerKeyboardShortcut: jest.fn(),
       setProviderSupportedShortcuts: jest.fn(),
       getKeyboardShortcuts: jest.fn(() => [])
+    },
+    spatialListRegistry: {
+      registerItemProvider: jest.fn(),
+      unregisterItemProvider: jest.fn(),
+      claimExclusive: jest.fn(),
+      releaseExclusive: jest.fn(),
+      notifyItemsChanged: jest.fn(),
+      clear: jest.fn()
     }
   }
 }

package/src/types.js

@@ -765,16 +765,18 @@
  * @property {boolean} [enableFullscreen=false]
  * Whether a toggle fullscreen button is displayed.
  *
- * @property {boolean} [enableMoveControls=true]
- * Whether the move controls are 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} [enableMapControls=true]
+ * Whether the map controls are displayed — a button that reveals on-screen move,
+ * zoom, and precision buttons, plus a target point, typically used to place or
+ * select features on the map without a drag gesture. This gives a non-dragging way
+ * to operate the map, for anyone who can't perform a drag/pinch gesture (e.g.
+ * switch access users) and for voice interfaces such as Voice Control, which can
+ * trigger a button click but not a drag. When enabled, enableZoomControls' buttons
+ * are hidden to avoid duplication.
  *
  * @property {boolean} [enableZoomControls=true]
  * Whether zoom control buttons are displayed. Not displayed when the interface
- * type is 'touch', or when enableMoveControls is enabled.
+ * type is 'touch', or when enableMapControls 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.
@@ -806,8 +808,8 @@
  * @property {string} [mapLabel='Interactive map']
  * Accessible label for the map, announced by screen readers. Also prefixed onto mapHintText, so give each map on a page a distinct label.
  *
- * @property {string} [moveControlsHintText]
- * Visually hidden text describing the move controls button, appended to keyboardHintText when enableMoveControls is true.
+ * @property {string} [mapControlsHintText]
+ * Visually hidden text describing the map controls button, appended to keyboardHintText when enableMapControls is true.
  *
  * @property {MapProviderDescriptor} [mapProvider]
  * A factory function that returns a map provider instance (e.g. maplibreProvider()).

package/src/utils/findNearestItemInDirection.js

@@ -0,0 +1,29 @@
+import { spatialNavigate } from './spatialNavigate.js'
+
+/**
+ * Item-list-shaped counterpart to spatialNavigate's raw pixel-array contract: given a list of
+ * items each carrying screen coordinates, finds the id of whichever one is spatially nearest
+ * to the current item in the given direction. Used to move roving-tabindex focus in a listbox
+ * spatially (Alt+Arrow) rather than sequentially (plain Arrow/Home/End) — the same items list
+ * already built for sequential navigation works here unchanged, whether it holds map features
+ * or (in future) something else entirely, as long as each item carries x/y.
+ *
+ * Items missing x/y are skipped — they have no screen position to navigate by. If none of the
+ * items have coordinates, or the list is empty, currentId is returned unchanged.
+ *
+ * @param {Array<{id: string, x?: number, y?: number}>} items
+ * @param {string|null} currentId
+ * @param {'ArrowUp'|'ArrowDown'|'ArrowLeft'|'ArrowRight'} direction
+ * @returns {string|null} The id to move to — currentId unchanged if nothing qualifies.
+ */
+export function findNearestItemInDirection (items, currentId, direction) {
+  const positioned = items.filter(item => item.x != null && item.y != null)
+  if (!positioned.length) {
+    return currentId
+  }
+  const pixels = positioned.map(item => [item.x, item.y])
+  const currentIndex = positioned.findIndex(item => item.id === currentId)
+  const start = currentIndex === -1 ? pixels[0] : pixels[currentIndex]
+  const nextIndex = spatialNavigate(start, pixels, direction)
+  return positioned[nextIndex]?.id ?? currentId
+}

package/src/utils/findNearestItemInDirection.test.js

@@ -0,0 +1,67 @@
+import { findNearestItemInDirection } from './findNearestItemInDirection.js'
+
+describe('findNearestItemInDirection', () => {
+  const items = [
+    { id: 'center', x: 0, y: 0 },
+    { id: 'up', x: 0, y: -10 },
+    { id: 'down', x: 0, y: 10 },
+    { id: 'left', x: -10, y: 0 },
+    { id: 'right', x: 10, y: 0 }
+  ]
+
+  test.each([
+    ['ArrowUp', 'up'],
+    ['ArrowDown', 'down'],
+    ['ArrowLeft', 'left'],
+    ['ArrowRight', 'right']
+  ])('finds the nearest item to the %s of the current one', (direction, expectedId) => {
+    expect(findNearestItemInDirection(items, 'center', direction)).toBe(expectedId)
+  })
+
+  test('returns the current id unchanged when nothing qualifies in that direction', () => {
+    const single = [{ id: 'only', x: 0, y: 0 }]
+    expect(findNearestItemInDirection(single, 'only', 'ArrowUp')).toBe('only')
+  })
+
+  test('returns currentId unchanged when the item list is empty', () => {
+    expect(findNearestItemInDirection([], 'anything', 'ArrowUp')).toBe('anything')
+  })
+
+  test('skips items with no screen coordinates', () => {
+    const withUnpositioned = [
+      { id: 'center', x: 0, y: 0 },
+      { id: 'no-coords' },
+      { id: 'up', x: 0, y: -10 }
+    ]
+    expect(findNearestItemInDirection(withUnpositioned, 'center', 'ArrowUp')).toBe('up')
+  })
+
+  test('returns currentId unchanged when no item has coordinates at all', () => {
+    const noneWithCoords = [{ id: 'a' }, { id: 'b' }]
+    expect(findNearestItemInDirection(noneWithCoords, 'a', 'ArrowUp')).toBe('a')
+  })
+
+  test('treats an unresolvable currentId as starting from the first positioned item', () => {
+    expect(findNearestItemInDirection(items, 'not-in-list', 'ArrowRight')).toBe('right')
+  })
+})
+
+// spatialNavigate's own contract guarantees a valid index in practice (see its own tests), so
+// this can't be reached through findNearestItemInDirection's real dependency — mocked here,
+// matching labels.test.js's identical fallback test for navigateToNextLabel, purely to prove
+// the defensive `?? currentId` itself degrades gracefully rather than crashing if that
+// guarantee were ever weakened.
+describe('findNearestItemInDirection — defensive fallback', () => {
+  afterEach(() => {
+    jest.dontMock('./spatialNavigate.js')
+    jest.resetModules()
+  })
+
+  test('falls back to currentId if spatialNavigate ever returns an out-of-range index', () => {
+    jest.resetModules()
+    jest.doMock('./spatialNavigate.js', () => ({ spatialNavigate: () => -1 }))
+    const { findNearestItemInDirection: fn } = require('./findNearestItemInDirection.js')
+    const items = [{ id: 'center', x: 0, y: 0 }, { id: 'up', x: 0, y: -10 }]
+    expect(fn(items, 'center', 'ArrowUp')).toBe('center')
+  })
+})

package/src/utils/globalAltShortcuts.js

@@ -0,0 +1,12 @@
+// Alt+<key> keyup combos useKeyboardShortcuts.js binds globally (see keyboardMappings.js's
+// `keyup` section) — a locally-focused context using the same combo must shadow it, or both
+// fire. Single source of truth so a new global mapping is a visible prompt to check for that.
+export const GLOBAL_ALT_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter'])
+
+// Call unconditionally from a local keyup handler while its scope is active — it only acts
+// when the key is actually shadowed, so it's safe to call regardless of which key was pressed.
+export const stopIfGlobalAltKey = (event) => {
+  if (event.altKey && GLOBAL_ALT_KEYS.has(event.key)) {
+    event.stopPropagation()
+  }
+}

package/src/utils/globalAltShortcuts.test.js

@@ -0,0 +1,27 @@
+import { GLOBAL_ALT_KEYS, stopIfGlobalAltKey } from './globalAltShortcuts.js'
+
+describe('GLOBAL_ALT_KEYS', () => {
+  test('lists the arrow keys and Enter — the combos keyboardMappings.js binds globally under Alt', () => {
+    expect([...GLOBAL_ALT_KEYS].sort()).toEqual(['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'Enter'].sort())
+  })
+})
+
+describe('stopIfGlobalAltKey', () => {
+  test.each(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter'])('stops propagation for Alt+%s', (key) => {
+    const event = { altKey: true, key, stopPropagation: jest.fn() }
+    stopIfGlobalAltKey(event)
+    expect(event.stopPropagation).toHaveBeenCalled()
+  })
+
+  test('leaves the same keys alone without Alt held', () => {
+    const event = { altKey: false, key: 'ArrowUp', stopPropagation: jest.fn() }
+    stopIfGlobalAltKey(event)
+    expect(event.stopPropagation).not.toHaveBeenCalled()
+  })
+
+  test('leaves an Alt+<other key> alone — nothing global uses this combo', () => {
+    const event = { altKey: true, key: 'i', stopPropagation: jest.fn() }
+    stopIfGlobalAltKey(event)
+    expect(event.stopPropagation).not.toHaveBeenCalled()
+  })
+})

package/src/utils/spatialNavigate.js

@@ -0,0 +1,49 @@
+/**
+ * Given a starting screen pixel and a set of candidate pixels, finds the index of the
+ * candidate that's nearest to `start` in the given cardinal direction — the shared primitive
+ * behind every directional "move to the next spatially-adjacent thing" interaction in this
+ * codebase (map label navigation, draw/edit vertex navigation, and the map features listbox).
+ *
+ * Candidates are first filtered to a ~90° cone centred on the pressed direction (whichever
+ * axis dominates the offset decides up/down vs left/right), then the nearest of those by
+ * Euclidean distance wins. If nothing falls in that cone, `start`'s own index in `pixels` is
+ * returned (a no-op move) rather than jumping somewhere the user didn't ask for.
+ *
+ * Previously duplicated (with subtly different tie-breaking/equality logic) between
+ * providers/maplibre/src/utils/spatial.js and plugins/draw/src/utils/spatial.js —
+ * consolidated here as the one canonical implementation both now import.
+ *
+ * @param {[number, number]} start - Current pixel [x, y].
+ * @param {Array<[number, number]>} pixels - All candidate pixels, including `start` itself.
+ * @param {'ArrowUp'|'ArrowDown'|'ArrowLeft'|'ArrowRight'|undefined} direction - undefined matches every candidate (nearest overall, any direction).
+ * @returns {number} Index into `pixels` of the chosen candidate.
+ */
+export const spatialNavigate = (start, pixels, direction) => {
+  const isSamePixel = (a, b) => a[0] === b[0] && a[1] === b[1]
+
+  const quadrant = pixels.filter((p) => {
+    const offsetX = Math.abs(p[0] - start[0])
+    const offsetY = Math.abs(p[1] - start[1])
+    let isQuadrant = false
+    if (direction === 'ArrowUp') {
+      isQuadrant = p[1] <= start[1] && offsetY >= offsetX
+    } else if (direction === 'ArrowDown') {
+      isQuadrant = p[1] > start[1] && offsetY >= offsetX
+    } else if (direction === 'ArrowLeft') {
+      isQuadrant = p[0] <= start[0] && offsetY < offsetX
+    } else if (direction === 'ArrowRight') {
+      isQuadrant = p[0] > start[0] && offsetY < offsetX
+    } else {
+      isQuadrant = true
+    }
+    return isQuadrant && !isSamePixel(p, start)
+  })
+
+  if (!quadrant.length) {
+    quadrant.push(start)
+  }
+
+  const distance = (p) => Math.hypot(start[0] - p[0], start[1] - p[1])
+  const closest = quadrant.reduce((best, p) => (distance(p) < distance(best) ? p : best), quadrant[0])
+  return pixels.findIndex((p) => isSamePixel(p, closest))
+}

package/src/utils/spatialNavigate.test.js

@@ -0,0 +1,42 @@
+import { spatialNavigate } from './spatialNavigate.js'
+
+describe('spatialNavigate', () => {
+  const start = [0, 0]
+  const pixels = [[0, 0], [0, -10], [0, 10], [-10, 0], [10, 0]]
+
+  test.each([
+    ['ArrowUp', 1],
+    ['ArrowDown', 2],
+    ['ArrowLeft', 3],
+    ['ArrowRight', 4]
+  ])('finds the nearest pixel for %s', (direction, expectedIndex) => {
+    expect(spatialNavigate(start, pixels, direction)).toBe(expectedIndex)
+  })
+
+  test('considers all pixels for an unrecognised direction', () => {
+    expect(spatialNavigate(start, pixels, 'Tab')).toBe(1)
+  })
+
+  test('considers all pixels when no direction is given (nearest overall)', () => {
+    expect(spatialNavigate(start, pixels, undefined)).toBe(1)
+  })
+
+  test('falls back to the start point when no pixel is in the quadrant', () => {
+    expect(spatialNavigate(start, [[0, 0]], 'ArrowUp')).toBe(0)
+  })
+
+  test('picks the closer of two candidates in the same direction', () => {
+    const pixels = [[0, 0], [10, 0], [2, 0]]
+    expect(spatialNavigate(start, pixels, 'ArrowRight')).toBe(2)
+  })
+
+  test('keeps the first-seen closer candidate rather than a later farther one', () => {
+    const pixels = [[0, 0], [2, 0], [10, 0]]
+    expect(spatialNavigate(start, pixels, 'ArrowRight')).toBe(1)
+  })
+
+  test('a diagonal candidate with dx > dy counts as ArrowRight, not ArrowUp/Down', () => {
+    const pixels = [[0, 0], [3, 1], [1, 0]]
+    expect(spatialNavigate(start, pixels, 'ArrowRight')).toBe(2)
+  })
+})

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

@@ -1,49 +0,0 @@
-import React, { forwardRef } from 'react'
-import { useConfig } from '../../store/configContext.js'
-
-export const Features = forwardRef(({ activeFeatureId, tabbableId, selectedIds = [], multiselectable = false, items = [], onFocus, onBlur, onSelectItem }, ref) => {
-  const { id } = useConfig()
-  const hasItems = items.length > 0
-  // Roving tabindex: exactly one option is a Tab stop at a time (the focused item while the
-  // list has real focus, otherwise the resting entry position) — see useFeatureFocus.js.
-  const currentId = activeFeatureId ?? tabbableId
-  return (
-    <ul // NOSONAR: role='listbox' is correct for custom composite widget; native <select> cannot host SVG marker elements
-      id={`${id}-features`}
-      ref={ref}
-      role='listbox' // NOSONAR
-      aria-hidden={hasItems ? undefined : true}
-      aria-label='Map features'
-      aria-describedby={`${id}-keyboard-desc`}
-      aria-multiselectable={multiselectable || undefined}
-      className='im-c-features'
-      onFocus={onFocus}
-      onBlur={onBlur}
-    >
-      {items.map(item => (
-        <li // NOSONAR: role='option' overrides implicit listitem; this is the correct ARIA listbox child pattern.
-          // tabIndex/onClick make each option a real, independently focusable and activatable
-          // control — required so touch screen readers and voice control can reach and operate
-          // it directly, not just app-managed keyboard-arrow navigation.
-          key={item.id} id={`${id}-feature-${item.id}`} role='option' // NOSONAR
-          data-id={item.id}
-          tabIndex={item.id === currentId ? 0 : -1}
-          aria-selected={selectedIds.includes(item.id)}
-          // Positions the (visually clipped) option over its on-map feature — item.x/item.y are
-          // screen coordinates from the interact plugin (see useMapItemList.js). Without this,
-          // every option collapses to the CSS static-position default (~top-left of the
-          // viewport), which is invisible to sighted users but misaligns coordinate-based AT
-          // overlays, e.g. macOS Voice Control's "Show Numbers", which numbers items at their
-          // real position on screen. Items without a resolved position (not yet supported for
-          // dataset/polygon features) fall back to that same default.
-          style={item.x != null ? { left: item.x, top: item.y } : undefined}
-          onClick={() => onSelectItem?.(item.id)}
-        >
-          {item.label}
-        </li>
-      ))}
-    </ul>
-  )
-})
-
-Features.displayName = 'Features'