@defra/interactive-map 0.0.39-alpha → 0.0.41-alpha

package/src/App/components/{MoveControl/MoveControl.test.jsx → MoveControls/MoveControls.test.jsx}

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
-import { MoveControl } from './MoveControl.jsx'
+import { MoveControls } from './MoveControls.jsx'
 import { useApp } from '../../store/appContext.js'
 import { useConfig } from '../../store/configContext.js'
 import { useMap } from '../../store/mapContext.js'
@@ -11,19 +11,19 @@ jest.mock('../../store/configContext.js', () => ({ useConfig: jest.fn() }))
 jest.mock('../../store/mapContext.js', () => ({ useMap: jest.fn() }))
 jest.mock('../../store/serviceContext.js', () => ({ useService: jest.fn() }))
 
-describe('MoveControl', () => {
+describe('MoveControls', () => {
   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.
+  // mockReturnValue needs to carry these alongside the fields MoveControls itself reads.
   const buildAppState = (overrides) => ({
     buttonRefs: { current: {} },
     interfaceType: 'mouse',
     breakpoint: 'desktop',
     dispatch,
-    expandedButtons: new Set(['moveControl']),
+    expandedButtons: new Set(['moveControls']),
     nudgeStepSize: 'large',
     layoutRefs: { viewportRef: { current: { focus: jest.fn() } } },
     ...overrides
@@ -50,29 +50,29 @@ describe('MoveControl', () => {
   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()
+    const { container } = render(<MoveControls />)
+    expect(container.querySelector('#im-move-controls-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('is not visually collapsed when moveControls is expanded', () => {
+    const { container } = render(<MoveControls />)
+    expect(container.querySelector('.im-c-move-controls--collapsed')).not.toBeInTheDocument()
   })
 
   it('moves focus to the first direction button when the control opens', () => {
-    const { rerender } = render(<MoveControl />)
+    const { rerender } = render(<MoveControls />)
     useApp.mockReturnValue(buildAppState({ expandedButtons: new Set() }))
-    rerender(<MoveControl />)
+    rerender(<MoveControls />)
 
-    useApp.mockReturnValue(buildAppState({ expandedButtons: new Set(['moveControl']) }))
-    rerender(<MoveControl />)
+    useApp.mockReturnValue(buildAppState({ expandedButtons: new Set(['moveControls']) }))
+    rerender(<MoveControls />)
     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 { container, unmount } = render(<MoveControls />)
       const groups = container.querySelectorAll('[role="group"]')
       expect(groups[0]).toHaveAttribute('aria-label', 'Direction controls')
       expect(groups[1]).toHaveAttribute('aria-label', 'Zoom controls')
@@ -80,14 +80,14 @@ describe('MoveControl', () => {
     })
   })
 
-  it('is collapsed when moveControl is not expanded', () => {
+  it('is collapsed when moveControls is not expanded', () => {
     useApp.mockReturnValue(buildAppState({ expandedButtons: new Set() }))
-    const { container } = render(<MoveControl />)
-    expect(container.querySelector('.im-c-move-control--collapsed')).toBeInTheDocument()
+    const { container } = render(<MoveControls />)
+    expect(container.querySelector('.im-c-move-controls--collapsed')).toBeInTheDocument()
   })
 
   it('labels direction buttons "Move" and pans by the large delta by default', () => {
-    render(<MoveControl />)
+    render(<MoveControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
     expect(mapProvider.panBy).toHaveBeenCalledWith([100, 0])
     expect(announce).toHaveBeenCalledWith('Moved right')
@@ -95,7 +95,7 @@ describe('MoveControl', () => {
 
   it('labels direction buttons "Nudge" and pans by the small delta when nudgeStepSize is small', () => {
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    render(<MoveControl />)
+    render(<MoveControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Nudge up' }))
     expect(mapProvider.panBy).toHaveBeenCalledWith([0, -5])
     expect(announce).toHaveBeenCalledWith('Nudged up')
@@ -103,7 +103,7 @@ describe('MoveControl', () => {
 
   it('routes direction clicks to mapProvider.activeMoveTarget instead of panning, when a plugin has claimed it', () => {
     mapProvider.activeMoveTarget = { move: jest.fn(), label: 'vertex' }
-    render(<MoveControl />)
+    render(<MoveControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
     expect(mapProvider.activeMoveTarget.move).toHaveBeenCalledWith(1, 0, true)
     expect(mapProvider.panBy).not.toHaveBeenCalled()
@@ -112,22 +112,22 @@ describe('MoveControl', () => {
 
   it('falls back to panning once activeMoveTarget is released', () => {
     mapProvider.activeMoveTarget = { move: jest.fn(), label: 'vertex' }
-    const { rerender } = render(<MoveControl />)
+    const { rerender } = render(<MoveControls />)
     mapProvider.activeMoveTarget = null
-    rerender(<MoveControl />)
+    rerender(<MoveControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
     expect(mapProvider.panBy).toHaveBeenCalledWith([100, 0])
   })
 
   it('omits the target label from the announcement when activeMoveTarget has none', () => {
     mapProvider.activeMoveTarget = { move: jest.fn() }
-    render(<MoveControl />)
+    render(<MoveControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Move up' }))
     expect(announce).toHaveBeenCalledWith('Moved up')
   })
 
   it('zooms in and out by the large delta by default and announces the action', () => {
-    render(<MoveControl />)
+    render(<MoveControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
     expect(mapProvider.zoomIn).toHaveBeenCalledWith(1)
     expect(announce).toHaveBeenCalledWith('Zoomed in')
@@ -139,26 +139,26 @@ describe('MoveControl', () => {
 
   it('zooms by the small delta when nudgeStepSize is small', () => {
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    render(<MoveControl />)
+    render(<MoveControls />)
     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 />)
+    const { rerender } = render(<MoveControls />)
     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 />)
+    rerender(<MoveControls />)
     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 />)
+    render(<MoveControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
     fireEvent.click(screen.getByRole('button', { name: 'Zoom out' }))
     expect(mapProvider.zoomIn).not.toHaveBeenCalled()
@@ -177,7 +177,7 @@ describe('MoveControl', () => {
     it('returns focus to the viewport after panning on mouse/touch, so arrow-key shortcuts elsewhere are not left stranded on the D-pad button', () => {
       const appState = buildAppState({ interfaceType: 'mouse' })
       useApp.mockReturnValue(appState)
-      render(<MoveControl />)
+      render(<MoveControls />)
 
       fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
       expect(appState.layoutRefs.viewportRef.current.focus).toHaveBeenCalled()
@@ -185,19 +185,19 @@ describe('MoveControl', () => {
 
     it('keeps focus on the button when driven by keyboard, so repeated Enter/Space presses do not require re-tabbing', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard' }))
-      render(<MoveControl />)
+      render(<MoveControls />)
       fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
       expect(rafSpy).not.toHaveBeenCalled()
     })
 
     it('also returns focus after zooming on mouse/touch, but not on keyboard', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'mouse' }))
-      const { rerender } = render(<MoveControl />)
+      const { rerender } = render(<MoveControls />)
       fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
       expect(rafSpy).toHaveBeenCalledTimes(1)
 
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard' }))
-      rerender(<MoveControl />)
+      rerender(<MoveControls />)
       fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
       expect(rafSpy).toHaveBeenCalledTimes(1)
     })
@@ -205,7 +205,7 @@ describe('MoveControl', () => {
     it('also returns focus after a vertex nudge via activeMoveTarget on mouse/touch', () => {
       mapProvider.activeMoveTarget = { move: jest.fn(), label: 'vertex' }
       useApp.mockReturnValue(buildAppState({ interfaceType: 'touch' }))
-      render(<MoveControl />)
+      render(<MoveControls />)
       fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
       expect(rafSpy).toHaveBeenCalledTimes(1)
     })
@@ -217,7 +217,7 @@ describe('MoveControl', () => {
     // arrow keys without first tabbing all the way back out to the map.
     it('pans the map on an arrow key, regardless of which button currently has focus', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard' }))
-      render(<MoveControl />)
+      render(<MoveControls />)
       // Focus a button unrelated to the direction being pressed, to prove this
       // isn't just reading the focused button's own handler.
       fireEvent.focus(screen.getByRole('button', { name: 'Zoom in' }))
@@ -229,7 +229,7 @@ describe('MoveControl', () => {
     it('routes the arrow key through activeMoveTarget when a plugin has claimed the control', () => {
       mapProvider.activeMoveTarget = { move: jest.fn(), label: 'vertex' }
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard' }))
-      render(<MoveControl />)
+      render(<MoveControls />)
       fireEvent.keyDown(screen.getByRole('button', { name: 'Move up' }), { key: 'ArrowUp' })
       expect(mapProvider.activeMoveTarget.move).toHaveBeenCalledWith(0, -1, true)
       expect(mapProvider.panBy).not.toHaveBeenCalled()
@@ -237,14 +237,14 @@ describe('MoveControl', () => {
 
     it('ignores non-arrow keys, leaving default behaviour (e.g. Enter/Space activating the focused button) untouched', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard' }))
-      render(<MoveControl />)
+      render(<MoveControls />)
       fireEvent.keyDown(screen.getByRole('button', { name: 'Move up' }), { key: 'Enter' })
       expect(mapProvider.panBy).not.toHaveBeenCalled()
     })
 
     it('shift+arrow overrides the Precision toggle to the small step, matching the map\'s own native keyboard shortcuts', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard', nudgeStepSize: 'large' }))
-      render(<MoveControl />)
+      render(<MoveControls />)
       fireEvent.keyDown(screen.getByRole('button', { name: 'Move right' }), { key: 'ArrowRight', shiftKey: true })
       expect(mapProvider.panBy).toHaveBeenCalledWith([5, 0])
       expect(announce).toHaveBeenCalledWith('Nudged right')
@@ -252,7 +252,7 @@ describe('MoveControl', () => {
 
     it('shift+arrow still resolves to the small step when Precision is already on (idempotent, not a toggle-relative flip)', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard', nudgeStepSize: 'small' }))
-      render(<MoveControl />)
+      render(<MoveControls />)
       fireEvent.keyDown(screen.getByRole('button', { name: 'Nudge right' }), { key: 'ArrowRight', shiftKey: true })
       expect(mapProvider.panBy).toHaveBeenCalledWith([5, 0])
       expect(announce).toHaveBeenCalledWith('Nudged right')
@@ -261,14 +261,14 @@ describe('MoveControl', () => {
     it('shift+arrow overrides activeMoveTarget.move to the small step too', () => {
       mapProvider.activeMoveTarget = { move: jest.fn(), label: 'vertex' }
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard', nudgeStepSize: 'large' }))
-      render(<MoveControl />)
+      render(<MoveControls />)
       fireEvent.keyDown(screen.getByRole('button', { name: 'Move up' }), { key: 'ArrowUp', shiftKey: true })
       expect(mapProvider.activeMoveTarget.move).toHaveBeenCalledWith(0, -1, false)
     })
 
     it('arrow key without shift still follows the Precision toggle as before', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard', nudgeStepSize: 'large' }))
-      render(<MoveControl />)
+      render(<MoveControls />)
       fireEvent.keyDown(screen.getByRole('button', { name: 'Move right' }), { key: 'ArrowRight' })
       expect(mapProvider.panBy).toHaveBeenCalledWith([100, 0])
       expect(announce).toHaveBeenCalledWith('Moved right')
@@ -276,11 +276,11 @@ describe('MoveControl', () => {
   })
 
   it('has a stable "Precision" label regardless of state', () => {
-    const { rerender } = render(<MoveControl />)
+    const { rerender } = render(<MoveControls />)
     expect(screen.getByRole('button', { name: 'Precision' })).toBeInTheDocument()
 
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    rerender(<MoveControl />)
+    rerender(<MoveControls />)
     expect(screen.getByRole('button', { name: 'Precision' })).toBeInTheDocument()
   })
 
@@ -294,29 +294,29 @@ describe('MoveControl', () => {
       return document.getElementById(button.getAttribute('aria-labelledby'))
     }
 
-    const { rerender } = render(<MoveControl />)
+    const { rerender } = render(<MoveControls />)
     let tooltip = getOwnTooltip()
     expect(tooltip.querySelector('[aria-hidden="true"]')).toHaveTextContent('(Off)')
     expect(tooltip).toHaveTextContent('Precision (Off)')
 
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    rerender(<MoveControl />)
+    rerender(<MoveControls />)
     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 />)
+    const { rerender } = render(<MoveControls />)
     expect(screen.getByRole('button', { name: 'Precision' })).toHaveAttribute('aria-pressed', 'false')
 
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    rerender(<MoveControl />)
+    rerender(<MoveControls />)
     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 />)
+    render(<MoveControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Precision' }))
     expect(dispatch).toHaveBeenCalledWith({ type: 'TOGGLE_NUDGE_STEP' })
     expect(announce).toHaveBeenCalledWith('Precision on')
@@ -324,7 +324,7 @@ describe('MoveControl', () => {
 
   it('toggles precision off and announces it when currently in small-step mode', () => {
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    render(<MoveControl />)
+    render(<MoveControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Precision' }))
     expect(dispatch).toHaveBeenCalledWith({ type: 'TOGGLE_NUDGE_STEP' })
     expect(announce).toHaveBeenCalledWith('Precision off')

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

@@ -56,9 +56,19 @@ const buildBodyProps = ({ bodyRef, panelBodyClass, isBodyScrollable, elementId }
   'aria-labelledby': isBodyScrollable ? `${elementId}-label` : undefined
 })
 
+// Renders the panel body's content: an ordered list of items (own content plus any
+// controls injected via the `<panelId>-panel` slot convention), or the legacy single
+// WrappedChild/children shape for callers that don't build an items list (e.g. HtmlElementHost).
+const BodyContent = ({ items, WrappedChild, props, children }) => { // NOSONAR
+  if (items) {
+    return items.map(item => <React.Fragment key={item.id}>{item.element}</React.Fragment>)
+  }
+  return WrappedChild ? <WrappedChild {...props} /> : children
+}
+
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
-export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild, label, html, children, isOpen = true, rootRef }) => {
+export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild, items, label, html, children, isOpen = true, rootRef }) => {
   const { id } = useConfig()
   const { dispatch, breakpoint, layoutRefs, interfaceType } = useApp()
 
@@ -103,6 +113,10 @@ export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild,
 
   const panelProps = buildPanelProps({ elementId, shouldFocus, isDialog, isDismissible, isModal, width: bpConfig.width, panelClass, slot: bpConfig.slot })
   const bodyProps = buildBodyProps({ bodyRef, panelBodyClass, isBodyScrollable, elementId })
+  // DOM anchor for controls DOM-projected via the JS/consumer-HTML API — see HtmlElementHost.jsx.
+  // Only present on the items-capable body below: dangerouslySetInnerHTML owns the static-html
+  // body's children, so it can't also host controls injected via the panel-slot convention.
+  const panelBodySlot = `${stringToKebab(panelId)}-panel`
 
   return (
     <div // nosonar
@@ -118,6 +132,7 @@ export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild,
 
       {isDismissible && (
         <button
+          type='button'
           aria-label={`Close ${label}`}
           className='im-c-panel__close'
           onClick={handleClose}
@@ -129,8 +144,8 @@ export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild,
       {innerHtmlProp
         ? <div {...bodyProps} dangerouslySetInnerHTML={innerHtmlProp} /> // nosonar
         : (
-          <div {...bodyProps}> {/* nosonar */}
-            {WrappedChild ? <WrappedChild {...props} /> : children}
+          <div {...bodyProps} data-panel-slot={panelBodySlot}> {/* nosonar */}
+            <BodyContent items={items} WrappedChild={WrappedChild} props={props}>{children}</BodyContent>
           </div>
           )}
     </div>

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

@@ -18,6 +18,7 @@
     min-height: 0;
     min-width: var(--min-panel-width);
     pointer-events: auto;
+    color: var(--foreground-color);
     background-color: var(--background-color);
 }
 
@@ -98,19 +99,28 @@
     );
 }
 
-// When banner heading is hidden we need to align with the close button
-.im-o-app--desktop .im-c-panel--banner.im-c-panel--no-heading {
-    .im-c-panel__close {
-        top: var(--banner-close-button-gap);
-        right: var(--banner-close-button-gap);
+// Banner gets small rounded corners instead of the default square panel look.
+.im-c-panel--banner {
+    &,
+    &::before {
+        border-radius: var(--banner-border-radius);
     }
 
-    .im-c-panel__body--offset {
-        padding-top: 10px;
-        padding-bottom: 10px;
+    &::after {
+        border-radius: calc(var(--banner-border-radius) - 2px);
     }
 }
 
+// No heading means no built-in top spacing, so add it back here.
+.im-c-panel--no-heading .im-c-panel__body {
+    padding-top: var(--panel-margin);
+}
+
+// Ensures the body is tall enough to contain the close button.
+.im-c-panel--no-heading .im-c-panel__body--offset {
+    min-height: calc((var(--panel-close-button-gap) * 2) + var(--button-size));
+}
+
 .im-c-panel__body--offset {
     padding-right: calc(var(--button-size) + var(--divider-gap));
 }

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

@@ -194,5 +194,39 @@ describe('Panel', () => {
       renderPanel({}, { html: '<p>HTML content</p>' })
       expect(screen.getByText('HTML content')).toBeInTheDocument()
     })
+
+    it('renders each items entry in list order', () => {
+      const items = [
+        { id: 'a', element: <p>First</p> },
+        { id: 'b', element: <p>Second</p> }
+      ]
+      renderPanel({}, { items })
+      expect(screen.getByText('First')).toBeInTheDocument()
+      expect(screen.getByText('Second')).toBeInTheDocument()
+    })
+
+    it('prefers items over WrappedChild/children when provided', () => {
+      const Wrapped = () => <p>Wrapped</p>
+      renderPanel({}, {
+        items: [{ id: 'a', element: <p>Item</p> }],
+        WrappedChild: Wrapped,
+        children: <p>Child content</p>
+      })
+      expect(screen.getByText('Item')).toBeInTheDocument()
+      expect(screen.queryByText('Wrapped')).not.toBeInTheDocument()
+      expect(screen.queryByText('Child content')).not.toBeInTheDocument()
+    })
+
+    it('stamps data-panel-slot on the items-capable body, for controls DOM-projected via the JS API', () => {
+      const { container } = renderPanel({}, { items: [{ id: 'a', element: <p>Item</p> }] })
+      const body = container.querySelector('.im-c-panel__body')
+      expect(body).toHaveAttribute('data-panel-slot', 'settings-panel')
+    })
+
+    it('does not stamp data-panel-slot on a static-html body', () => {
+      const { container } = renderPanel({}, { html: '<p>HTML content</p>' })
+      const body = container.querySelector('.im-c-panel__body')
+      expect(body).not.toHaveAttribute('data-panel-slot')
+    })
   })
 })

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

@@ -45,34 +45,32 @@ describe('Tooltip', () => {
 
   it('shows and hides tooltip on mouse interactions', () => {
     const { button, tooltip } = renderTooltip()
-    act(() => fireEvent.mouseEnter(button))
+    fireEvent.mouseEnter(button)
     advanceTimers()
     expect(tooltip).toHaveClass('im-c-tooltip--is-visible')
     expect(getTooltipPosition).toHaveBeenCalled()
-    act(() => fireEvent.mouseLeave(button))
+    fireEvent.mouseLeave(button)
     advanceTimers(0)
     expect(tooltip).not.toHaveClass('im-c-tooltip--is-visible')
   })
 
   it('cancels tooltip on mouse down or key down', () => {
     const { button, tooltip } = renderTooltip()
-    act(() => {
-      fireEvent.mouseEnter(button)
-      fireEvent.mouseDown(button)
-      fireEvent.mouseEnter(button)
-      fireEvent.keyDown(button)
-    })
+    fireEvent.mouseEnter(button)
+    fireEvent.mouseDown(button)
+    fireEvent.mouseEnter(button)
+    fireEvent.keyDown(button)
     advanceTimers()
     expect(tooltip).not.toHaveClass('im-c-tooltip--is-visible')
   })
 
   it('handles focus interactions for keyboard interface', () => {
     const { button, tooltip, wrapper } = renderTooltip({}, 'keyboard')
-    act(() => fireEvent.focus(button))
+    fireEvent.focus(button)
     advanceTimers()
     expect(wrapper).toHaveClass('im-c-tooltip-wrapper--has-focus')
     expect(tooltip).toHaveClass('im-c-tooltip--is-visible')
-    act(() => fireEvent.blur(button))
+    fireEvent.blur(button)
     advanceTimers(0)
     expect(wrapper).not.toHaveClass('im-c-tooltip-wrapper--has-focus')
     expect(tooltip).not.toHaveClass('im-c-tooltip--is-visible')
@@ -80,22 +78,22 @@ describe('Tooltip', () => {
 
   it('does not show tooltip on focus if interfaceType is mouse', () => {
     const { button, tooltip } = renderTooltip()
-    act(() => fireEvent.focus(button))
+    fireEvent.focus(button)
     advanceTimers()
     expect(tooltip).not.toHaveClass('im-c-tooltip--is-visible')
   })
 
   it('hides tooltip on Escape key', () => {
     const { button, tooltip } = renderTooltip()
-    act(() => fireEvent.mouseEnter(button))
+    fireEvent.mouseEnter(button)
     advanceTimers()
-    act(() => fireEvent.keyDown(window, { key: 'Escape' }))
+    fireEvent.keyDown(window, { key: 'Escape' })
     expect(tooltip).not.toHaveClass('im-c-tooltip--is-visible')
   })
 
   it('removes keydown listener on unmount', () => {
     const { button, unmount } = renderTooltip({}, 'keyboard')
-    act(() => fireEvent.mouseEnter(button))
+    fireEvent.mouseEnter(button)
     advanceTimers()
     const removeSpy = jest.spyOn(window, 'removeEventListener')
     unmount()

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

@@ -18,7 +18,7 @@ import { Markers } from '../Markers/Markers'
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
 export const Viewport = () => {
-  const { id, mapProvider, mapLabel, keyboardHintText } = useConfig()
+  const { id, mapProvider, mapLabel, keyboardHintText, focusOnMount } = useConfig()
   const { mode, previousMode, layoutRefs, safeZoneInset, dispatch } = useApp()
   const { mapSize } = useMap()
   const { eventBus, hints } = useService()
@@ -62,6 +62,13 @@ export const Viewport = () => {
     }
   }, [mode])
 
+  // Focus the viewport on mount when opened by a genuine launcher click (see InteractiveMap.js's _handleButtonClick), never on an auto-load or resize.
+  useEffect(() => {
+    if (focusOnMount) {
+      layoutRefs.viewportRef?.current.focus()
+    }
+  }, [])
+
   return (
     <>
       <MapController mapContainerRef={mapContainerRef} />
@@ -71,6 +78,7 @@ export const Viewport = () => {
         aria-label={mapLabel}
         role='application'
         tabIndex='0' // nosonar
+        data-map-keyboard-scope
         onFocus={handleFocus}
         onBlur={handleBlur}
         ref={layoutRefs.viewportRef}

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

@@ -115,6 +115,17 @@ describe('Viewport rendering', () => {
     onViewportFocusChange(false)
     expect(hints.dismiss).toHaveBeenCalled()
   })
+
+  it('focuses the viewport on mount when focusOnMount is true', () => {
+    useConfig.mockReturnValueOnce({ ...useConfig(), focusOnMount: true })
+    const { viewport } = renderViewport()
+    expect(viewport).toHaveFocus()
+  })
+
+  it('does not focus the viewport on mount when focusOnMount is false', () => {
+    renderViewport()
+    expect(viewportEl).not.toHaveFocus()
+  })
 })
 
 describe('Viewport interactions', () => {

package/src/App/hooks/useFeatureItems.js

@@ -1,9 +1,12 @@
 import { useState, useEffect } from 'react'
 
+const SET_FEATURES = 'map:setfeatures'
+const SET_FEATURES_SUPPRESSED = 'map:setfeaturessuppressed'
+
 /**
- * Subscribes to map:setfeatures and exposes the current listbox item list and multiselectable flag.
- * The list is produced by useMapItemList in the interact plugin and pushed via the event bus
- * whenever the visible set of markers or features changes.
+ * Subscribes to map:setfeatures for the listbox item list, and map:setfeaturessuppressed
+ * (any plugin can emit this) to report items as empty while suppressed regardless of what's
+ * actually visible — which is what drives <Features>'s own tabIndex/aria-hidden.
  *
  * @param {object} eventBus
  * @returns {{ items: Array<{ id: string, label: string }>, multiselectable: boolean }}
@@ -11,20 +14,26 @@ import { useState, useEffect } from 'react'
 export function useFeatureItems (eventBus) {
   const [items, setItems] = useState([])
   const [multiselectable, setMultiselectable] = useState(false)
+  const [suppressed, setSuppressed] = useState(false)
 
   useEffect(() => {
     if (!eventBus) {
       return undefined
     }
-    const handle = ({ items: next = [], multiselectable: nextMultiselectable = false }) => {
+    const handleSetFeatures = ({ items: next = [], multiselectable: nextMultiselectable = false }) => {
       setItems(next)
       setMultiselectable(nextMultiselectable)
     }
-    eventBus.on('map:setfeatures', handle)
+    const handleSuppressed = ({ suppressed: next = false } = {}) => {
+      setSuppressed(next)
+    }
+    eventBus.on(SET_FEATURES, handleSetFeatures)
+    eventBus.on(SET_FEATURES_SUPPRESSED, handleSuppressed)
     return () => {
-      eventBus.off('map:setfeatures', handle)
+      eventBus.off(SET_FEATURES, handleSetFeatures)
+      eventBus.off(SET_FEATURES_SUPPRESSED, handleSuppressed)
     }
   }, [eventBus])
 
-  return { items, multiselectable }
+  return { items: suppressed ? [] : items, multiselectable }
 }