@defra/interactive-map 0.0.42-fmp-4 → 0.0.43-alpha

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

@@ -154,6 +154,14 @@ describe('useFeatureFocus — onBlur', () => {
     const { result } = renderHook(() => useFeatureFocus({ ...makeRefs(), items: ITEMS }))
     expect(() => act(() => result.current.onBlur())).not.toThrow()
   })
+
+  // The "moving between sibling options shouldn't count as a real blur/focus" behavior is
+  // driven by an internal isInternalFocusMoveRef, set only while focusOption()'s own .focus()
+  // call is synchronously in flight — not observable by calling onFocus/onBlur directly here,
+  // since that requires a real DOM focus transition bubbling through React. See the
+  // "Features + useFeatureFocus — roving tabindex real focus events" suite in Features.test.jsx,
+  // which renders the real markup and is the only level this can be faithfully exercised at
+  // (and is where the regression this guards against was actually found).
 })
 
 // ─── useFeatureFocus — keydown listener lifecycle ────────────────────────────
@@ -348,6 +356,70 @@ describe('useFeatureFocus — ArrowUp navigation', () => {
   })
 })
 
+// ─── useFeatureFocus — Home/End navigation ───────────────────────────────────
+
+describe('useFeatureFocus — Home/End navigation', () => {
+  const setup = () => {
+    const refs = makeRefs()
+    const el = refs.featuresRef.current
+    document.body.appendChild(el)
+    const { result, unmount } = renderHook(() => useFeatureFocus({ ...refs, items: ITEMS }))
+    return { result, el, unmount }
+  }
+
+  it('jumps to the first item on Home from anywhere in the list', () => {
+    const { result, el, unmount } = setup()
+    act(() => result.current.onFocus())
+    fireKey(el, 'ArrowDown')
+    fireKey(el, 'Home')
+    expect(result.current.activeFeatureId).toBe('a')
+    unmount(); el.remove()
+  })
+
+  it('jumps to the last item on End from anywhere in the list', () => {
+    const { result, el, unmount } = setup()
+    act(() => result.current.onFocus())
+    fireKey(el, 'End')
+    expect(result.current.activeFeatureId).toBe('c')
+    unmount(); el.remove()
+  })
+
+  it('does nothing when items is empty', () => {
+    const refs = makeRefs()
+    const el = refs.featuresRef.current
+    document.body.appendChild(el)
+    const { result, unmount } = renderHook(() => useFeatureFocus(refs))
+    fireKey(el, 'Home')
+    fireKey(el, 'End')
+    expect(result.current.activeFeatureId).toBeNull()
+    unmount(); el.remove()
+  })
+
+  it('stops propagation on Home/End so the viewport keyboard handler does not also handle it', () => {
+    const { el, unmount } = setup()
+    for (const key of ['Home', 'End']) {
+      const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true })
+      const stopSpy = jest.spyOn(event, 'stopPropagation')
+      act(() => el.dispatchEvent(event))
+      expect(stopSpy).toHaveBeenCalled()
+    }
+    unmount()
+  })
+
+  it('emits map:setactivefeature with the boundary id', () => {
+    const eb = makeEventBus()
+    const refs = makeRefs()
+    const el = refs.featuresRef.current
+    document.body.appendChild(el)
+    const { result, unmount } = renderHook(() => useFeatureFocus({ ...refs, items: ITEMS, eventBus: eb }))
+    act(() => result.current.onFocus())
+    eb.emit.mockClear()
+    fireKey(el, 'End')
+    expect(eb.emit).toHaveBeenCalledWith(SET_ACTIVE, { id: 'c' })
+    unmount(); el.remove()
+  })
+})
+
 // ─── useFeatureFocus — eventBus integration ───────────────────────────────────
 
 describe('useFeatureFocus — eventBus: map:setactivefeature listener', () => {
@@ -633,3 +705,98 @@ describe('useFeatureFocus — items change while focused', () => {
     unmount()
   })
 })
