@defra/interactive-map 0.0.18-alpha → 0.0.19-alpha

package/plugins/interact/src/events.test.js

@@ -1,40 +1,38 @@
 import { attachEvents } from './events.js'
 
-describe('attachEvents', () => {
-  let createParams, cleanup
-
-  beforeEach(() => {
-    jest.useFakeTimers()
-    // factory function to create fresh params for each test
-    createParams = () => {
-      const appState = { layoutRefs: { viewportRef: { current: document.body } }, disabledButtons: new Set() }
-      const pluginState = { dispatch: jest.fn(), selectionBounds: null, selectedFeatures: [], closeOnAction: true, multiSelect: false }
-      const clickReadyRef = { current: false }
-      return {
-        appState,
-        pluginState,
-        clickReadyRef,
-        getAppState: () => appState,
-        getPluginState: () => pluginState,
-        mapState: {
-          markers: { remove: jest.fn(), getMarker: jest.fn(() => null) },
-          crossHair: { getDetail: jest.fn(() => ({ point: { x: 0, y: 0 }, coords: [0, 0] })) }
-        },
-        buttonConfig: { selectDone: {}, selectAtTarget: {}, selectCancel: {} },
-        events: { MAP_CLICK: 'map:click' },
-        eventBus: { on: jest.fn(), off: jest.fn(), emit: jest.fn() },
-        handleInteraction: jest.fn(),
-        closeApp: jest.fn()
-      }
-    }
-  })
-
-  afterEach(() => {
-    cleanup?.()
-    jest.useRealTimers()
-  })
-
-  it('keyboard Enter triggers only on viewport', () => {
+const MOCK_POINT = { x: 1, y: 2 }
+const MOCK_COORDS = [1, 2]
+const INTERACT_DONE = 'interact:done'
+
+const createParams = () => {
+  const appState = { layoutRefs: { viewportRef: { current: document.body } }, disabledButtons: new Set() }
+  const pluginState = { dispatch: jest.fn(), selectionBounds: null, selectedFeatures: [], selectedMarkers: [], closeOnAction: true, multiSelect: false }
+  const clickReadyRef = { current: false }
+  return {
+    appState,
+    pluginState,
+    clickReadyRef,
+    getAppState: () => appState,
+    getPluginState: () => pluginState,
+    mapState: {
+      markers: { remove: jest.fn(), getMarker: jest.fn(() => null) },
+      crossHair: { getDetail: jest.fn(() => ({ point: { x: 0, y: 0 }, coords: [0, 0] })) }
+    },
+    buttonConfig: { selectDone: {}, selectAtTarget: {}, selectCancel: {} },
+    events: { MAP_CLICK: 'map:click' },
+    eventBus: { on: jest.fn(), off: jest.fn(), emit: jest.fn() },
+    handleInteraction: jest.fn(),
+    closeApp: jest.fn()
+  }
+}
+
+describe('attachEvents — keyboard', () => {
+  let cleanup = null
+
+  beforeEach(() => { jest.useFakeTimers() })
+  afterEach(() => { cleanup?.(); jest.useRealTimers() })
+
+  it('Enter on viewport triggers interaction', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
@@ -54,7 +52,6 @@ describe('attachEvents', () => {
     cleanup = attachEvents(params)
     const input = document.createElement('input')
 
-    // Enter outside viewport
     let kd = new KeyboardEvent('keydown', { key: 'Enter' })
     Object.defineProperty(kd, 'target', { value: input })
     document.dispatchEvent(kd)
@@ -62,7 +59,6 @@ describe('attachEvents', () => {
     Object.defineProperty(ku, 'target', { value: input })
     document.dispatchEvent(ku)
 
-    // other key
     kd = new KeyboardEvent('keydown', { key: 'Space' })
     Object.defineProperty(kd, 'target', { value: document.body })
     document.dispatchEvent(kd)
@@ -72,6 +68,13 @@ describe('attachEvents', () => {
 
     expect(params.handleInteraction).not.toHaveBeenCalled()
   })
+})
+
+describe('attachEvents — click handling', () => {
+  let cleanup = null
+
+  beforeEach(() => { jest.useFakeTimers() })
+  afterEach(() => { cleanup?.(); jest.useRealTimers() })
 
   it('map click triggers interaction when clickReadyRef is true', () => {
     const params = createParams()
@@ -79,18 +82,17 @@ describe('attachEvents', () => {
     cleanup = attachEvents(params)
 
     const handler = params.eventBus.on.mock.calls.find(c => c[0] === 'map:click')[1]
-    handler({ point: { x: 1, y: 2 }, coords: [3, 4] })
+    handler({ point: MOCK_POINT, coords: MOCK_COORDS })
 
-    expect(params.handleInteraction).toHaveBeenCalledWith({ point: { x: 1, y: 2 }, coords: [3, 4] })
+    expect(params.handleInteraction).toHaveBeenCalledWith({ point: MOCK_POINT, coords: MOCK_COORDS })
   })
 
   it('map click is suppressed when clickReadyRef is false', () => {
     const params = createParams()
-    params.clickReadyRef.current = false
     cleanup = attachEvents(params)
 
     const handler = params.eventBus.on.mock.calls.find(c => c[0] === 'map:click')[1]
-    handler({ point: { x: 1, y: 2 }, coords: [3, 4] })
+    handler({ point: MOCK_POINT, coords: MOCK_COORDS })
 
     expect(params.handleInteraction).not.toHaveBeenCalled()
   })
@@ -99,135 +101,138 @@ describe('attachEvents', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    const crossDetail = { point: { x: 1, y: 2 }, coords: [3, 4] }
+    const crossDetail = { point: MOCK_POINT, coords: MOCK_COORDS }
     params.mapState.crossHair.getDetail.mockReturnValue(crossDetail)
 
     params.buttonConfig.selectAtTarget.onClick()
     expect(params.handleInteraction).toHaveBeenCalledWith(crossDetail)
   })
+})
+
+describe('attachEvents — button actions', () => {
+  let cleanup = null
+
+  beforeEach(() => { jest.useFakeTimers() })
+  afterEach(() => { cleanup?.(); jest.useRealTimers() })
 
   it('selectDone emits correct payload and respects closeOnAction', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    // closeOnAction = true (already covered)
-    params.mapState.markers.getMarker.mockReturnValue({ coords: [1, 2] })
+    params.mapState.markers.getMarker.mockReturnValue({ coords: MOCK_COORDS })
     params.buttonConfig.selectDone.onClick()
     expect(params.closeApp).toHaveBeenCalled()
 
-    // cover closeOnAction = false
     params.closeApp.mockClear()
     params.pluginState.closeOnAction = false
-    params.mapState.markers.getMarker.mockReturnValue({ coords: [3, 4] })
     params.buttonConfig.selectDone.onClick()
     expect(params.closeApp).not.toHaveBeenCalled()
   })
 
-  it('selectCancel emits cancel and respects closeOnAction', () => {
+  it('selectDone emits selectedFeatures and selectionBounds when no marker', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    // closeOnAction = true
-    params.buttonConfig.selectCancel.onClick()
-    expect(params.closeApp).toHaveBeenCalled()
+    params.pluginState.selectedFeatures = [{ id: 'f1' }]
+    params.pluginState.selectionBounds = { sw: [0, 0], ne: [1, 1] }
+    params.buttonConfig.selectDone.onClick()
 
-    // cover closeOnAction = false
-    cleanup()
-    const params2 = createParams()
-    cleanup = attachEvents(params2)
-    params2.pluginState.closeOnAction = false
-    params2.buttonConfig.selectCancel.onClick()
-    expect(params2.closeApp).not.toHaveBeenCalled()
+    expect(params.eventBus.emit).toHaveBeenCalledWith(INTERACT_DONE, {
+      selectedFeatures: [{ id: 'f1' }],
+      selectionBounds: { sw: [0, 0], ne: [1, 1] }
+    })
   })
 
-  it('does not emit or closeApp if selectDone button is disabled', () => {
+  it('selectDone includes selectedMarkers in payload when present', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    params.appState.disabledButtons.add('selectDone')
+    params.pluginState.selectedMarkers = ['m1', 'm2']
     params.buttonConfig.selectDone.onClick()
 
-    expect(params.eventBus.emit).not.toHaveBeenCalled()
-    expect(params.closeApp).not.toHaveBeenCalled()
+    expect(params.eventBus.emit).toHaveBeenCalledWith(INTERACT_DONE,
+      expect.objectContaining({ selectedMarkers: ['m1', 'm2'] })
+    )
   })
 
-  it('programmatic select/unselect dispatches and removes location', () => {
+  it('selectDone omits selectedMarkers from payload when empty', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    const selectHandler = params.eventBus.on.mock.calls.find(c => c[0] === 'interact:selectFeature')[1]
-    const unselectHandler = params.eventBus.on.mock.calls.find(c => c[0] === 'interact:unselectFeature')[1]
-
-    selectHandler({ featureId: 'F1' })
-    unselectHandler({ featureId: 'F2' })
+    params.buttonConfig.selectDone.onClick()
 
-    expect(params.pluginState.dispatch).toHaveBeenCalledTimes(2)
-    expect(params.mapState.markers.remove).toHaveBeenCalledTimes(2)
+    const payload = params.eventBus.emit.mock.calls.find(c => c[0] === INTERACT_DONE)[1]
+    expect(payload).not.toHaveProperty('selectedMarkers')
   })
 
-  it('cleanup removes all handlers', () => {
+  it('does not emit or closeApp if selectDone button is disabled', () => {
     const params = createParams()
     cleanup = attachEvents(params)
-    cleanup()
-    Object.values(params.buttonConfig).forEach(btn => expect(btn.onClick).toBeNull())
+
+    params.appState.disabledButtons.add('selectDone')
+    params.buttonConfig.selectDone.onClick()
+
+    expect(params.eventBus.emit).not.toHaveBeenCalled()
+    expect(params.closeApp).not.toHaveBeenCalled()
   })
 
-  it('selectDone emits selectedFeatures and selectionBounds when no marker/coords', () => {
+  it('selectCancel emits cancel and respects closeOnAction', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    params.mapState.markers.getMarker.mockReturnValue(null)
-    params.pluginState.selectedFeatures = [{ id: 'f1' }]
-    params.pluginState.selectionBounds = { sw: [0, 0], ne: [1, 1] }
-
-    params.buttonConfig.selectDone.onClick()
+    params.buttonConfig.selectCancel.onClick()
+    expect(params.closeApp).toHaveBeenCalled()
 
-    expect(params.eventBus.emit).toHaveBeenCalledWith('interact:done', {
-      selectedFeatures: [{ id: 'f1' }],
-      selectionBounds: { sw: [0, 0], ne: [1, 1] }
-    })
+    cleanup()
+    const params2 = createParams()
+    cleanup = attachEvents(params2)
+    params2.pluginState.closeOnAction = false
+    params2.buttonConfig.selectCancel.onClick()
+    expect(params2.closeApp).not.toHaveBeenCalled()
   })
 
-  it('selectDone includes selectedMarkers in payload when present', () => {
+  it('respects default closeOnAction when value is nullish', () => {
     const params = createParams()
+    params.pluginState.closeOnAction = null
     cleanup = attachEvents(params)
 
-    params.mapState.markers.getMarker.mockReturnValue(null)
-    params.pluginState.selectedMarkers = ['m1', 'm2']
-
     params.buttonConfig.selectDone.onClick()
+    expect(params.closeApp).toHaveBeenCalledTimes(1)
 
-    expect(params.eventBus.emit).toHaveBeenCalledWith('interact:done',
-      expect.objectContaining({ selectedMarkers: ['m1', 'm2'] })
-    )
+    params.closeApp.mockClear()
+    params.buttonConfig.selectCancel.onClick()
+    expect(params.closeApp).toHaveBeenCalledTimes(1)
   })
+})
 
-  it('selectDone omits selectedMarkers from payload when empty', () => {
+describe('attachEvents — programmatic selection', () => {
+  let cleanup = null
+
+  beforeEach(() => { jest.useFakeTimers() })
+  afterEach(() => { cleanup?.(); jest.useRealTimers() })
+
+  it('selectFeature and unselectFeature dispatch and remove location marker', () => {
     const params = createParams()
     cleanup = attachEvents(params)
 
-    params.mapState.markers.getMarker.mockReturnValue(null)
-    params.pluginState.selectedMarkers = []
+    const selectHandler = params.eventBus.on.mock.calls.find(c => c[0] === 'interact:selectFeature')[1]
+    const unselectHandler = params.eventBus.on.mock.calls.find(c => c[0] === 'interact:unselectFeature')[1]
 
-    params.buttonConfig.selectDone.onClick()
+    selectHandler({ featureId: 'F1' })
+    unselectHandler({ featureId: 'F2' })
 
-    const payload = params.eventBus.emit.mock.calls.find(c => c[0] === 'interact:done')[1]
-    expect(payload).not.toHaveProperty('selectedMarkers')
+    expect(params.pluginState.dispatch).toHaveBeenCalledTimes(2)
+    expect(params.mapState.markers.remove).toHaveBeenCalledTimes(2)
   })
+})
 
-  it('respects default closeOnAction when value is undefined (fallback to true)', () => {
+describe('attachEvents — cleanup', () => {
+  it('removes all handlers and nulls button onClick callbacks', () => {
+    jest.useFakeTimers()
     const params = createParams()
-    // Explicitly set to undefined to trigger the ?? fallback
-    params.pluginState.closeOnAction = undefined
-    cleanup = attachEvents(params)
-
-    // Test for selectDone
-    params.buttonConfig.selectDone.onClick()
-    expect(params.closeApp).toHaveBeenCalledTimes(1)
-
-    // Test for selectCancel
-    params.closeApp.mockClear()
-    params.buttonConfig.selectCancel.onClick()
-    expect(params.closeApp).toHaveBeenCalledTimes(1)
+    const cleanup = attachEvents(params)
+    cleanup()
+    Object.values(params.buttonConfig).forEach(btn => expect(btn.onClick).toBeNull())
+    jest.useRealTimers()
   })
 })

package/plugins/interact/src/manifest.js

@@ -1,11 +1,14 @@
 // /plugins/interact/manifest.js
 import { InteractInit } from './InteractInit.jsx'
+import { isSelectMarkerOnly } from './utils/interactionModes.js'
 import { initialState, actions } from './reducer.js'
 import { enable } from './api/enable.js'
 import { disable } from './api/disable.js'
 import { clear } from './api/clear.js'
 import { selectFeature } from './api/selectFeature.js'
 import { unselectFeature } from './api/unselectFeature.js'
+import { selectMarker } from './api/selectMarker.js'
+import { unselectMarker } from './api/unselectMarker.js'
 
 export const manifest = {
   InitComponent: InteractInit,
@@ -36,7 +39,10 @@ export const manifest = {
     id: 'selectAtTarget',
     label: 'Select',
     variant: 'primary',
-    hiddenWhen: ({ appState, pluginState }) => !pluginState.enabled || appState.interfaceType !== 'touch',
+    // Hidden for touch when selectMarker is the only mode — markers have a sufficient tap target
+    // and the Select button is only needed alongside the crosshair. Mirrors the crosshair logic in InteractInit.
+    hiddenWhen: ({ appState, pluginState }) =>
+      !pluginState.enabled || appState.interfaceType !== 'touch' || isSelectMarkerOnly(pluginState.interactionModes),
     mobile: {
       slot: 'actions'
     },
@@ -83,6 +89,8 @@ export const manifest = {
     disable,
     clear,
     selectFeature,
-    unselectFeature
+    unselectFeature,
+    selectMarker,
+    unselectMarker
   }
 }

package/plugins/interact/src/reducer.js

@@ -107,13 +107,48 @@ const clearSelectedFeatures = (state) => {
   }
 }
 
+/**
+ * Explicitly select a marker. Has no effect if already selected.
+ * In single-select mode, clears selectedFeatures and replaces the selection.
+ * In multi-select mode, adds to the existing selection.
+ */
+const selectMarker = (state, { markerId, multiSelect }) => {
+  const current = state.selectedMarkers
+  if (current.includes(markerId)) {
+    return state
+  }
+  const nextMarkers = multiSelect ? [...current, markerId] : [markerId]
+  return {
+    ...state,
+    selectedFeatures: multiSelect ? state.selectedFeatures : [],
+    selectionBounds: null,
+    selectedMarkers: nextMarkers
+  }
+}
+
+/**
+ * Explicitly unselect a marker. Has no effect if not selected.
+ */
+const unselectMarker = (state, { markerId }) => {
+  const current = state.selectedMarkers
+  if (!current.includes(markerId)) {
+    return state
+  }
+  return {
+    ...state,
+    selectedMarkers: current.filter(id => id !== markerId)
+  }
+}
+
 const actions = {
   ENABLE: enable,
   DISABLE: disable,
   TOGGLE_SELECTED_FEATURES: toggleSelectedFeatures,
   TOGGLE_SELECTED_MARKERS: toggleSelectedMarkers,
   UPDATE_SELECTED_BOUNDS: updateSelectedBounds,
-  CLEAR_SELECTED_FEATURES: clearSelectedFeatures
+  CLEAR_SELECTED_FEATURES: clearSelectedFeatures,
+  SELECT_MARKER: selectMarker,
+  UNSELECT_MARKER: unselectMarker
 }
 
 export {

package/plugins/interact/src/reducer.test.js

@@ -189,6 +189,43 @@ describe('CLEAR_SELECTED_FEATURES action', () => {
   })
 })
 
+describe('SELECT_MARKER action', () => {
+  it('adds a marker in single-select mode, clearing selectedFeatures', () => {
+    const state = { ...initialState, selectedFeatures: [{ featureId: 'f1' }], selectedMarkers: [] }
+    const result = actions.SELECT_MARKER(state, { markerId: 'm1', multiSelect: false })
+    expect(result.selectedMarkers).toEqual(['m1'])
+    expect(result.selectedFeatures).toEqual([])
+    expect(result.selectionBounds).toBeNull()
+  })
+
+  it('adds a marker in multi-select mode without clearing selectedFeatures', () => {
+    const state = { ...initialState, selectedFeatures: [{ featureId: 'f1' }], selectedMarkers: ['m1'] }
+    const result = actions.SELECT_MARKER(state, { markerId: 'm2', multiSelect: true })
+    expect(result.selectedMarkers).toEqual(['m1', 'm2'])
+    expect(result.selectedFeatures).toEqual([{ featureId: 'f1' }])
+  })
+
+  it('is idempotent — does not change state if marker already selected', () => {
+    const state = { ...initialState, selectedMarkers: ['m1'] }
+    const result = actions.SELECT_MARKER(state, { markerId: 'm1', multiSelect: false })
+    expect(result).toBe(state)
+  })
+})
+
+describe('UNSELECT_MARKER action', () => {
+  it('removes a selected marker', () => {
+    const state = { ...initialState, selectedMarkers: ['m1', 'm2'] }
+    const result = actions.UNSELECT_MARKER(state, { markerId: 'm1' })
+    expect(result.selectedMarkers).toEqual(['m2'])
+  })
+
+  it('is idempotent — does not change state if marker not selected', () => {
+    const state = { ...initialState, selectedMarkers: ['m2'] }
+    const result = actions.UNSELECT_MARKER(state, { markerId: 'm1' })
+    expect(result).toBe(state)
+  })
+})
+
 describe('actions object', () => {
   it('exports all action handlers as functions', () => {
     expect(Object.keys(actions)).toEqual([
@@ -197,7 +234,9 @@ describe('actions object', () => {
       'TOGGLE_SELECTED_FEATURES',
       'TOGGLE_SELECTED_MARKERS',
       'UPDATE_SELECTED_BOUNDS',
-      'CLEAR_SELECTED_FEATURES'
+      'CLEAR_SELECTED_FEATURES',
+      'SELECT_MARKER',
+      'UNSELECT_MARKER'
     ])
     Object.values(actions).forEach(fn => expect(typeof fn).toBe('function'))
   })

package/plugins/interact/src/utils/interactionModes.js

@@ -0,0 +1,12 @@
+/**
+ * Returns true when selectMarker is the only active interaction mode.
+ *
+ * Used to suppress the crosshair and Select action button for touch users —
+ * markers have a sufficient tap target so neither is needed. Any other mode
+ * combination (e.g. placeMarker, selectFeature) requires the crosshair for touch.
+ *
+ * @param {string[] | null} interactionModes
+ * @returns {boolean}
+ */
+export const isSelectMarkerOnly = (interactionModes) =>
+  interactionModes?.length === 1 && interactionModes.includes('selectMarker')

package/src/App/components/Panel/Panel.jsx

@@ -6,12 +6,12 @@ import { useModalPanelBehaviour } from '../../hooks/useModalPanelBehaviour.js'
 import { useIsScrollable } from '../../hooks/useIsScrollable.js'
 import { Icon } from '../Icon/Icon'
 
-const computePanelState = (bpConfig, triggeringElement) => {
+const computePanelState = (bpConfig, triggeringElement, focus, focusOnOpen) => {
   const isAside = bpConfig.slot === 'side' && bpConfig.open && !bpConfig.modal
   const isDialog = !isAside && bpConfig.dismissible
   const isModal = bpConfig.modal === true
   const isDismissible = bpConfig.dismissible !== false
-  const shouldFocus = Boolean(isModal || triggeringElement)
+  const shouldFocus = isModal || (focusOnOpen !== false && (focusOnOpen === true || focus === true || Boolean(triggeringElement)))
   const buttonContainerEl = bpConfig.slot.endsWith('button') ? triggeringElement?.parentNode : undefined
   return { isAside, isDialog, isModal, isDismissible, shouldFocus, buttonContainerEl }
 }
@@ -58,15 +58,15 @@ const buildBodyProps = ({ bodyRef, panelBodyClass, isBodyScrollable, elementId }
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
-export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html, children, isOpen = true, rootRef }) => {
+export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild, label, html, children, isOpen = true, rootRef }) => {
   const { id } = useConfig()
-  const { dispatch, breakpoint, layoutRefs } = useApp()
+  const { dispatch, breakpoint, layoutRefs, interfaceType } = useApp()
 
   const rootEl = document.getElementById(`${id}-im-app`)
   const bpConfig = panelConfig[breakpoint]
   const elementId = `${id}-panel-${stringToKebab(panelId)}`
 
-  const { isAside, isDialog, isModal, isDismissible, shouldFocus, buttonContainerEl } = computePanelState(bpConfig, props?.triggeringElement)
+  const { isAside, isDialog, isModal, isDismissible, shouldFocus, buttonContainerEl } = computePanelState(bpConfig, props?.triggeringElement, panelConfig.focus, focusOnOpen) // nosonar
 
   // For persistent panels, gate modal behaviour on open state
   const isModalActive = isModal && isOpen
@@ -81,7 +81,7 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
   const panelRef = rootRef || internalPanelRef
 
   const handleClose = () => {
-    requestAnimationFrame(() => { (props?.triggeringElement || layoutRefs.viewportRef.current).focus?.() })
+    requestAnimationFrame(() => { (props?.triggeringElement || layoutRefs.viewportRef.current).focus?.({ preventScroll: interfaceType !== 'keyboard' }) })
     dispatch({ type: 'CLOSE_PANEL', payload: panelId })
   }
 

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

@@ -104,6 +104,43 @@ describe('Panel', () => {
     })
   })
 
+  describe('focus behaviour', () => {
+    it('focuses panel on mount when focus: true', () => {
+      const { container } = renderPanel({ focus: true })
+      const panel = container.firstChild
+      expect(panel).toHaveAttribute('tabIndex', '-1')
+      expect(document.activeElement).toBe(panel)
+    })
+
+    it('does not focus panel on mount when focus: false and no triggering element or modal', () => {
+      const { container } = renderPanel({ focus: false })
+      const panel = container.firstChild
+      expect(panel).not.toHaveAttribute('tabIndex')
+      expect(document.activeElement).not.toBe(panel)
+    })
+
+    it('focuses panel on mount when modal even if focus: false', () => {
+      const { container } = renderPanel({ focus: false, desktop: { slot: 'overlay', dismissible: true, modal: true } })
+      const panel = container.firstChild
+      expect(panel).toHaveAttribute('tabIndex', '-1')
+      expect(document.activeElement).toBe(panel)
+    })
+
+    it('focuses panel when focusOnOpen is true regardless of panelConfig.focus', () => {
+      const { container } = renderPanel({ focus: false }, { focusOnOpen: true })
+      const panel = container.firstChild
+      expect(panel).toHaveAttribute('tabIndex', '-1')
+      expect(document.activeElement).toBe(panel)
+    })
+
+    it('does not focus panel when focusOnOpen is false even if panelConfig.focus is true', () => {
+      const { container } = renderPanel({ focus: true }, { focusOnOpen: false })
+      const panel = container.firstChild
+      expect(panel).not.toHaveAttribute('tabIndex')
+      expect(document.activeElement).not.toBe(panel)
+    })
+  })
+
   describe('close functionality', () => {
     it('focuses triggeringElement on close for button slots', () => {
       const focusMock = jest.fn()

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

@@ -2,6 +2,7 @@ import React, { useRef, useEffect, useState } from 'react'
 import { EVENTS as events } from '../../../config/events.js'
 import { createPortal } from 'react-dom'
 import { useConfig } from '../../store/configContext.js'
+
 import { useApp } from '../../store/appContext.js'
 import { useMap } from '../../store/mapContext.js'
 import { MapController } from './MapController.jsx'
@@ -14,9 +15,10 @@ import { Markers } from '../Markers/Markers'
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
-export const Viewport = ({ keyboardHintPortalRef }) => {
+export const Viewport = () => {
   const { id, mapProvider, mapLabel, keyboardHintText } = useConfig()
   const { interfaceType, mode, previousMode, layoutRefs, safeZoneInset } = useApp()
+  const { mainRef } = layoutRefs
   const { mapSize } = useMap()
 
   const mapContainerRef = useRef(null)
@@ -49,18 +51,6 @@ export const Viewport = ({ keyboardHintPortalRef }) => {
     }
   }, [mode])
 
-  // Toggle external class based on keyboard hint
-  useEffect(() => {
-    const mainEl = layoutRefs.mainRef?.current
-    if (!mainEl) {
-      return undefined
-    }
-
-    mainEl.classList.toggle('im-o-app__main--keyboard-hint-visible', showHint)
-
-    return () => mainEl?.classList.remove('im-o-app__main--keyboard-hint-visible')
-  }, [showHint])
-
   return (
     <>
       <MapController mapContainerRef={mapContainerRef} />
@@ -74,14 +64,14 @@ export const Viewport = ({ keyboardHintPortalRef }) => {
         onBlur={handleBlur}
         ref={layoutRefs.viewportRef}
       >
-        {showHint && keyboardHintPortalRef?.current && createPortal(
+        {showHint && mainRef?.current && createPortal(
           <div
             className='im-c-viewport__keyboard-hint'
             aria-hidden='true'
             ref={keyboardHintRef}
             dangerouslySetInnerHTML={{ __html: keyboardHintText }}
           />,
-          keyboardHintPortalRef.current
+          mainRef.current
         )}
         <div className='im-c-viewport__map-container' ref={mapContainerRef} />
         <div className='im-c-viewport__features' />

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

@@ -31,8 +31,10 @@
 
 .im-c-viewport__keyboard-hint {
     position: absolute;
+    bottom: var(--keyboard-hint-bottom, var(--primary-gap));
     left: 50%;
     transform: translateX(-50%);
+    z-index: 1001;
     text-wrap: nowrap;
 
     color: var(--tooltip-foreground-color);