@defra/interactive-map 0.0.35-alpha → 0.0.37-alpha

package/src/App/components/MoveControl/MoveControl.jsx

@@ -0,0 +1,113 @@
+import React, { useEffect } from 'react'
+import { MapButton } from '../MapButton/MapButton.jsx'
+import { useApp } from '../../store/appContext.js'
+import { useConfig } from '../../store/configContext.js'
+import { useMap } from '../../store/mapContext.js'
+import { useService } from '../../store/serviceContext.js'
+import { resolveStepAmount } from '../../../utils/resolveNudgeStep.js'
+
+const DIRECTIONS = [
+  { id: 'panUp', verb: 'up', dx: 0, dy: -1 },
+  { id: 'panDown', verb: 'down', dx: 0, dy: 1 },
+  { id: 'panLeft', verb: 'left', dx: -1, dy: 0 },
+  { id: 'panRight', verb: 'right', dx: 1, dy: 0 }
+]
+
+const ZOOM_ACTIONS = [
+  { id: 'nudgeZoomIn', label: 'Zoom in', announceLabel: 'Zoomed in', method: 'zoomIn' },
+  { id: 'nudgeZoomOut', label: 'Zoom out', announceLabel: 'Zoomed out', method: 'zoomOut' }
+]
+
+export const MoveControl = () => {
+  const { id: appId, mapProvider, panDelta, nudgePanDelta, zoomDelta, nudgeZoomDelta } = useConfig()
+  const { dispatch, expandedButtons, nudgeStepSize } = useApp()
+  const { isAtMaxZoom, isAtMinZoom } = useMap()
+  const { announce } = useService()
+
+  const isOpen = expandedButtons.has('moveControl')
+  const firstDirectionButtonId = `${appId}-pan-up`
+
+  useEffect(() => {
+    if (isOpen) {
+      document.getElementById(firstDirectionButtonId)?.focus()
+    }
+  }, [isOpen, firstDirectionButtonId])
+
+  const isLargeStep = nudgeStepSize === 'large'
+  // Matches the draw plugin's existing "Move point" (default)/"Nudge point" (Shift, small)
+  // keyboard-shortcut vocabulary, so the label always describes the step size in effect.
+  const actionWord = isLargeStep ? 'Move' : 'Nudge'
+
+  const handlePan = (dx, dy, verb) => {
+    const amount = resolveStepAmount(isLargeStep, nudgePanDelta, panDelta)
+    mapProvider.panBy([dx * amount, dy * amount])
+    announce(`${actionWord}d ${verb}`)
+  }
+
+  const handleZoom = (method, label) => {
+    const amount = resolveStepAmount(isLargeStep, nudgeZoomDelta, zoomDelta)
+    mapProvider[method](amount)
+    announce(label)
+  }
+
+  const handleToggleStep = () => {
+    dispatch({ type: 'TOGGLE_NUDGE_STEP' })
+    announce(isLargeStep ? 'Precision on' : 'Precision off')
+  }
+
+  const containerClassName = [
+    'im-c-move-control',
+    !isOpen && 'im-c-move-control--collapsed'
+  ].filter(Boolean).join(' ')
+
+  const directionsGroup = (
+    <div key='directions' role='group' aria-label='Direction controls' className='im-c-move-control__directions'>{/* NOSONAR - div with role="group" is correct for a button group */}
+      {DIRECTIONS.map(({ id, verb, dx, dy }) => (
+        <MapButton
+          key={id}
+          buttonId={id}
+          label={`${actionWord} ${verb}`}
+          iconId='chevron'
+          onClick={() => handlePan(dx, dy, verb)}
+        />
+      ))}
+
+      {/* Stable accessible name regardless of state (WAI-ARIA toggle-button pattern) —
+          aria-pressed alone conveys state to assistive tech. The (On)/(Off) suffix is
+          aria-hidden so it's excluded from the computed name (avoiding a duplicate
+          announcement alongside aria-pressed) but still visible in the tooltip for
+          sighted users. The icon itself is a decorative refinement of the same shape
+          (longer ticks + a centre dot when active), not a different icon/concept, so
+          it doesn't carry any of the meaning aria-pressed already conveys on its own. */}
+      <MapButton
+        buttonId='nudgeStepToggle'
+        label={<>Precision <span aria-hidden='true'>({isLargeStep ? 'Off' : 'On'})</span></>}
+        iconId={isLargeStep ? 'precision' : 'precision-active'}
+        isPressed={!isLargeStep}
+        onClick={handleToggleStep}
+      />
+    </div>
+  )
+
+  const zoomGroup = (
+    <div key='zoom' role='group' aria-label='Zoom controls' className='im-c-move-control__zoom'>{/* NOSONAR - div with role="group" is correct for a button group */}
+      {ZOOM_ACTIONS.map(({ id, label, announceLabel, method }) => (
+        <MapButton
+          key={id}
+          buttonId={id}
+          label={label}
+          iconId={method === 'zoomIn' ? 'plus' : 'minus'}
+          isDisabled={method === 'zoomIn' ? isAtMaxZoom : isAtMinZoom}
+          onClick={() => handleZoom(method, announceLabel)}
+        />
+      ))}
+    </div>
+  )
+
+  return (
+    <div id={`${appId}-move-control-content`} className={containerClassName}>
+      {directionsGroup}
+      {zoomGroup}
+    </div>
+  )
+}

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