+
+// ─── useFeatureFocus — tabbableId (roving tabindex resting position) ─────────
+
+describe('useFeatureFocus — tabbableId', () => {
+  it('is null when items is empty', () => {
+    const { result } = renderHook(() => useFeatureFocus(makeRefs()))
+    expect(result.current.tabbableId).toBeNull()
+  })
+
+  it('defaults to the first item before the list has ever been focused', () => {
+    const { result } = renderHook(() => useFeatureFocus({ ...makeRefs(), items: ITEMS }))
+    expect(result.current.tabbableId).toBe('a')
+  })
+
+  // Unlike onFocus's own resolution, tabbableId deliberately ignores selection — "prefer the
+  // selected item" is a real-Tab-in-only concern. If tabbableId also preferred it, selecting a
+  // single marker by clicking it on the map (which never touches lastActiveIdRef) would relocate
+  // tabIndex to match it on every click.
+  it('is not influenced by a selection change before any position is established', () => {
+    const eb = makeEventBus()
+    const { result } = renderHook(() => useFeatureFocus({ ...makeRefs(), items: ITEMS, eventBus: eb }))
+    act(() => eb.trigger(SELECTION_CHANGE, { selectedFeatures: [{ featureId: 'b', layerId: 'roads' }] }))
+    expect(result.current.tabbableId).toBe('a')
+  })
+
+  it('does not chase a single item toggled selected/deselected purely via mouse clicks, with no keyboard interaction at all', () => {
+    const eb = makeEventBus()
+    const { result } = renderHook(() => useFeatureFocus({ ...makeRefs(), items: ITEMS, eventBus: eb }))
+    act(() => eb.trigger(SELECTION_CHANGE, { selectedMarkers: ['a'] }))
+    expect(result.current.tabbableId).toBe('a')
+    act(() => eb.trigger(SELECTION_CHANGE, { selectedMarkers: ['b'] })) // clicked a different marker
+    expect(result.current.tabbableId).toBe('a') // still the structural first item — never moved
+    act(() => eb.trigger(SELECTION_CHANGE, { selectedMarkers: ['c'] }))
+    expect(result.current.tabbableId).toBe('a')
+  })
+
+  it('stays on the established position when a selection change arrives from elsewhere (e.g. clicking a marker on the map)', () => {
+    const eb = makeEventBus()
+    const refs = makeRefs()
+    const el = refs.featuresRef.current
+    document.body.appendChild(el)
+    const { result, unmount } = renderHook(() => useFeatureFocus({ ...refs, items: ITEMS, eventBus: eb }))
+    act(() => result.current.onFocus()) // establishes position at 'a'
+    fireKey(el, 'ArrowDown') // establishes position at 'b'
+    act(() => result.current.onBlur())
+    // A selection made outside the list (e.g. a mouse click on a map marker) never touches
+    // lastActiveIdRef — it only changes selectedIds via interact:selectionchange.
+    act(() => eb.trigger(SELECTION_CHANGE, { selectedMarkers: ['c'] }))
+    expect(result.current.tabbableId).toBe('b') // stays put — does not jump to the newly-selected 'c'
+    unmount(); el.remove()
+  })
+})
+
+// ─── useFeatureFocus — selectItem (click / touch / voice-control activation) ─
+
+describe('useFeatureFocus — selectItem', () => {
+  afterEach(() => { document.body.innerHTML = '' })
+
+  it('sets activeFeatureId to the clicked item', () => {
+    const { result } = renderHook(() => useFeatureFocus({ ...makeRefs(), items: ITEMS }))
+    act(() => result.current.selectItem('b'))
+    expect(result.current.activeFeatureId).toBe('b')
+  })
+
+  it('emits map:setactivefeature then map:selectfeature for the clicked item', () => {
+    const eb = makeEventBus()
+    const { result } = renderHook(() => useFeatureFocus({ ...makeRefs(), items: ITEMS, eventBus: eb }))
+    act(() => result.current.selectItem('b'))
+    expect(eb.emit).toHaveBeenNthCalledWith(1, SET_ACTIVE, { id: 'b' })
+    expect(eb.emit).toHaveBeenNthCalledWith(2, SELECT)
+  })
+
+  it('moves real DOM focus to the clicked option', () => {
+    const refs = makeRefs()
+    const option = document.createElement('li')
+    option.dataset.id = 'b'
+    option.focus = jest.fn()
+    refs.featuresRef.current.appendChild(option)
+    const { result } = renderHook(() => useFeatureFocus({ ...refs, items: ITEMS }))
+    act(() => result.current.selectItem('b'))
+    expect(option.focus).toHaveBeenCalledWith({ preventScroll: true })
+  })
+
+  it('does not throw when eventBus is not provided', () => {
+    const { result } = renderHook(() => useFeatureFocus({ ...makeRefs(), items: ITEMS }))
+    expect(() => act(() => result.current.selectItem('b'))).not.toThrow()
+  })
+
+  it('does not throw when featuresRef.current is null (e.g. unmounted)', () => {
+    const refs = { ...makeRefs(), featuresRef: { current: null } }
+    const { result } = renderHook(() => useFeatureFocus({ ...refs, items: ITEMS }))
+    expect(() => act(() => result.current.selectItem('b'))).not.toThrow()
+    expect(result.current.activeFeatureId).toBe('b') // state still updates even though there's no element to focus
+  })
+})

