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

package/providers/maplibre/src/utils/labels.test.js

@@ -5,10 +5,10 @@ import {
   navigateToNextLabel, createMapLabelNavigator
 } from './labels.js'
 
-import { spatialNavigate } from './spatial.js'
+import { spatialNavigate } from '../../../../src/utils/spatialNavigate.js'
 import { calculateLinearTextSize } from './calculateLinearTextSize.js'
 
-jest.mock('./spatial.js', () => ({ spatialNavigate: jest.fn() }))
+jest.mock('../../../../src/utils/spatialNavigate.js', () => ({ spatialNavigate: jest.fn() }))
 jest.mock('./calculateLinearTextSize.js', () => ({ calculateLinearTextSize: jest.fn(() => 12) }))
 
 describe('labels utils', () => {
@@ -183,7 +183,7 @@ describe('labels utils', () => {
       expect(nav.highlightNextLabel('ArrowRight')).toBeNull()
 
       // Zoom handler: no active highlight → no-op
-      const zoomHandler = map.on.mock.calls.find(([e]) => e === 'zoom')[1]
+      const zoomHandler = map.on.mock.calls.find(([eventName]) => eventName === 'zoom')[1]
       map.setLayoutProperty.mockClear()
       zoomHandler()
       expect(map.setLayoutProperty).not.toHaveBeenCalled()
@@ -222,10 +222,10 @@ describe('labels utils', () => {
       // Fire MAP_SET_STYLE → styledata → idle → setLineCenterPlacement + initLabelSource
       const styleHandler = eventBus.on.mock.calls[0][1]
       styleHandler({ mapColorScheme: 'dark' })
-      const styleDataHandler = map.once.mock.calls.find(([e]) => e === 'styledata')[1]
+      const styleDataHandler = map.once.mock.calls.find(([eventName]) => eventName === 'styledata')[1]
       styleDataHandler()
       map.setLayoutProperty.mockClear()
-      const idleHandler = map.once.mock.calls.find(([e]) => e === 'idle')[1]
+      const idleHandler = map.once.mock.calls.find(([eventName]) => eventName === 'idle')[1]
       idleHandler()
       expect(map.setLayoutProperty).toHaveBeenCalledWith('s1', 'symbol-placement', 'line-center')
     })

package/providers/maplibre/src/utils/spatial.js

@@ -106,62 +106,6 @@ const getCardinalMove = (from, to) => {
   return moves.join(', ')
 }
 
-/**
- * Find the index of the nearest pixel in a given cardinal direction.
- *
- * The function:
- * - Filters candidate points that lie in the specified direction
- *   (up, down, left, right) relative to a start pixel.
- * - Selects the nearest valid candidate using Euclidean distance.
- * - Falls back to returning the start pixel index if no candidate exists.
- *
- * Example:
- *   spatialNavigate('up', [100, 200], [[100, 100], [150, 250], [90, 180]])
- *   → returns the index of [100, 100]
- *
- * @param {'ArrowUp'|'ArrowDown'|'ArrowLeft'|'ArrowRight'} direction - The direction to search.
- * @param {[number, number]} start - The starting pixel coordinate [x, y].
- * @param {Array<[number, number]>} pixels - Array of pixel coordinates.
- * @returns {number} Index of the closest pixel in the given direction.
- */
-const isInDirection = (direction, dx, dy) => {
-  switch (direction) {
-    case 'ArrowUp': return dy < 0 && Math.abs(dy) >= Math.abs(dx)
-    case 'ArrowDown': return dy > 0 && Math.abs(dy) >= Math.abs(dx)
-    case 'ArrowLeft': return dx < 0 && Math.abs(dx) > Math.abs(dy)
-    case 'ArrowRight': return dx > 0 && Math.abs(dx) > Math.abs(dy)
-    default: return false
-  }
-}
-
-const spatialNavigate = (direction, start, pixels) => {
-  const [sx, sy] = start
-
-  // Direction filters
-  const candidates = pixels.filter(([x, y]) =>
-    (x !== sx || y !== sy) && isInDirection(direction, x - sx, y - sy)
-  )
-
-  if (!candidates.length) {
-    return pixels.findIndex(p => p[0] === sx && p[1] === sy)
-  }
-
-  // Choose the closest by Euclidean distance
-  let closestIndex = -1
-  let minDist = Infinity
-  candidates.forEach(c => {
-    const dx = c[0] - sx
-    const dy = c[1] - sy
-    const dist = dx * dx + dy * dy // squared distance is enough
-    if (dist < minDist) {
-      minDist = dist
-      closestIndex = pixels.indexOf(c)
-    }
-  })
-
-  return closestIndex
-}
-
 const getResolution = (center, zoom) => {
   const EARTH_CIRCUMFERENCE = 40075016.686
   const TILE_SIZE = 512
@@ -239,7 +183,6 @@ export {
   getCardinalMove,
   getBboxFromGeoJSON,
   isGeometryObscured,
-  spatialNavigate,
   getResolution,
   getPaddedBounds,
   formatDimension

package/providers/maplibre/src/utils/spatial.test.js

@@ -50,33 +50,6 @@ describe('spatial utils', () => {
     expect(spatial.getCardinalMove([0, 0], [0.00001, 0.00001])).toBe('')
   })
 
-  test('spatialNavigate all directions and fallback', () => {
-    const pixels = [[0, 0], [0, -1], [1, 0], [0, 1], [-1, 0]]
-    expect(spatial.spatialNavigate('ArrowUp', [0, 0], pixels)).toBe(1)
-    expect(spatial.spatialNavigate('ArrowDown', [0, 0], pixels)).toBe(3)
-    expect(spatial.spatialNavigate('ArrowLeft', [0, 0], pixels)).toBe(4)
-    expect(spatial.spatialNavigate('ArrowRight', [0, 0], pixels)).toBe(2)
-    expect(spatial.spatialNavigate('InvalidDir', [0, 0], pixels)).toBe(0)
-  })
-
-  test('spatialNavigate finds closer candidates (hits dist < minDist)', () => {
-    const start = [0, 0]
-    const pixels = [[0, 0], [10, 0], [2, 0]]
-    expect(spatial.spatialNavigate('ArrowRight', start, pixels)).toBe(2)
-  })
-
-  test('spatialNavigate skips farther candidate (dist >= minDist false branch)', () => {
-    // Closer candidate first → second candidate fails dist < minDist
-    const pixels = [[0, 0], [2, 0], [10, 0]]
-    expect(spatial.spatialNavigate('ArrowRight', [0, 0], pixels)).toBe(1)
-  })
-
-  test('spatialNavigate diagonal with dx>dy', () => {
-    const start = [0, 0]
-    const pixels = [[0, 0], [3, 1], [1, 0]] // dx>dy
-    expect(spatial.spatialNavigate('ArrowRight', start, pixels)).toBe(2)
-  })
-
   test('getResolution returns positive value', () => {
     expect(spatial.getResolution({ lat: 0 }, 1)).toBeGreaterThan(0)
   })

package/src/App/components/CrossHair/CrossHair.jsx

@@ -21,6 +21,13 @@ export const CrossHair = () => {
       ref={crossHairRef}
       id={`${id}-cross-hair`}
       className='im-c-cross-hair-button'
+      // "Target" — short for Voice Control to say ("Click Target"). A plain attribute, not a
+      // hidden child <span>, so there's no separate text node for Chrome's AX tree to expose.
+      aria-label='Target'
+      // This button should never take real DOM focus — a screen reader's virtual cursor and
+      // Voice Control can both reach it without that, and real focus landing here would break
+      // keyboard drawing (which requires focus to stay on the viewport container).
+      onMouseDown={(event) => event.preventDefault()}
       onClick={() => crossHair.activate?.()}
       style={{
         position: 'absolute',
@@ -29,19 +36,18 @@ export const CrossHair = () => {
         display: isVisible ? 'block' : 'none'
       }}
     >
+      {/* aria-hidden: without it, WebKit exposes the <path> as its own accessibility node, and
+          Voice Control activates that instead of bubbling a click up to this button. */}
       <svg
         width='38'
         height='38'
         viewBox='0 0 38 38'
         fillRule='evenodd'
         fill='currentColor'
+        aria-hidden='true'
       >
         <path d={paths[state || 'active']} />
       </svg>
-      {/* "Target" — shorter and easier for Voice Control users to say than "Cross hair"
-          ("Click Target"); a general-purpose map is unlikely to already have a feature/marker
-          named "Target" that this would collide with. */}
-      <span className='im-u-visually-hidden'>Target</span>
     </button>
   )
 }

package/src/App/components/CrossHair/CrossHair.module.scss

@@ -1,10 +1,12 @@
-// The crosshair is wrapped in a real <button> (tabIndex="-1") so it's a genuine, accessibility-
-// focusable target for coordinate-based AT (e.g. macOS Voice Control's Show Numbers/Names) —
-// see CrossHair.jsx — without being a Tab stop.
+// A real <button> (tabIndex="-1") so it's a discoverable target for AT (Voice Control, a screen
+// reader's virtual cursor) without being a Tab stop or ever taking real DOM focus.
 .im-c-cross-hair-button {
-  // Reset native chrome to zero: default padding/border/background otherwise shift and
-  // decorate the crosshair icon, since position/margin below assumes the content-box starts
-  // exactly at the border-box edge.
+  // Its ancestor (.im-c-viewport__safezone) is pointer-events:none, so this has to opt back in
+  // itself or clicks here pass straight through to the map canvas underneath.
+  pointer-events: auto;
+
+  // Reset native chrome to zero — position/margin below assumes the content-box starts exactly
+  // at the border-box edge.
   appearance: none;
   border: 0;
   background: none;
@@ -12,18 +14,20 @@
   font: inherit;
   cursor: inherit;
 
-  // Explicit size, matching the SVG's own width/height, plus the negative margin that shifts
-  // the box by half its own size — so the button's *own* geometry, not just its child SVG's, is
-  // centred on wherever CrossHair.jsx's inline top/left positions it. This is what a coordinate-
-  // based AT overlay (e.g. Voice Control) reads to place its badge — without it, the button's
-  // content-box collapses to 0×0 (its only child is position:absolute, contributing nothing to
-  // normal-flow sizing), so the badge would land at the anchor point's corner, not on the icon.
+  // Explicit size plus the negative margin centre the button's own geometry (not just its SVG
+  // child's) on wherever CrossHair.jsx's inline top/left positions it — without it, an AT
+  // overlay's badge would land at the anchor point's corner, not on the icon.
   width: 38px;
   height: 38px;
   margin: -19px 0 0 -19px;
 
+  outline: 3px solid transparent;
+
   svg {
     display: block;
+    // Purely decorative (aria-hidden in CrossHair.jsx) — without this it's still its own
+    // hit-testable target, so a click could resolve to the icon instead of the button.
+    pointer-events: none;
   }
 
   path {

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

@@ -9,9 +9,8 @@ jest.mock('../../store/configContext', () => ({ useConfig: jest.fn(() => ({ id:
 describe('CrossHair', () => {
   const crossHairRef = React.createRef()
 
-  // Positioning/visibility/sizing all live on the outer <button> (tabIndex="-1" — a real,
-  // accessibility-focusable-but-not-Tab-stop element, so coordinate-based AT like Voice Control
-  // can find it, at the right geometry); the SVG itself is a plain, unstyled child.
+  // Positioning/visibility/sizing all live on the outer <button> (tabIndex="-1", discoverable
+  // by AT like Voice Control without being a Tab stop); the SVG itself is a plain, unstyled child.
   const renderWith = (overrides = {}) => {
     useCrossHair.mockReturnValue({
       crossHairRef,
@@ -51,7 +50,7 @@ describe('CrossHair', () => {
 
   // Fully removed from the layout/accessibility tree when hidden, not just faded — so Voice
   // Control's Show Names never puts a "Target" label over nothing. Its real route back is
-  // opening MoveControls (a normal, always-visible button), not re-discovering this element.
+  // opening MapControls (a normal, always-visible button), not re-discovering this element.
   it('hides marker when not visible', () => {
     const { button } = renderWith({ isVisible: false })
     expect(button).toHaveStyle({ display: 'none' })
@@ -69,6 +68,12 @@ describe('CrossHair', () => {
     expect(() => fireEvent.click(button)).not.toThrow()
   })
 
+  it('prevents the default mousedown so a real click never gives it focus (or the resulting outline)', () => {
+    const { button } = renderWith()
+    const event = fireEvent.mouseDown(button)
+    expect(event).toBe(false) // fireEvent returns false when preventDefault() was called
+  })
+
   it('is not a Tab stop, but is a real button for coordinate-based AT (e.g. Voice Control) to find', () => {
     const { button } = renderWith()
     expect(button.tabIndex).toBe(-1)

package/src/App/components/Hints/Hints.jsx

@@ -17,7 +17,7 @@ import { htmlToPlainText } from '../../../utils/htmlToPlainText.js'
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
 export const Hints = () => {
-  const { id, keyboardHintText, enableMoveControls, moveControlsHintText } = useConfig()
+  const { id, keyboardHintText, enableMapControls, mapControlsHintText } = useConfig()
   const { hints } = useService()
   const { layoutRefs } = useApp()
   const [activeHint, setActiveHint] = useState(null)
@@ -33,8 +33,8 @@ export const Hints = () => {
   }
 
   // Composed at render time so overriding one text doesn't drop the other.
-  const keyboardDescriptionHtml = enableMoveControls
-    ? `${keyboardHintText} ${moveControlsHintText}`
+  const keyboardDescriptionHtml = enableMapControls
+    ? `${keyboardHintText} ${mapControlsHintText}`
     : keyboardHintText
 
   return createPortal(

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

@@ -52,13 +52,13 @@ describe('Hints — rendering', () => {
     expect(desc.innerHTML).toBe('Shift + ?')
   })
 
-  it('appends the move-controls hint text when enableMoveControls is true', () => {
+  it('appends the map-controls hint text when enableMapControls is true', () => {
     const mainEl = setup()
     useConfig.mockReturnValue({
       id: 'test-map',
       keyboardHintText: '<kbd>Shift</kbd> + <kbd>?</kbd>',
-      enableMoveControls: true,
-      moveControlsHintText: '<kbd>Arrow keys</kbd> to move'
+      enableMapControls: true,
+      mapControlsHintText: '<kbd>Arrow keys</kbd> to move'
     })
     render(<Hints />)
     const desc = mainEl.querySelector('#test-map-keyboard-desc')

package/src/App/components/MapButton/MapButton.module.scss

@@ -30,8 +30,7 @@
     justify-content: center;
     align-items: center;
 
-    padding-left: var(--button-padding);
-    padding-right: var(--button-padding);
+    padding: 0 var(--button-padding) 0 var(--button-padding);
 
     pointer-events: auto;
     color: var(--foreground-color);

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

@@ -18,13 +18,13 @@ const ZOOM_ACTIONS = [
   { id: 'nudgeZoomOut', label: 'Zoom out', announceLabel: 'Zoomed out', method: 'zoomOut' }
 ]
 
-export const MoveControls = () => {
+export const MapControls = () => {
   const { id: appId, mapProvider, panDelta, nudgePanDelta, zoomDelta, nudgeZoomDelta } = useConfig()
   const { dispatch, expandedButtons, nudgeStepSize, interfaceType, layoutRefs } = useApp()
   const { isAtMaxZoom, isAtMinZoom } = useMap()
   const { announce } = useService()
 
-  const isOpen = expandedButtons.has('moveControls')
+  const isOpen = expandedButtons.has('mapControls')
   const firstDirectionButtonId = `${appId}-pan-up`
 
   useEffect(() => {
@@ -41,7 +41,7 @@ export const MoveControls = () => {
   // Registry buttons (declared via a plugin's manifest) auto-return focus to the map
   // viewport after a click (see createButtonClickHandler in mapButtons.js) unless
   // marked keepFocus — which is how e.g. draw's own toolbar buttons never leave
-  // keyboard shortcuts (like arrow-key vertex nudging) stranded afterward. MoveControls
+  // keyboard shortcuts (like arrow-key vertex nudging) stranded afterward. MapControls
   // renders its own buttons directly, bypassing that mechanism entirely, so it has to
   // replicate the same return-to-viewport behaviour itself. But unlike a one-off
   // action button, the D-pad is meant to be pressed repeatedly — a keyboard/switch
@@ -70,7 +70,7 @@ export const MoveControls = () => {
 
     // Any plugin can claim the D-pad for something other than panning the map (e.g.
     // moving a selected draw vertex) by setting mapProvider.activeMoveTarget — a
-    // generic { move(dx, dy, isLargeStep), label? } contract. MoveControls doesn't
+    // generic { move(dx, dy, isLargeStep), label? } contract. MapControls doesn't
     // know or care what's claiming it; it just checks for a claimant before
     // defaulting to its own panBy behaviour. Read fresh on every click rather than
     // subscribed to reactively, since it's a plain mapProvider property, not state.
@@ -107,7 +107,7 @@ export const MoveControls = () => {
   // first tabbing all the way back to the map. Handling arrow keys here — while
   // focus is anywhere within this control, not just on a direction button — covers
   // that directly, without needing draw's (or the app's own) keyboard-shortcut
-  // guards to special-case MoveControls' buttons. Only arrow keys are handled;
+  // guards to special-case MapControls' buttons. Only arrow keys are handled;
   // other shortcuts (delete/escape/undo) still require focus on the viewport,
   // which mouse/touch users already get back automatically after any click here.
   const handleContainerKeyDown = (e) => {
@@ -120,12 +120,12 @@ export const MoveControls = () => {
   }
 
   const containerClassName = [
-    'im-c-move-controls',
-    !isOpen && 'im-c-move-controls--collapsed'
+    'im-c-map-controls',
+    !isOpen && 'im-c-map-controls--collapsed'
   ].filter(Boolean).join(' ')
 
   const directionsGroup = (
-    <div key='directions' role='group' aria-label='Direction controls' className='im-c-move-controls__directions'>{/* NOSONAR - div with role="group" is correct for a button group */}
+    <div key='directions' role='group' aria-label='Direction controls' className='im-c-map-controls__directions'>{/* NOSONAR - div with role="group" is correct for a button group */}
       {DIRECTIONS.map(({ id, verb, dx, dy }) => (
         <MapButton
           key={id}
@@ -154,7 +154,7 @@ export const MoveControls = () => {
   )
 
   const zoomGroup = (
-    <div key='zoom' role='group' aria-label='Zoom controls' className='im-c-move-controls__zoom'>{/* NOSONAR - div with role="group" is correct for a button group */}
+    <div key='zoom' role='group' aria-label='Zoom controls' className='im-c-map-controls__zoom'>{/* NOSONAR - div with role="group" is correct for a button group */}
       {ZOOM_ACTIONS.map(({ id, label, announceLabel, method }) => (
         <MapButton
           key={id}
@@ -169,7 +169,7 @@ export const MoveControls = () => {
   )
 
   return (
-    <div id={`${appId}-move-controls-content`} className={containerClassName} onKeyDown={handleContainerKeyDown} data-map-keyboard-scope>{/* NOSONAR - only catches arrow-key bubbling from the real, already-focusable button descendants below; the div itself needs no role/tabIndex */}
+    <div id={`${appId}-map-controls-content`} className={containerClassName} onKeyDown={handleContainerKeyDown} data-map-keyboard-scope>{/* NOSONAR - only catches arrow-key bubbling from the real, already-focusable button descendants below; the div itself needs no role/tabIndex */}
       {directionsGroup}
       {zoomGroup}
     </div>

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;
 }