@@ -0,0 +1,121 @@
+@use '../../../scss/tools/index' as tools;
+
+// ===================================================
+// Component: MoveControl
+// ===================================================
+
+// 1. Base styles
+.im-c-move-control {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--divider-gap);
+}
+
+.im-c-move-control--collapsed {
+    display: none;
+}
+
+// 2. Elements
+.im-c-move-control__directions {
+    display: grid;
+    grid-template-columns: repeat(3, var(--button-size));
+    grid-template-rows: repeat(3, var(--button-size));
+}
+
+.im-c-move-control__directions .im-c-button-wrapper--pan-up {
+    grid-column: 2;
+    grid-row: 1;
+}
+
+.im-c-move-control__directions .im-c-button-wrapper--pan-left {
+    grid-column: 1;
+    grid-row: 2;
+}
+
+.im-c-move-control__directions .im-c-button-wrapper--pan-right {
+    grid-column: 3;
+    grid-row: 2;
+}
+
+.im-c-move-control__directions .im-c-button-wrapper--pan-down {
+    grid-column: 2;
+    grid-row: 3;
+}
+
+.im-c-move-control__directions .im-c-button-wrapper--nudge-step-toggle {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+.im-c-move-control__directions .im-c-map-button--pan-up svg {
+    transform: rotate(180deg);
+}
+
+.im-c-move-control__directions .im-c-map-button--pan-left svg {
+    transform: rotate(90deg);
+}
+
+.im-c-move-control__directions .im-c-map-button--pan-right svg {
+    transform: rotate(-90deg);
+}
+
+// Each button's own drop shadow (tools.border-focus-base's ::before) otherwise bleeds
+// into whichever neighbour it butts up against. The standard button-group treatment
+// (border-focus-corner-override) only handles a single-axis linear strip, so it can't
+// 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-control__directions .im-c-button-wrapper--pan-up .im-c-map-button::before {
+    clip-path: inset(-20px -20px 0 -20px); // touches nudge-step-toggle below
+}
+
+.im-c-move-control__directions .im-c-button-wrapper--pan-left .im-c-map-button::before {
+    clip-path: inset(-20px 0 -20px -20px); // touches nudge-step-toggle to the right
+}
+
+.im-c-move-control__directions .im-c-button-wrapper--pan-right .im-c-map-button::before {
+    clip-path: inset(-20px -20px -20px 0); // touches nudge-step-toggle to the left
+}
+
+.im-c-move-control__directions .im-c-button-wrapper--pan-down .im-c-map-button::before {
+    clip-path: inset(0 -20px -20px -20px); // touches nudge-step-toggle above
+}
+
+.im-c-move-control__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button::before {
+    clip-path: inset(0); // touches all four neighbours
+}
+
+// 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-control .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-control, 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
+// aria-pressed itself; the colour is purely a visual echo of its expanded state.
+.im-c-map-button--move-control[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-control__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-control__zoom .im-c-button-wrapper--nudge-zoom-in .im-c-map-button {
+    @include tools.border-focus-corner-override($corners: 'left');
+}
+
+.im-c-move-control__zoom .im-c-button-wrapper--nudge-zoom-out .im-c-map-button {
+    @include tools.border-focus-corner-override($corners: 'right');
+}

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

@@ -0,0 +1,196 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { MoveControl } from './MoveControl.jsx'
+import { useApp } from '../../store/appContext.js'
+import { useConfig } from '../../store/configContext.js'
+import { useMap } from '../../store/mapContext.js'
+import { useService } from '../../store/serviceContext.js'
+
+jest.mock('../../store/appContext.js', () => ({ useApp: jest.fn() }))
+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('MoveControl', () => {
+  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 MoveControl itself reads.
+  const buildAppState = (overrides) => ({
+    buttonRefs: { current: {} },
+    interfaceType: 'mouse',
+    breakpoint: 'desktop',
+    dispatch,
+    expandedButtons: new Set(['moveControl']),
+    nudgeStepSize: 'large',
+    ...overrides
+  })
+
+  beforeEach(() => {
+    dispatch = jest.fn()
+    mapProvider = { panBy: jest.fn(), zoomIn: jest.fn(), zoomOut: jest.fn() }
+    announce = jest.fn()
+
+    useConfig.mockReturnValue({
+      id: 'im',
+      mapProvider,
+      panDelta: 100,
+      nudgePanDelta: 5,
+      zoomDelta: 1,
+      nudgeZoomDelta: 0.1
+    })
+    useApp.mockReturnValue(buildAppState())
+    useMap.mockReturnValue({ isAtMaxZoom: false, isAtMinZoom: false })
+    useService.mockReturnValue({ announce })
+  })
+
+  afterEach(() => jest.clearAllMocks())
+
+  it('renders with the id matching the trigger button aria-controls value', () => {
+    const { container } = render(<MoveControl />)
+    expect(container.querySelector('#im-move-control-content')).toBeInTheDocument()
+  })
+
+  it('is not visually collapsed when moveControl is expanded', () => {
+    const { container } = render(<MoveControl />)
+    expect(container.querySelector('.im-c-move-control--collapsed')).not.toBeInTheDocument()
+  })
+
+  it('moves focus to the first direction button when the control opens', () => {
+    const { rerender } = render(<MoveControl />)
+    useApp.mockReturnValue(buildAppState({ expandedButtons: new Set() }))
+    rerender(<MoveControl />)
+
+    useApp.mockReturnValue(buildAppState({ expandedButtons: new Set(['moveControl']) }))
+    rerender(<MoveControl />)
+    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(<MoveControl />)
+      const groups = container.querySelectorAll('[role="group"]')
+      expect(groups[0]).toHaveAttribute('aria-label', 'Direction controls')
+      expect(groups[1]).toHaveAttribute('aria-label', 'Zoom controls')
+      unmount()
+    })
+  })
+
+  it('is collapsed when moveControl is not expanded', () => {
+    useApp.mockReturnValue(buildAppState({ expandedButtons: new Set() }))
+    const { container } = render(<MoveControl />)
+    expect(container.querySelector('.im-c-move-control--collapsed')).toBeInTheDocument()
+  })
+
+  it('labels direction buttons "Move" and pans by the large delta by default', () => {
+    render(<MoveControl />)
+    fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
+    expect(mapProvider.panBy).toHaveBeenCalledWith([100, 0])
+    expect(announce).toHaveBeenCalledWith('Moved right')
+  })
+
+  it('labels direction buttons "Nudge" and pans by the small delta when nudgeStepSize is small', () => {
+    useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
+    render(<MoveControl />)
+    fireEvent.click(screen.getByRole('button', { name: 'Nudge up' }))
+    expect(mapProvider.panBy).toHaveBeenCalledWith([0, -5])
+    expect(announce).toHaveBeenCalledWith('Nudged up')
+  })
+
+  it('zooms in and out by the large delta by default and announces the action', () => {
+    render(<MoveControl />)
+    fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
+    expect(mapProvider.zoomIn).toHaveBeenCalledWith(1)
+    expect(announce).toHaveBeenCalledWith('Zoomed in')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Zoom out' }))
+    expect(mapProvider.zoomOut).toHaveBeenCalledWith(1)
+    expect(announce).toHaveBeenCalledWith('Zoomed out')
+  })
+
+  it('zooms by the small delta when nudgeStepSize is small', () => {
+    useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
+    render(<MoveControl />)
+    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(<MoveControl />)
+    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(<MoveControl />)
+    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(<MoveControl />)
+    fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Zoom out' }))
+    expect(mapProvider.zoomIn).not.toHaveBeenCalled()
+    expect(mapProvider.zoomOut).not.toHaveBeenCalled()
+  })
+
+  it('has a stable "Precision" label regardless of state', () => {
+    const { rerender } = render(<MoveControl />)
+    expect(screen.getByRole('button', { name: 'Precision' })).toBeInTheDocument()
+
+    useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
+    rerender(<MoveControl />)
+    expect(screen.getByRole('button', { name: 'Precision' })).toBeInTheDocument()
+  })
+
+  it('shows an aria-hidden (On)/(Off) suffix in the tooltip without affecting the accessible name', () => {
+    // The (On)/(Off) suffix lives in the Tooltip's content div (a sibling of the
+    // <button>, referenced via aria-labelledby), not inside the button itself. Several
+    // tooltips exist in the DOM (one per icon-only button), so resolve this button's
+    // own tooltip via its aria-labelledby id rather than grabbing the first one.
+    const getOwnTooltip = () => {
+      const button = screen.getByRole('button', { name: 'Precision' })
+      return document.getElementById(button.getAttribute('aria-labelledby'))
+    }
+
+    const { rerender } = render(<MoveControl />)
+    let tooltip = getOwnTooltip()
+    expect(tooltip.querySelector('[aria-hidden="true"]')).toHaveTextContent('(Off)')
+    expect(tooltip).toHaveTextContent('Precision (Off)')
+
+    useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
+    rerender(<MoveControl />)
+    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(<MoveControl />)
+    expect(screen.getByRole('button', { name: 'Precision' })).toHaveAttribute('aria-pressed', 'false')
+
+    useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
+    rerender(<MoveControl />)
+    expect(screen.getByRole('button', { name: 'Precision' })).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('toggles precision on and announces it when currently in large-step mode', () => {
+    render(<MoveControl />)
+    fireEvent.click(screen.getByRole('button', { name: 'Precision' }))
+    expect(dispatch).toHaveBeenCalledWith({ type: 'TOGGLE_NUDGE_STEP' })
+    expect(announce).toHaveBeenCalledWith('Precision on')
+  })
+
+  it('toggles precision off and announces it when currently in small-step mode', () => {
+    useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
+    render(<MoveControl />)
+    fireEvent.click(screen.getByRole('button', { name: 'Precision' }))
+    expect(dispatch).toHaveBeenCalledWith({ type: 'TOGGLE_NUDGE_STEP' })
+    expect(announce).toHaveBeenCalledWith('Precision off')
+  })
+})

package/src/App/components/Tabs/Tabs.jsx

@@ -40,6 +40,7 @@ export const Tabs = ({ tabs, defaultTab }) => { // NOSONAR: project does not use
       <div role='tablist' className='im-c-tabs__list'>
         {tabs.map(({ name }) => (
           <button
+            type='button'
             key={name}
             id={toTabId(name)}
             role='tab'

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

@@ -77,40 +77,17 @@ describe('Tabs — WCAG attributes', () => {
 // ─── WCAG keyboard navigation ─────────────────────────────────────────────────
 
 describe('Tabs — WCAG keyboard navigation', () => {
-  it('ArrowRight moves to next tab', () => {
-    render(<Tabs tabs={[TAB_A, TAB_B, TAB_C]} />)
-    fireEvent.keyDown(screen.getByRole('tab', { name: 'Alpha' }), { key: 'ArrowRight' })
-    expect(screen.getByRole('tab', { name: 'Beta' })).toHaveAttribute('aria-selected', 'true')
-  })
-
-  it('ArrowLeft moves to previous tab', () => {
-    render(<Tabs tabs={[TAB_A, TAB_B, TAB_C]} defaultTab='Beta' />)
-    fireEvent.keyDown(screen.getByRole('tab', { name: 'Beta' }), { key: 'ArrowLeft' })
-    expect(screen.getByRole('tab', { name: 'Alpha' })).toHaveAttribute('aria-selected', 'true')
-  })
-
-  it('ArrowRight wraps from last tab to first', () => {
-    render(<Tabs tabs={[TAB_A, TAB_B, TAB_C]} defaultTab='Gamma' />)
-    fireEvent.keyDown(screen.getByRole('tab', { name: 'Gamma' }), { key: 'ArrowRight' })
-    expect(screen.getByRole('tab', { name: 'Alpha' })).toHaveAttribute('aria-selected', 'true')
-  })
-
-  it('ArrowLeft wraps from first tab to last', () => {
-    render(<Tabs tabs={[TAB_A, TAB_B, TAB_C]} />)
-    fireEvent.keyDown(screen.getByRole('tab', { name: 'Alpha' }), { key: 'ArrowLeft' })
-    expect(screen.getByRole('tab', { name: 'Gamma' })).toHaveAttribute('aria-selected', 'true')
-  })
-
-  it('Home moves to first tab', () => {
-    render(<Tabs tabs={[TAB_A, TAB_B, TAB_C]} defaultTab='Gamma' />)
-    fireEvent.keyDown(screen.getByRole('tab', { name: 'Gamma' }), { key: 'Home' })
-    expect(screen.getByRole('tab', { name: 'Alpha' })).toHaveAttribute('aria-selected', 'true')
-  })
-
-  it('End moves to last tab', () => {
-    render(<Tabs tabs={[TAB_A, TAB_B, TAB_C]} />)
-    fireEvent.keyDown(screen.getByRole('tab', { name: 'Alpha' }), { key: 'End' })
-    expect(screen.getByRole('tab', { name: 'Gamma' })).toHaveAttribute('aria-selected', 'true')
+  it.each([
+    ['ArrowRight moves to next tab', undefined, 'Alpha', 'ArrowRight', 'Beta'],
+    ['ArrowLeft moves to previous tab', 'Beta', 'Beta', 'ArrowLeft', 'Alpha'],
+    ['ArrowRight wraps from last tab to first', 'Gamma', 'Gamma', 'ArrowRight', 'Alpha'],
+    ['ArrowLeft wraps from first tab to last', undefined, 'Alpha', 'ArrowLeft', 'Gamma'],
+    ['Home moves to first tab', 'Gamma', 'Gamma', 'Home', 'Alpha'],
+    ['End moves to last tab', undefined, 'Alpha', 'End', 'Gamma']
+  ])('%s', (_description, defaultTab, focusedTab, key, expectedTab) => {
+    render(<Tabs tabs={[TAB_A, TAB_B, TAB_C]} defaultTab={defaultTab} />)
+    fireEvent.keyDown(screen.getByRole('tab', { name: focusedTab }), { key })
+    expect(screen.getByRole('tab', { name: expectedTab })).toHaveAttribute('aria-selected', 'true')
   })
 
   it('unhandled keys do not change the active tab', () => {

package/src/App/controls/keyboardActions.js

@@ -1,5 +1,6 @@
 import { reverseGeocode, hasReverseGeocode } from '../../services/reverseGeocode.js'
 import { logger } from '../../services/logger.js'
+import { resolveStepAmount } from '../../utils/resolveNudgeStep.js'
 
 export const createKeyboardActions = (mapProvider, announce, {
   containerRef,
@@ -10,8 +11,9 @@ export const createKeyboardActions = (mapProvider, announce, {
   nudgeZoomDelta,
   readMapText
 }) => {
-  const getPan = (shift) => (shift ? nudgePanDelta : panDelta)
-  const getZoom = (shift) => (shift ? nudgeZoomDelta : zoomDelta)
+  // Shift held selects the fine nudge amount (the smaller value), not a "large step".
+  const getPan = (shift) => resolveStepAmount(!shift, nudgePanDelta, panDelta)
+  const getZoom = (shift) => resolveStepAmount(!shift, nudgeZoomDelta, zoomDelta)
 
   return {
     showKeyboardControls: (e) => {

package/src/App/hooks/useMarkersAPI.test.js

@@ -244,7 +244,7 @@ describe('useMarkers — cleanup', () => {
     let cleanup
     act(() => { cleanup = result.current.markerRef('m1')(ctx.mockElement) })
     const updateCallback = ctx.mockEventBus.on.mock.calls.find(call => call[0] === 'map:render')[1]
-    act(() => { if (cleanup) cleanup() })
+    if (cleanup) cleanup()
     expect(ctx.mockEventBus.off).toHaveBeenCalledWith('map:render', updateCallback)
   })
 

package/src/App/registry/pluginRegistry.test.js

@@ -178,10 +178,10 @@ describe('pluginRegistry', () => {
 
     pluginRegistry.registerPlugin(pluginA)
     pluginRegistry.registerPlugin(pluginB)
-    expect(pluginRegistry.registeredPlugins.length).toBe(2)
+    expect(pluginRegistry.registeredPlugins).toHaveLength(2)
 
     pluginRegistry.clear()
-    expect(pluginRegistry.registeredPlugins.length).toBe(0)
+    expect(pluginRegistry.registeredPlugins).toHaveLength(0)
     expect(pluginRegistry.registeredPlugins).toEqual([])
   })
 })

package/src/App/renderer/mapButtons.test.js

@@ -98,7 +98,7 @@ describe('mapButtons module', () => {
   // -------------------------
   describe('getMatchingButtons', () => {
     const testFilter = (config, expected) => {
-      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState, evaluateProp }).length).toBe(expected)
+      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState, evaluateProp })).toHaveLength(expected)
     }
 
     it('returns empty array when buttonConfig is null', () => testFilter(null, 0))
@@ -117,41 +117,41 @@ describe('mapButtons module', () => {
     it('filters out buttons with inline:false when not in fullscreen', () => {
       const config = { b1: { ...baseBtn, inline: false } }
       const state = { ...appState, isFullscreen: false }
-      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState: state, evaluateProp }).length).toBe(0)
+      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState: state, evaluateProp })).toHaveLength(0)
     })
 
     it('includes buttons with inline:false when in fullscreen', () => {
       const config = { b1: { ...baseBtn, inline: false } }
       const state = { ...appState, isFullscreen: true }
-      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState: state, evaluateProp }).length).toBe(1)
+      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState: state, evaluateProp })).toHaveLength(1)
     })
 
     it('includes buttons without inline property regardless of fullscreen state', () => {
       const config = { b1: baseBtn }
       const state = { ...appState, isFullscreen: false }
-      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState: state, evaluateProp }).length).toBe(1)
+      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState: state, evaluateProp })).toHaveLength(1)
     })
 
     it('filters out buttons with isMenuItem:true', () => {
       const config = { b1: { ...baseBtn, isMenuItem: true } }
-      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState, evaluateProp }).length).toBe(0)
+      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState, evaluateProp })).toHaveLength(0)
     })
 
     it('does not filter out buttons without isMenuItem', () => {
       const config = { b1: baseBtn, b2: { ...baseBtn, isMenuItem: false } }
-      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState, evaluateProp }).length).toBe(2)
+      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState, evaluateProp })).toHaveLength(2)
     })
 
     it('filters out panel-toggle button when panel is open and non-dismissible at current breakpoint', () => {
       const state = { ...appState, panelConfig: { myPanel: { desktop: { open: true, dismissible: false } } } }
       const config = { b1: { ...baseBtn, panelId: 'myPanel' } }
-      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState: state, evaluateProp }).length).toBe(0)
+      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState: state, evaluateProp })).toHaveLength(0)
     })
 
     it('includes panel-toggle button when panel is dismissible at current breakpoint', () => {
       const state = { ...appState, panelConfig: { myPanel: { desktop: { open: true, dismissible: true } } } }
       const config = { b1: { ...baseBtn, panelId: 'myPanel' } }
-      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState: state, evaluateProp }).length).toBe(1)
+      expect(getMatchingButtons({ buttonConfig: config, slot: 'header', appState: state, evaluateProp })).toHaveLength(1)
     })
   })
 