package/src/App/hooks/useFeatureItems.js

@@ -9,7 +9,7 @@ const SET_FEATURES_SUPPRESSED = 'map:setfeaturessuppressed'
  * actually visible — which is what drives <Features>'s own tabIndex/aria-hidden.
  *
  * @param {object} eventBus
- * @returns {{ items: Array<{ id: string, label: string }>, multiselectable: boolean }}
+ * @returns {{ items: Array<{ id: string, label: string, x?: number, y?: number }>, multiselectable: boolean }}
  */
 export function useFeatureItems (eventBus) {
   const [items, setItems] = useState([])

package/src/App/hooks/useInterfaceAPI.js

@@ -58,7 +58,8 @@ export const useInterfaceAPI = () => {
     const handleAppClosed = () => dispatchRef.current({ type: 'TOGGLE_APP_VISIBLE', payload: false })
     const handleAddPanel = ({ id, config }) => dispatchRef.current({ type: 'ADD_PANEL', payload: { id, config } })
     const handleRemovePanel = (id) => dispatchRef.current({ type: 'REMOVE_PANEL', payload: id })
-    const handleShowPanel = ({ id, focus = true }) => dispatchRef.current({ type: 'OPEN_PANEL', payload: { panelId: id, focusOnOpen: focus } })
+    const handleShowPanel = ({ id, focus = true, triggeringElement }) =>
+      dispatchRef.current({ type: 'OPEN_PANEL', payload: { panelId: id, focusOnOpen: focus, props: triggeringElement ? { triggeringElement } : undefined } })
     const handleHidePanel = (id) => dispatchRef.current({ type: 'CLOSE_PANEL', payload: id })
     const handleAddControl = ({ id, config }) => dispatchRef.current({ type: 'ADD_CONTROL', payload: { id, config } })
 

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

@@ -92,6 +92,15 @@ describe('useInterfaceAPI', () => {
     expect(mockDispatch).toHaveBeenCalledWith({ type: 'OPEN_PANEL', payload: { panelId: 'panel1', focusOnOpen: false } })
   })
 
+  it('dispatches OPEN_PANEL with props.triggeringElement when one is given, so Panel can return focus to it on close', () => {
+    const triggeringElement = document.createElement('button')
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:showpanel', { id: 'panel1', triggeringElement }))
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: 'OPEN_PANEL', payload: { panelId: 'panel1', focusOnOpen: true, props: { triggeringElement } }
+    })
+  })
+
   it('dispatches CLOSE_PANEL on app:hidepanel', () => {
     renderHook(() => useInterfaceAPI())
     act(() => mockEventBus.emit('app:hidepanel', 'panel1'))

package/src/App/hooks/useKeyboardShortcuts.js

@@ -5,6 +5,71 @@ import { useConfig } from '../store/configContext.js'
 import { useApp } from '../store/appContext.js'
 import { useService } from '../store/serviceContext.js'
 
+const normalizeKey = (e) => {
+  let key
+
+  // Use e.code for letters to avoid 'dead' keys with Alt/AltGr
+  if (/^Key[A-Z]$/.test(e.code)) {
+    key = e.code.slice(3) // NOSONAR: strip "Key" prefix, e.g. "KeyI" -> "I"
+  } else {
+    key = e.key // works for arrows, numpad, punctuation
+  }
+
+  // Normalize numpad add/subtract to symbols
+  if (key === 'Add' || key === 'NumpadAdd') {
+    key = '+'
+  } else if (key === 'Subtract' || key === 'NumpadSubtract') {
+    key = '-'
+  } else {
+    // No action
+  }
+
+  // Check altKey first: AltGr (used on many non-US keyboards) reports both altKey
+  // and ctrlKey as true, and should still resolve to the Alt+ binding, not Ctrl+.
+  if (e.altKey) {
+    return `Alt+${key}`
+  }
+  if (e.ctrlKey) {
+    return `Ctrl+${key}`
+  }
+  return key
+}
+
+const resolveAction = (actions, type, key) => {
+  const actionName = keyboardMappings[type][key]
+  return actionName && actions[actionName] ? actionName : null
+}
+
+// keydown (pan/zoom) stays on the viewport so arrows only fire when the map has focus.
+// keyup (Alt+K and other global shortcuts) attaches to the app container so it fires
+// from anywhere within the app, including the features listbox.
+const createKeyEventHandlers = (actions) => {
+  const handleKeyDown = (e) => {
+    const key = normalizeKey(e)
+    const actionName = resolveAction(actions, 'keydown', key)
+    if (actionName) {
+      actions[actionName](e)
+      e.preventDefault()
+      return
+    }
+    // A keyup-bound shortcut (e.g. Alt+Arrow label navigation) still acts on release,
+    // but its browser default (e.g. arrow-key scroll) must be suppressed now or it's too late.
+    if (resolveAction(actions, 'keyup', key)) {
+      e.preventDefault()
+    }
+  }
+
+  const handleKeyUp = (e) => {
+    const actionName = resolveAction(actions, 'keyup', normalizeKey(e))
+    if (actionName) {
+      actions[actionName](e)
+      e.preventDefault()
+    }
+  }
+
+  return { handleKeyDown, handleKeyUp }
+}
+
 export function useKeyboardShortcuts (containerRef) {
   const { mapProvider, panDelta, nudgePanDelta, zoomDelta, nudgeZoomDelta, readMapText } = useConfig()
   const { dispatch, layoutRefs } = useApp()
@@ -27,42 +92,8 @@ export function useKeyboardShortcuts (containerRef) {
       readMapText
     })
 
-    const normalizeKey = (e) => {
-      let key
-
-      // Use e.code for letters to avoid 'dead' keys with Alt/AltGr
-      if (/^Key[A-Z]$/.test(e.code)) {
-        key = e.code.slice(3) // NOSONAR: strip "Key" prefix, e.g. "KeyI" -> "I"
-      } else {
-        key = e.key // works for arrows, numpad, punctuation
-      }
-
-      // Normalize numpad add/subtract to symbols
-      if (key === 'Add' || key === 'NumpadAdd') {
-        key = '+'
-      } else if (key === 'Subtract' || key === 'NumpadSubtract') {
-        key = '-'
-      } else {
-        // No action
-      }
-
-      return e.altKey ? `Alt+${key}` : key
-    }
-
-    const handle = (type) => (e) => {
-      const actionName = keyboardMappings[type][normalizeKey(e)]
-      if (actionName && actions[actionName]) {
-        actions[actionName](e)
-        e.preventDefault()
-      }
-    }
-
-    const handleKeyDown = handle('keydown')
-    const handleKeyUp = handle('keyup')
+    const { handleKeyDown, handleKeyUp } = createKeyEventHandlers(actions)
 
-    // keydown (pan/zoom) stays on the viewport so arrows only fire when the map has focus.
-    // keyup (Alt+K and other global shortcuts) attaches to the app container so it fires
-    // from anywhere within the app, including the features listbox.
     el.addEventListener('keydown', handleKeyDown)
     appEl.addEventListener('keyup', handleKeyUp)
 

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

@@ -138,6 +138,58 @@ describe('useKeyboardShortcuts', () => {
     expect(actions.stopPan).toHaveBeenCalled()
   })
 
+  test('does nothing on keyup when the key has no mapped action', () => {
+    const { appContainerRef, actions } = setup({ keyup: { ArrowUp: 'stopPan' }, actions: { stopPan: jest.fn() } })
+    renderHook(() => useKeyboardShortcuts({ current: document.createElement('div') }))
+
+    const evt = new KeyboardEvent('keyup', { key: 'Z' })
+    const spy = jest.spyOn(evt, 'preventDefault')
+    appContainerRef.current.dispatchEvent(evt)
+
+    expect(spy).not.toHaveBeenCalled()
+    expect(actions.stopPan).not.toHaveBeenCalled()
+  })
+
+  test('suppresses the browser default on keydown for a keyup-bound shortcut, without firing the action early', () => {
+    const { containerRef, appContainerRef, actions } = setup({
+      keyup: { 'Alt+ArrowUp': 'highlightNextLabel' },
+      actions: { highlightNextLabel: jest.fn() }
+    })
+    renderHook(() => useKeyboardShortcuts(containerRef))
+
+    const keydownEvt = new KeyboardEvent('keydown', { key: 'ArrowUp', altKey: true })
+    const keydownSpy = jest.spyOn(keydownEvt, 'preventDefault')
+    containerRef.current.dispatchEvent(keydownEvt)
+    expect(keydownSpy).toHaveBeenCalled()
+    expect(actions.highlightNextLabel).not.toHaveBeenCalled()
+
+    appContainerRef.current.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp', altKey: true }))
+    expect(actions.highlightNextLabel).toHaveBeenCalled()
+  })
+
+  test('normalizes Ctrl+key combinations', () => {
+    const { containerRef, actions } = setup({
+      keydown: { 'Ctrl+I': 'getInfo' },
+      actions: { getInfo: jest.fn() }
+    })
+    renderHook(() => useKeyboardShortcuts(containerRef))
+
+    containerRef.current.dispatchEvent(new KeyboardEvent('keydown', { code: 'KeyI', key: 'i', ctrlKey: true }))
+    expect(actions.getInfo).toHaveBeenCalled()
+  })
+
+  test('treats AltGr (altKey + ctrlKey both true) as Alt+, not Ctrl+', () => {
+    const { containerRef, actions } = setup({
+      keydown: { 'Alt+I': 'getInfo', 'Ctrl+I': 'zoomIn' },
+      actions: { getInfo: jest.fn(), zoomIn: jest.fn() }
+    })
+    renderHook(() => useKeyboardShortcuts(containerRef))
+
+    containerRef.current.dispatchEvent(new KeyboardEvent('keydown', { code: 'KeyI', key: 'i', altKey: true, ctrlKey: true }))
+    expect(actions.getInfo).toHaveBeenCalled()
+    expect(actions.zoomIn).not.toHaveBeenCalled()
+  })
+
   test('prevents default when action exists, does nothing otherwise', () => {
     const { containerRef } = setup({ keydown: { I: 'zoomIn', X: 'nonExistent' } })
     renderHook(() => useKeyboardShortcuts(containerRef))

package/src/App/hooks/useModalPanelBehaviour.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useLayoutEffect } from 'react'
 import { useResizeObserver } from './useResizeObserver.js'
 import { constrainKeyboardFocus } from '../../utils/constrainKeyboardFocus.js'
 import { toggleInertElements } from '../../utils/toggleInertElements.js'
@@ -62,6 +62,44 @@ const setSlotCSSVar = (slot, layoutRefs, primaryMargin) => {
   root.style.setProperty(MODAL_MAX_HEIGHT, `${mainRect.height - relTop - primaryMargin}px`)
 }
 
+// Computes and applies --modal-inset/--modal-max-height for the panel's current slot. Shared by
+// the resize observer (keeps position correct across later layout changes while open) and the
+// open-triggered layout effect below (panels stay permanently mounted — see mapPanels.js — so
+// opening one doesn't itself resize mainRef and wouldn't otherwise trigger a recalc).
+const recalcModalPosition = ({ isModal, mainRef, panelRef, buttonContainerEl, layoutRefs }) => {
+  if (!isModal || !mainRef.current) {
+    return
+  }
+
+  const root = document.documentElement
+  const styles = getComputedStyle(root)
+  const dividerGap = Number.parseInt(styles.getPropertyValue('--divider-gap'), 10)
+  const primaryMargin = Number.parseInt(styles.getPropertyValue('--primary-gap'), 10)
+  const slot = panelRef.current.dataset.slot
+
+  // Button-adjacent panels: position next to the controlling button.
+  // Use slot name (not buttonContainerEl) as the gate — buttonContainerEl may be undefined
+  // when there is no triggeringElement (e.g. panel opened programmatically).
+  // Dynamically query via aria-controls to handle stale triggeringElement after breakpoint changes.
+  if (slot?.endsWith('-button')) {
+    const panelElId = panelRef.current?.id
+    const currentButtonEl = panelElId ? document.querySelector(`[aria-controls="${panelElId}"]`) : null
+    const effectiveContainer = currentButtonEl?.parentElement ??
+      (buttonContainerEl?.isConnected ? buttonContainerEl : null) ??
+      document.querySelector(`[data-button-slot="${slot}"]`)
+
+    if (!effectiveContainer) {
+      return
+    }
+
+    setButtonCSSVar(effectiveContainer, mainRef, dividerGap)
+    return
+  }
+
+  // Slot-based panels: derive position from the slot container element
+  setSlotCSSVar(slot, layoutRefs, primaryMargin)
+}
+
 const useModalKeyHandler = (panelRef, isModal, handleClose) => {
   useEffect(() => {
     if (!isModal) {
@@ -131,40 +169,16 @@ export function useModalPanelBehaviour ({
 
   useModalKeyHandler(panelRef, isModal, handleClose)
 
-  // === Set --modal-inset and --modal-max-height, recalculate on mainRef resize === //
-  useResizeObserver([mainRef], () => {
-    if (!isModal || !mainRef.current) {
-      return
-    }
-
-    const root = document.documentElement
-    const styles = getComputedStyle(root)
-    const dividerGap = Number.parseInt(styles.getPropertyValue('--divider-gap'), 10)
-    const primaryMargin = Number.parseInt(styles.getPropertyValue('--primary-gap'), 10)
-    const slot = panelRef.current.dataset.slot
-
-    // Button-adjacent panels: position next to the controlling button.
-    // Use slot name (not buttonContainerEl) as the gate — buttonContainerEl may be undefined
-    // when there is no triggeringElement (e.g. panel opened programmatically).
-    // Dynamically query via aria-controls to handle stale triggeringElement after breakpoint changes.
-    if (slot?.endsWith('-button')) {
-      const panelElId = panelRef.current?.id
-      const currentButtonEl = panelElId ? document.querySelector(`[aria-controls="${panelElId}"]`) : null
-      const effectiveContainer = currentButtonEl?.parentElement ??
-        (buttonContainerEl?.isConnected ? buttonContainerEl : null) ??
-        document.querySelector(`[data-button-slot="${slot}"]`)
-
-      if (!effectiveContainer) {
-        return
-      }
-
-      setButtonCSSVar(effectiveContainer, mainRef, dividerGap)
-      return
-    }
+  // === Recalculate on mainRef resize (keeps position correct while already open) === //
+  useResizeObserver([mainRef], () => recalcModalPosition({ isModal, mainRef, panelRef, buttonContainerEl, layoutRefs }))
 
-    // Slot-based panels: derive position from the slot container element
-    setSlotCSSVar(slot, layoutRefs, primaryMargin)
-  })
+  // === Recalculate the moment the panel opens === //
+  // The resize observer above won't fire on its own here: its size cache persists across
+  // opens/closes (the panel no longer mounts fresh each time), and opening a panel doesn't
+  // itself resize mainRef. This is what actually positions the panel at open time.
+  useLayoutEffect(() => {
+    recalcModalPosition({ isModal, mainRef, panelRef, buttonContainerEl, layoutRefs })
+  }, [isModal, mainRef, panelRef, buttonContainerEl, layoutRefs])
 
   // === Click on modal backdrop to close === //
   useEffect(() => {

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

@@ -218,6 +218,65 @@ describe('useModalPanelBehaviour', () => {
     })
   })
 
+  // Regression: panels are mounted permanently and only toggle `hidden` (see mapPanels.js), so
+  // opening one doesn't itself resize mainRef. This uses the *real* useResizeObserver (backed by
+  // a fake ResizeObserver, not the blanket `(_, cb) => cb()` mock used above) so its size-change
+  // dedupe is actually exercised — that dedupe is what silently swallowed the reposition on open.
+  describe('repositioning on open when mainRef never resizes', () => {
+    const buttonSlot = 'map-styles-button'
+
+    beforeEach(() => {
+      const { useResizeObserver: actualUseResizeObserver } = jest.requireActual('./useResizeObserver.js')
+      useResizeObserverModule.useResizeObserver.mockImplementation(actualUseResizeObserver)
+
+      // Real ResizeObserver always delivers once per observe() call — mirror that, and let the
+      // real hook's own prevSizes dedupe decide whether the wrapped callback actually runs.
+      global.ResizeObserver = jest.fn(function (cb) {
+        this.observe = (target) => {
+          const entries = [{ target, contentRect: { width: 100, height: 50 } }]
+          cb(entries)
+        }
+        this.disconnect = jest.fn()
+      })
+      jest.spyOn(global, 'requestAnimationFrame').mockImplementation(cb => { cb(); return 0 })
+      jest.spyOn(global, 'cancelAnimationFrame').mockImplementation(() => {})
+      jest.spyOn(globalThis, 'getComputedStyle').mockReturnValue({ getPropertyValue: () => '8' })
+
+      Object.defineProperty(refs.main.current, 'getBoundingClientRect', {
+        value: () => ({ top: 0, right: 100, bottom: 50, left: 0, width: 100, height: 50 }),
+        configurable: true
+      })
+      Object.defineProperty(elements.buttonContainer, 'getBoundingClientRect', {
+        value: () => ({ top: 10, right: 80, bottom: 40, left: 20, width: 60, height: 30 }),
+        configurable: true
+      })
+
+      refs.panel.current.dataset.slot = buttonSlot
+      const button = document.createElement('button')
+      button.setAttribute(ARIA_CONTROLS, PANEL_ID)
+      elements.buttonContainer.appendChild(button)
+      document.body.appendChild(elements.buttonContainer)
+    })
+
+    afterEach(() => {
+      jest.restoreAllMocks()
+    })
+
+    it('positions the panel the moment it opens, not just when mainRef resizes', () => {
+      // Mounted closed, as it would be permanently — mainRef's size gets recorded but the
+      // calc no-ops on the isModal guard.
+      const { rerender } = render(<TestComponent isModal={false} />)
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toBe('')
+
+      // Open it. mainRef hasn't resized, so the resize observer's own delivery is deduped
+      // away — only the open-triggered layout effect can position it here.
+      rerender(<TestComponent isModal />)
+
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toContain('10px')
+      expect(document.documentElement.style.getPropertyValue(MODAL_MAX_HEIGHT)).toContain('px')
+    })
+  })
+
   describe('focus management', () => {
     it('redirects focus into panel when focus enters app but outside panel', () => {
       refs.panel.current.focus = jest.fn()

package/src/App/layout/Layout.jsx

@@ -11,14 +11,16 @@ import { layoutSlots } from '../renderer/slots'
 import { SlotRenderer } from '../renderer/SlotRenderer'
 import { HtmlElementHost } from '../renderer/HtmlElementHost'
 import { Hints } from '../components/Hints/Hints.jsx'
+import { hasOpenModalPanel } from '../renderer/slotHelpers.js'
 import { getMapThemeVars } from '../../config/mapTheme.js'
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
 export const Layout = () => {
   const { id, mapLabel, mapHintText } = useConfig()
-  const { breakpoint, interfaceType, preferredColorScheme, layoutRefs, isLayoutReady, hasExclusiveControl, isFullscreen } = useApp()
+  const { breakpoint, interfaceType, preferredColorScheme, layoutRefs, isLayoutReady, hasExclusiveControl, isFullscreen, openPanels, panelConfig } = useApp()
   const { mapStyle } = useMap()
+  const showModalBackdrop = hasOpenModalPanel(openPanels ?? {}, panelConfig ?? {}, breakpoint)
 
   useLayoutMeasurements()
   useFocusVisible()
@@ -108,7 +110,7 @@ export const Layout = () => {
           </div>
           <div className='im-o-app__modal' ref={layoutRefs.modalRef}>
             <SlotRenderer slot={layoutSlots.MODAL} />
-            <div className='im-o-app__modal-backdrop' />
+            <div className={`im-o-app__modal-backdrop${showModalBackdrop ? ' im-o-app__modal-backdrop--visible' : ''}`} />
           </div>
         </div>
       </div>

package/src/App/layout/Layout.test.jsx

@@ -95,6 +95,27 @@ describe('Layout', () => {
     expect(screen.getByTestId('slot-top-left')).toBeInTheDocument()
     expect(screen.getByTestId('slot-bottom-right')).toBeInTheDocument()
     expect(screen.getByTestId('slot-modal')).toBeInTheDocument()
+
+    const backdrop = root.querySelector('.im-o-app__modal-backdrop')
+    expect(backdrop).toBeInTheDocument()
+    expect(backdrop).not.toHaveClass('im-o-app__modal-backdrop--visible')
+  })
+
+  test('shows the modal backdrop only while a modal-configured panel is open', () => {
+    useApp.mockReturnValue({
+      breakpoint: 'mobile',
+      interfaceType: 'map',
+      preferredColorScheme: 'dark',
+      layoutRefs: mockRefs,
+      isLayoutReady: true,
+      hasExclusiveControl: false,
+      isFullscreen: true,
+      openPanels: { settings: { props: {} } },
+      panelConfig: { settings: { mobile: { modal: true } } }
+    })
+    render(<Layout />)
+    const root = document.getElementById('myApp-im-app')
+    expect(root.querySelector('.im-o-app__modal-backdrop')).toHaveClass('im-o-app__modal-backdrop--visible')
   })
 
   test('applies "not-ready" class when layout is not ready', () => {

package/src/App/layout/layout.module.scss

@@ -363,7 +363,13 @@
     z-index: 1000;
   }
 
-  .im-c-panel + .im-o-app__modal-backdrop {
+  // Visibility is JS-driven (Layout.jsx) since multiple panels can share this slot.
+  .im-o-app__modal-backdrop {
+    display: none;
+  }
+
+  .im-o-app__modal-backdrop--visible {
+    display: block;
     position: absolute;
     top: 0;
     left: 0;

package/src/App/registry/keyboardShortcutRegistry.js

@@ -19,8 +19,8 @@ const _setProviderSupportedShortcuts = (state, ids = []) => {
 
 const _getKeyboardShortcuts = (state, appConfig = {}) => {
   const filteredCore = coreShortcuts.filter(s => {
-    // Must be supported by provider
-    if (!state.providerSupportedIds.has(s.id)) {
+    // Must be supported by the map provider, unless the shortcut is map-provider-agnostic (no capability dependency, so no adapter needs to declare it).
+    if (!s.mapProviderAgnostic && !state.providerSupportedIds.has(s.id)) {
       return false
     }
     // Check requiredConfig - all specified config values must be truthy