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

package/src/App/components/{MoveControls/MoveControls.module.scss → MapControls/MapControls.module.scss}

@@ -1,63 +1,63 @@
 @use '../../../scss/tools/index' as tools;
 
 // ===================================================
-// Component: MoveControls
+// Component: MapControls
 // ===================================================
 
 // 1. Base styles
-.im-c-move-controls {
+.im-c-map-controls {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--divider-gap);
 }
 
-.im-c-move-controls.im-c-move-controls--collapsed {
+.im-c-map-controls.im-c-map-controls--collapsed {
     display: none;
 }
 
 // 2. Elements
-.im-c-move-controls__directions {
+.im-c-map-controls__directions {
     display: grid;
     grid-template-columns: repeat(3, var(--button-size));
     grid-template-rows: repeat(3, var(--button-size));
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-up {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-up {
     grid-column: 2;
     grid-row: 1;
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-left {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-left {
     grid-column: 1;
     grid-row: 2;
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-right {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-right {
     grid-column: 3;
     grid-row: 2;
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-down {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-down {
     grid-column: 2;
     grid-row: 3;
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--nudge-step-toggle {
+.im-c-map-controls__directions .im-c-button-wrapper--nudge-step-toggle {
     grid-column: 2;
     grid-row: 2;
     z-index: 1;
 }
 
-.im-c-move-controls__directions .im-c-map-button--pan-up svg {
+.im-c-map-controls__directions .im-c-map-button--pan-up svg {
     transform: rotate(180deg);
 }
 
-.im-c-move-controls__directions .im-c-map-button--pan-left svg {
+.im-c-map-controls__directions .im-c-map-button--pan-left svg {
     transform: rotate(90deg);
 }
 
-.im-c-move-controls__directions .im-c-map-button--pan-right svg {
+.im-c-map-controls__directions .im-c-map-button--pan-right svg {
     transform: rotate(-90deg);
 }
 
@@ -67,7 +67,7 @@
 // express a plus-shaped grid where the centre button touches all four neighbours —
 // clip-path is set directly per button instead, clipping only the side(s) where it
 // touches another button and leaving the exposed side(s) showing the shadow as normal.
-.im-c-move-controls__directions .im-c-button-wrapper--pan-up .im-c-map-button {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-up .im-c-map-button {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 
@@ -76,7 +76,7 @@
     }
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-left .im-c-map-button {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-left .im-c-map-button {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 
@@ -85,7 +85,7 @@
     }
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-right .im-c-map-button {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-right .im-c-map-button {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 
@@ -94,7 +94,7 @@
     }
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-down .im-c-map-button {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-down .im-c-map-button {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 
@@ -103,7 +103,7 @@
     }
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button {
+.im-c-map-controls__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button {
     border-radius: 0;
     outline: 1px solid var(--button-hover-color);
 
@@ -114,13 +114,13 @@
 
 // Same inverted "pressed" treatment already used for actions-slot toggle buttons
 // (e.g. draw's Snap toggle) — reused here so Nudge mode reads consistently active.
-.im-c-move-controls .im-c-map-button[aria-pressed="true"] {
+.im-c-map-controls .im-c-map-button[aria-pressed="true"] {
     color: var(--pressed-button-foreground-color);
     border-color: var(--pressed-button-border-color);
     background-color: var(--pressed-button-background-color);
 }
 
-// The trigger lives in the right-top slot, outside .im-c-move-controls, so this is
+// The trigger lives in the right-top slot, outside .im-c-map-controls, so this is
 // its own top-level rule. Same colour treatment as above, but keyed off
 // aria-expanded rather than aria-pressed — the trigger is correctly a disclosure
 // button (it reveals the control below), not a toggle button, so it doesn't carry
@@ -132,31 +132,31 @@
 // hovering the expanded trigger button was a coin-flip decided by cascade order —
 // one cssnano mergeRules reshuffle in production and hover started winning,
 // showing the hover tint instead of the pressed colours. The sibling
-// .im-c-move-controls .im-c-map-button[aria-pressed="true"] rule above never had
+// .im-c-map-controls .im-c-map-button[aria-pressed="true"] rule above never had
 // this problem (it's already (0,3,0), safely ahead of hover); this one needed the
 // same headroom.
-.im-c-map-button.im-c-map-button--move-controls[aria-expanded="true"] {
+.im-c-map-button.im-c-map-button--map-controls[aria-expanded="true"] {
     color: var(--pressed-button-foreground-color);
     border-color: var(--pressed-button-border-color);
     background-color: var(--pressed-button-background-color);
 }
 
-.im-c-move-controls__zoom {
+.im-c-map-controls__zoom {
     display: flex;
     flex-direction: row;
 }
 
 // A simple two-item linear row, so the standard button-group corner/shadow treatment
 // applies directly (matches .im-o-app__top's first/last-child pattern).
-.im-c-move-controls__zoom .im-c-button-wrapper--nudge-zoom-in .im-c-map-button {
+.im-c-map-controls__zoom .im-c-button-wrapper--nudge-zoom-in .im-c-map-button {
     @include tools.border-focus-corner-override($corners: 'left');
 }
 
-.im-c-move-controls__zoom .im-c-button-wrapper--nudge-zoom-out .im-c-map-button {
+.im-c-map-controls__zoom .im-c-button-wrapper--nudge-zoom-out .im-c-map-button {
     @include tools.border-focus-corner-override($corners: 'right');
 }
 
 // App dark modifiers
-.im-o-app--dark-app .im-c-move-controls__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button {
+.im-o-app--dark-app .im-c-map-controls__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button {
     outline-offset: -1px;
 }

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.jsx

@@ -3,7 +3,7 @@ import { stringToKebab } from '../../../utils/stringToKebab.js'
 const SymbolMarker = ({ marker, mapId, markerRef, isSelected, symbolProps }) => { // NOSONAR: project does not use PropTypes
   const { resolvedSvg, viewBox, anchor, shapeId, scaledWidth, scaledHeight } = symbolProps
   return (
-    <svg // NOSONAR: role='img' with aria-label is the correct ARIA pattern for SVG icons; <img> is not appropriate here
+    <svg
       ref={markerRef(marker.id)}
       id={`${mapId}-marker-${marker.id}`}
       className={[
@@ -15,8 +15,7 @@ const SymbolMarker = ({ marker, mapId, markerRef, isSelected, symbolProps }) =>
       height={scaledHeight}
       viewBox={viewBox}
       overflow='visible'
-      role='img'
-      aria-label={marker.label || 'Map marker'}
+      aria-hidden='true'
       style={{
         display: marker.isVisible ? 'block' : 'none',
         marginLeft: `${-anchor[0] * scaledWidth}px`,

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

@@ -19,19 +19,18 @@ describe('SymbolMarker', () => {
     expect(container.querySelector('svg').getAttribute('id')).toBe('my-map-marker-marker-1')
   })
 
-  it('has role img', () => {
+  // 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('role')).toBe('img')
+    expect(container.querySelector('svg').getAttribute('aria-hidden')).toBe('true')
   })
 
-  it('aria-label uses marker.label', () => {
+  it('has no role or aria-label, regardless of marker.label', () => {
     const { container } = render(<SymbolMarker marker={makeMarker({ label: 'My location' })} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
-    expect(container.querySelector('svg').getAttribute('aria-label')).toBe('My location')
-  })
-
-  it('aria-label falls back to Map marker when no label', () => {
-    const { container } = render(<SymbolMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
-    expect(container.querySelector('svg').getAttribute('aria-label')).toBe('Map marker')
+    const svg = container.querySelector('svg')
+    expect(svg.getAttribute('role')).toBeNull()
+    expect(svg.getAttribute('aria-label')).toBeNull()
   })
 
   it('applies shapeId class', () => {