package/src/App/renderer/mapControls.js

@@ -12,7 +12,7 @@ export function mapControls ({ slot, appState, evaluateProp }) {
   const { breakpoint, mode, pluginRegistry, controlConfig } = appState
 
   return Object.values(controlConfig)
-    .filter(control => {
+    .filter(control => { // NOSONAR, extracting to a helper wouldn't necessarily improve readability
       // Consumer HTML controls are managed by HtmlElementHost
       if (isConsumerHtml(control)) {
         return false
@@ -23,6 +23,11 @@ export function mapControls ({ slot, appState, evaluateProp }) {
         return false
       }
 
+      // Dynamic exclusion
+      if (typeof control.excludeWhen === 'function' && evaluateProp(control.excludeWhen, control.pluginId)) {
+        return false
+      }
+
       const slotAllowed = allowedSlots.control.includes(bpConfig.slot)
       const inModeWhitelist = control.includeModes?.includes(mode) ?? true
       const inExcludeModes = control.excludeModes?.includes(mode) ?? false

package/src/App/renderer/mapControls.test.js

@@ -63,6 +63,30 @@ describe('mapControls', () => {
     expect(result).toEqual([])
   })
 
+  it('filters out controls when excludeWhen evaluates truthy', () => {
+    defaultAppState.controlConfig = ({
+      ctrl1: { id: 'ctrl1', desktop: { slot: 'header', order: 1 }, excludeWhen: () => true }
+    })
+    const result = mapControls({ slot: 'header', appState: defaultAppState, evaluateProp: (p) => p() })
+    expect(result).toEqual([])
+  })
+
+  it('includes controls when excludeWhen evaluates falsy', () => {
+    defaultAppState.controlConfig = ({
+      ctrl1: { id: 'ctrl1', desktop: { slot: 'header', order: 1 }, excludeWhen: () => false }
+    })
+    const result = mapControls({ slot: 'header', appState: defaultAppState, evaluateProp: (p) => p() })
+    expect(result.map(c => c.id)).toEqual(['ctrl1'])
+  })
+
+  it('ignores excludeWhen when it is not a function', () => {
+    defaultAppState.controlConfig = ({
+      ctrl1: { id: 'ctrl1', desktop: { slot: 'header', order: 1 }, excludeWhen: true }
+    })
+    const result = mapControls({ slot: 'header', appState: defaultAppState, evaluateProp: (p) => p() })
+    expect(result.map(c => c.id)).toEqual(['ctrl1'])
+  })
+
   it('filters by excludeModes', () => {
     defaultAppState.controlConfig = ({
       ctrl1: { id: 'ctrl1', desktop: { slot: 'header', order: 1 }, excludeModes: ['view'] }

package/src/App/renderer/slots.js

@@ -23,6 +23,7 @@ export const allowedSlots = Object.freeze({
     layoutSlots.TOP_LEFT,
     layoutSlots.TOP_RIGHT,
     layoutSlots.MIDDLE,
+    layoutSlots.RIGHT_TOP,
     layoutSlots.RIGHT_BOTTOM,
     layoutSlots.BOTTOM_RIGHT,
     layoutSlots.DRAWER,