@defra/interactive-map 0.0.43-fmp-experimental → 0.0.45-alpha

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
-import { MoveControls } from './MoveControls.jsx'
+import { MapControls } from './MapControls.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('MoveControls', () => {
+describe('MapControls', () => {
   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 MoveControls itself reads.
+  // mockReturnValue needs to carry these alongside the fields MapControls itself reads.
   const buildAppState = (overrides) => ({
     buttonRefs: { current: {} },
     interfaceType: 'mouse',
     breakpoint: 'desktop',
     dispatch,
-    expandedButtons: new Set(['moveControls']),
+    expandedButtons: new Set(['mapControls']),
     nudgeStepSize: 'large',
     layoutRefs: { viewportRef: { current: { focus: jest.fn() } } },
     ...overrides
@@ -50,29 +50,29 @@ describe('MoveControls', () => {
   afterEach(() => jest.clearAllMocks())
 
   it('renders with the id matching the trigger button aria-controls value', () => {
-    const { container } = render(<MoveControls />)
-    expect(container.querySelector('#im-move-controls-content')).toBeInTheDocument()
+    const { container } = render(<MapControls />)
+    expect(container.querySelector('#im-map-controls-content')).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('is not visually collapsed when mapControls is expanded', () => {
+    const { container } = render(<MapControls />)
+    expect(container.querySelector('.im-c-map-controls--collapsed')).not.toBeInTheDocument()
   })
 
   it('moves focus to the first direction button when the control opens', () => {
-    const { rerender } = render(<MoveControls />)
+    const { rerender } = render(<MapControls />)
     useApp.mockReturnValue(buildAppState({ expandedButtons: new Set() }))
-    rerender(<MoveControls />)
+    rerender(<MapControls />)
 
-    useApp.mockReturnValue(buildAppState({ expandedButtons: new Set(['moveControls']) }))
-    rerender(<MoveControls />)
+    useApp.mockReturnValue(buildAppState({ expandedButtons: new Set(['mapControls']) }))
+    rerender(<MapControls />)
     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(<MoveControls />)
+      const { container, unmount } = render(<MapControls />)
       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('MoveControls', () => {
     })
   })
 
-  it('is collapsed when moveControls is not expanded', () => {
+  it('is collapsed when mapControls is not expanded', () => {
     useApp.mockReturnValue(buildAppState({ expandedButtons: new Set() }))
-    const { container } = render(<MoveControls />)
-    expect(container.querySelector('.im-c-move-controls--collapsed')).toBeInTheDocument()
+    const { container } = render(<MapControls />)
+    expect(container.querySelector('.im-c-map-controls--collapsed')).toBeInTheDocument()
   })
 
   it('labels direction buttons "Move" and pans by the large delta by default', () => {
-    render(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
     expect(mapProvider.panBy).toHaveBeenCalledWith([100, 0])
     expect(announce).toHaveBeenCalledWith('Moved right')
@@ -95,7 +95,7 @@ describe('MoveControls', () => {
 
   it('labels direction buttons "Nudge" and pans by the small delta when nudgeStepSize is small', () => {
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    render(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Nudge up' }))
     expect(mapProvider.panBy).toHaveBeenCalledWith([0, -5])
     expect(announce).toHaveBeenCalledWith('Nudged up')
@@ -103,7 +103,7 @@ describe('MoveControls', () => {
 
   it('routes direction clicks to mapProvider.activeMoveTarget instead of panning, when a plugin has claimed it', () => {
     mapProvider.activeMoveTarget = { move: jest.fn(), label: 'vertex' }
-    render(<MoveControls />)
+    render(<MapControls />)
     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('MoveControls', () => {
 
   it('falls back to panning once activeMoveTarget is released', () => {
     mapProvider.activeMoveTarget = { move: jest.fn(), label: 'vertex' }
-    const { rerender } = render(<MoveControls />)
+    const { rerender } = render(<MapControls />)
     mapProvider.activeMoveTarget = null
-    rerender(<MoveControls />)
+    rerender(<MapControls />)
     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(<MoveControls />)
+    render(<MapControls />)
     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(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
     expect(mapProvider.zoomIn).toHaveBeenCalledWith(1)
     expect(announce).toHaveBeenCalledWith('Zoomed in')
@@ -139,26 +139,26 @@ describe('MoveControls', () => {
 
   it('zooms by the small delta when nudgeStepSize is small', () => {
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    render(<MoveControls />)
+    render(<MapControls />)
     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(<MoveControls />)
+    const { rerender } = render(<MapControls />)
     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(<MoveControls />)
+    rerender(<MapControls />)
     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(<MoveControls />)
+    render(<MapControls />)
     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('MoveControls', () => {
     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(<MoveControls />)
+      render(<MapControls />)
 
       fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
       expect(appState.layoutRefs.viewportRef.current.focus).toHaveBeenCalled()
@@ -185,19 +185,19 @@ describe('MoveControls', () => {
 
     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(<MoveControls />)
+      render(<MapControls />)
       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(<MoveControls />)
+      const { rerender } = render(<MapControls />)
       fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
       expect(rafSpy).toHaveBeenCalledTimes(1)
 
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard' }))
-      rerender(<MoveControls />)
+      rerender(<MapControls />)
       fireEvent.click(screen.getByRole('button', { name: 'Zoom in' }))
       expect(rafSpy).toHaveBeenCalledTimes(1)
     })
@@ -205,7 +205,7 @@ describe('MoveControls', () => {
     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(<MoveControls />)
+      render(<MapControls />)
       fireEvent.click(screen.getByRole('button', { name: 'Move right' }))
       expect(rafSpy).toHaveBeenCalledTimes(1)
     })
@@ -217,7 +217,7 @@ describe('MoveControls', () => {
     // 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(<MoveControls />)
+      render(<MapControls />)
       // 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('MoveControls', () => {
     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(<MoveControls />)
+      render(<MapControls />)
       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('MoveControls', () => {
 
     it('ignores non-arrow keys, leaving default behaviour (e.g. Enter/Space activating the focused button) untouched', () => {
       useApp.mockReturnValue(buildAppState({ interfaceType: 'keyboard' }))
-      render(<MoveControls />)
+      render(<MapControls />)
       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(<MoveControls />)
+      render(<MapControls />)
       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('MoveControls', () => {
 
     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(<MoveControls />)
+      render(<MapControls />)
       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('MoveControls', () => {
     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(<MoveControls />)
+      render(<MapControls />)
       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(<MoveControls />)
+      render(<MapControls />)
       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('MoveControls', () => {
   })
 
   it('has a stable "Precision" label regardless of state', () => {
-    const { rerender } = render(<MoveControls />)
+    const { rerender } = render(<MapControls />)
     expect(screen.getByRole('button', { name: 'Precision' })).toBeInTheDocument()
 
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    rerender(<MoveControls />)
+    rerender(<MapControls />)
     expect(screen.getByRole('button', { name: 'Precision' })).toBeInTheDocument()
   })
 
@@ -294,29 +294,29 @@ describe('MoveControls', () => {
       return document.getElementById(button.getAttribute('aria-labelledby'))
     }
 
-    const { rerender } = render(<MoveControls />)
+    const { rerender } = render(<MapControls />)
     let tooltip = getOwnTooltip()
     expect(tooltip.querySelector('[aria-hidden="true"]')).toHaveTextContent('(Off)')
     expect(tooltip).toHaveTextContent('Precision (Off)')
 
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    rerender(<MoveControls />)
+    rerender(<MapControls />)
     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(<MoveControls />)
+    const { rerender } = render(<MapControls />)
     expect(screen.getByRole('button', { name: 'Precision' })).toHaveAttribute('aria-pressed', 'false')
 
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    rerender(<MoveControls />)
+    rerender(<MapControls />)
     expect(screen.getByRole('button', { name: 'Precision' })).toHaveAttribute('aria-pressed', 'true')
   })
 
   it('toggles precision on and announces it when currently in large-step mode', () => {
-    render(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Precision' }))
     expect(dispatch).toHaveBeenCalledWith({ type: 'TOGGLE_NUDGE_STEP' })
     expect(announce).toHaveBeenCalledWith('Precision on')
@@ -324,7 +324,7 @@ describe('MoveControls', () => {
 
   it('toggles precision off and announces it when currently in small-step mode', () => {
     useApp.mockReturnValue(buildAppState({ nudgeStepSize: 'small' }))
-    render(<MoveControls />)
+    render(<MapControls />)
     fireEvent.click(screen.getByRole('button', { name: 'Precision' }))
     expect(dispatch).toHaveBeenCalledWith({ type: 'TOGGLE_NUDGE_STEP' })
     expect(announce).toHaveBeenCalledWith('Precision off')

package/src/App/components/Markers/Markers.jsx

@@ -67,11 +67,11 @@ export const Markers = () => {
     const handleSetActive = ({ id: markerId }) => setActiveMarkerId(markerId)
     eventBus.on('interact:active', handleActive)
     eventBus.on('interact:selectionchange', handleSelectionChange)
-    eventBus.on(EVENTS.MAP_SET_ACTIVE_FEATURE, handleSetActive)
+    eventBus.on(EVENTS.MAP_SET_ACTIVE_ITEM, handleSetActive)
     return () => {
       eventBus.off('interact:active', handleActive)
       eventBus.off('interact:selectionchange', handleSelectionChange)
-      eventBus.off(EVENTS.MAP_SET_ACTIVE_FEATURE, handleSetActive)
+      eventBus.off(EVENTS.MAP_SET_ACTIVE_ITEM, handleSetActive)
     }
   }, [eventBus])
 

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

@@ -20,9 +20,9 @@ const SVG_SEL = 'svg'
 const makeEventBus = () => {
   const listeners = {}
   return {
-    on: jest.fn((e, fn) => { listeners[e] = fn }),
+    on: jest.fn((eventName, fn) => { listeners[eventName] = fn }),
     off: jest.fn(),
-    emit: (e, payload) => listeners[e]?.(payload)
+    emit: (eventName, payload) => listeners[eventName]?.(payload)
   }
 }
 
@@ -170,7 +170,7 @@ describe('Markers — selection', () => {
   })
 
   it('calls resolveActive when the marker is the active listbox item', () => {
-    const SET_ACTIVE = 'map:setactivefeature'
+    const SET_ACTIVE = 'map:setactiveitem'
     const sr = makeSymbolRegistry({ resolveActive: jest.fn(() => '<circle class="active"/>') })
     const { eb } = setup({ markers: [makeMarker()], symbolRegistry: sr })
     act(() => eb.emit(SET_ACTIVE, { id: MARKER_ID }))

package/src/App/components/Markers/SymbolMarker.jsx

@@ -3,7 +3,7 @@ import { stringToKebab } from '../../../utils/stringToKebab.js'
 const SymbolMarker = ({ marker, mapId, markerRef, isSelected, symbolProps }) => { // NOSONAR: project does not use PropTypes
   const { resolvedSvg, viewBox, anchor, shapeId, scaledWidth, scaledHeight } = symbolProps
   return (
-    <svg // NOSONAR: role='img' with aria-label is the correct ARIA pattern for SVG icons; <img> is not appropriate here
+    <svg
       ref={markerRef(marker.id)}
       id={`${mapId}-marker-${marker.id}`}
       className={[
@@ -15,8 +15,7 @@ const SymbolMarker = ({ marker, mapId, markerRef, isSelected, symbolProps }) =>
       height={scaledHeight}
       viewBox={viewBox}
       overflow='visible'
-      role='img'
-      aria-label={marker.label || 'Map marker'}
+      aria-hidden='true'
       style={{
         display: marker.isVisible ? 'block' : 'none',
         marginLeft: `${-anchor[0] * scaledWidth}px`,

package/src/App/components/Markers/SymbolMarker.test.jsx

@@ -19,19 +19,18 @@ describe('SymbolMarker', () => {
     expect(container.querySelector('svg').getAttribute('id')).toBe('my-map-marker-marker-1')
   })
 
-  it('has role img', () => {
+  // Decorative: the ancestor markers layer is aria-hidden, and SpatialList (the accessible
+  // spatial listbox) is the sole accessible surface for a marker's label — see SpatialList.jsx.
+  it('is aria-hidden', () => {
     const { container } = render(<SymbolMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
-    expect(container.querySelector('svg').getAttribute('role')).toBe('img')
+    expect(container.querySelector('svg').getAttribute('aria-hidden')).toBe('true')
   })
 
-  it('aria-label uses marker.label', () => {
+  it('has no role or aria-label, regardless of marker.label', () => {
     const { container } = render(<SymbolMarker marker={makeMarker({ label: 'My location' })} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
-    expect(container.querySelector('svg').getAttribute('aria-label')).toBe('My location')
-  })
-
-  it('aria-label falls back to Map marker when no label', () => {
-    const { container } = render(<SymbolMarker marker={makeMarker()} mapId='map' markerRef={markerRef} isSelected={false} symbolProps={makeSymbolProps()} />)
-    expect(container.querySelector('svg').getAttribute('aria-label')).toBe('Map marker')
+    const svg = container.querySelector('svg')
+    expect(svg.getAttribute('role')).toBeNull()
+    expect(svg.getAttribute('aria-label')).toBeNull()
   })
 
   it('applies shapeId class', () => {

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

@@ -2,31 +2,20 @@ import React, { useRef, useEffect, useMemo } from 'react'
 import { useConfig } from '../../store/configContext'
 import { useApp } from '../../store/appContext'
 import { stringToKebab } from '../../../utils/stringToKebab.js'
+import { getPanelElementId } from '../../../utils/getPanelElementId.js'
 import { useModalPanelBehaviour } from '../../hooks/useModalPanelBehaviour.js'
 import { useIsScrollable } from '../../hooks/useIsScrollable.js'
+import { classifyPanel, getPanelRole } from '../../../utils/getPanelRole.js'
 import { Icon } from '../Icon/Icon'
 import { Tabs } from '../Tabs/Tabs.jsx'
 
 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 { isModal, isAside, isDismissible, isDialog } = classifyPanel(bpConfig)
   const shouldFocus = isModal || focusOnOpen === true || (focusOnOpen !== false && focus !== false && (focus === true || Boolean(triggeringElement)))
   const buttonContainerEl = bpConfig.slot.endsWith('button') ? triggeringElement?.parentNode : undefined
   return { isAside, isDialog, isModal, isDismissible, shouldFocus, buttonContainerEl }
 }
 
-const getPanelRole = (isDialog, isDismissible) => {
-  if (isDialog) {
-    return 'dialog'
-  }
-  if (isDismissible) {
-    return 'complementary'
-  }
-  return 'region'
-}
-
 const buildPanelClassNames = (slot, showLabel) => [
   'im-c-panel',
   `im-c-panel--${slot}`,
@@ -38,15 +27,17 @@ const buildPanelBodyClassNames = (showLabel, isDismissible) => [
   !showLabel && isDismissible && 'im-c-panel__body--offset'
 ].filter(Boolean).join(' ')
 
-const buildPanelProps = ({ elementId, shouldFocus, isDialog, isDismissible, isModal, width, panelClass, slot }) => ({
+const buildPanelProps = ({ elementId, shouldFocus, isDialog, isDismissible, isModal, width, panelClass, slot, isOpen }) => ({
   id: elementId,
   'aria-labelledby': `${elementId}-label`,
   tabIndex: shouldFocus ? -1 : undefined, // nosonar
-  role: getPanelRole(isDialog, isDismissible),
+  role: getPanelRole({ isDialog, isDismissible }),
   'aria-modal': isDialog && isModal ? 'true' : undefined,
   style: width ? { width } : undefined,
   className: panelClass,
-  'data-slot': slot
+  'data-slot': slot,
+  // Panel is mounted permanently (see mapPanels.js); hidden is what actually opens/closes it.
+  hidden: !isOpen
 })
 
 const buildBodyProps = ({ bodyRef, panelBodyClass, isBodyScrollable, elementId }) => ({
@@ -112,7 +103,7 @@ export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild,
 
   const rootEl = document.getElementById(`${id}-im-app`)
   const bpConfig = panelConfig[breakpoint]
-  const elementId = `${id}-panel-${stringToKebab(panelId)}`
+  const elementId = getPanelElementId(id, panelId)
 
   const { isAside, isDialog, isModal, isDismissible, shouldFocus, buttonContainerEl } = computePanelState(bpConfig, props?.triggeringElement, panelConfig.focus, focusOnOpen) // nosonar
 
@@ -129,7 +120,15 @@ export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild,
   const panelRef = rootRef || internalPanelRef
 
   const handleClose = () => {
-    requestAnimationFrame(() => { (props?.triggeringElement || layoutRefs.viewportRef.current).focus?.({ preventScroll: interfaceType !== 'keyboard' }) })
+    requestAnimationFrame(() => {
+      // Re-checked here, not at handleClose-call time — the triggering element (a button, a
+      // Features-list item, ...) may have been removed from the DOM while the panel was open
+      // (e.g. the map panned and the feature it came from dropped out of the current list).
+      // document.contains() on a detached node is false, not a throw, so this is a plain check.
+      const triggeringElement = props?.triggeringElement
+      const focusTarget = triggeringElement && document.contains(triggeringElement) ? triggeringElement : layoutRefs.viewportRef.current
+      focusTarget?.focus?.({ preventScroll: interfaceType !== 'keyboard' })
+    })
     dispatch({ type: 'CLOSE_PANEL', payload: panelId })
   }
 
@@ -149,7 +148,7 @@ export const Panel = ({ panelId, panelConfig, props, focusOnOpen, WrappedChild,
   const panelBodyClass = buildPanelBodyClassNames(bpConfig.showLabel ?? true, isDismissible)
   const innerHtmlProp = useMemo(() => html ? { __html: html } : null, [html])
 
-  const panelProps = buildPanelProps({ elementId, shouldFocus, isDialog, isDismissible, isModal, width: bpConfig.width, panelClass, slot: bpConfig.slot })
+  const panelProps = buildPanelProps({ elementId, shouldFocus, isDialog, isDismissible, isModal, width: bpConfig.width, panelClass, slot: bpConfig.slot, isOpen })
   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

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

@@ -20,6 +20,11 @@
     pointer-events: auto;
     color: var(--foreground-color);
     background-color: var(--background-color);
+
+    // Override needed: display: flex above beats the browser's default [hidden] rule otherwise.
+    &[hidden] {
+        display: none;
+    }
 }
 
 // 2. Elements
@@ -66,6 +71,10 @@
     // plain block child would.
     display: flex;
     flex-direction: column;
+
+    // A panel's `html` config (see Panel.jsx) commonly uses GOV.UK Frontend classes, which set
+    // colour explicitly rather than inheriting it — see tools/_govuk-content.scss.
+    @include tools.govuk-content-fallback-colors;
 }
 
 // The tabpanel (see Tabs.module.scss) is its own scroll/focus region nested inside this

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

@@ -102,6 +102,20 @@ describe('Panel', () => {
       expect(dialog).toHaveAttribute('aria-modal', 'true')
       expect(dialog).toHaveAttribute('tabIndex', '-1')
     })
+
+    it('renders dialog role and aria-modal for a modal panel even when dismissible is left unset (WCAG requires a modal to be dismissible)', () => {
+      renderPanel({ desktop: { slot: 'overlay', modal: true } })
+      const dialog = screen.getByRole('dialog')
+      expect(dialog).toHaveAttribute('aria-modal', 'true')
+      expect(screen.getByRole('button', { name: 'Close Settings' })).toBeInTheDocument()
+    })
+
+    it('renders dialog role and aria-modal for a modal panel even when dismissible: false is set (a non-dismissible modal would trap keyboard/AT users)', () => {
+      renderPanel({ desktop: { slot: 'overlay', modal: true, dismissible: false } })
+      const dialog = screen.getByRole('dialog')
+      expect(dialog).toHaveAttribute('aria-modal', 'true')
+      expect(screen.getByRole('button', { name: 'Close Settings' })).toBeInTheDocument()
+    })
   })
 
   describe('focus behaviour', () => {
@@ -142,9 +156,18 @@ describe('Panel', () => {
   })
 
   describe('close functionality', () => {
+    // document.contains() needs a real Node — a plain { focus: jest.fn() } mock object throws
+    // ("parameter 1 is not of type 'Node'"), so triggeringElement here is a real element, spied
+    // on and attached to the document, matching what production always passes
+    // (e.currentTarget / document.activeElement).
+    const makeAttachedTriggeringElement = () => {
+      const el = document.createElement('button')
+      document.body.appendChild(el)
+      return { el, focusMock: jest.spyOn(el, 'focus') }
+    }
+
     it('focuses triggeringElement on close for button slots', () => {
-      const focusMock = jest.fn()
-      const triggeringElement = { focus: focusMock, parentNode: document.createElement('div') }
+      const { el: triggeringElement, focusMock } = makeAttachedTriggeringElement()
 
       renderPanel(
         { desktop: { slot: 'top-button', dismissible: true, open: false } },
@@ -157,8 +180,7 @@ describe('Panel', () => {
     })
 
     it('handles close for non-button slots', () => {
-      const focusMock = jest.fn()
-      const triggeringElement = { focus: focusMock, parentNode: document.createElement('div') }
+      const { el: triggeringElement, focusMock } = makeAttachedTriggeringElement()
 
       renderPanel(
         { desktop: { slot: 'overlay', dismissible: true, modal: true } },
@@ -176,6 +198,20 @@ describe('Panel', () => {
       expect(layoutRefs.viewportRef.current.focus).toHaveBeenCalled()
       expect(dispatch).toHaveBeenCalledWith({ type: 'CLOSE_PANEL', payload: 'Settings' })
     })
+
+    it('falls back to viewportRef focus when triggeringElement has been removed from the DOM', () => {
+      const triggeringElement = document.createElement('button') // never attached
+      const focusMock = jest.spyOn(triggeringElement, 'focus')
+
+      renderPanel(
+        { desktop: { slot: 'side', dismissible: true, open: false } },
+        { props: { triggeringElement } }
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'Close Settings' }))
+      expect(focusMock).not.toHaveBeenCalled()
+      expect(layoutRefs.viewportRef.current.focus).toHaveBeenCalled()
+    })
   })
 
   describe('content rendering', () => {
@@ -308,4 +344,33 @@ describe('Panel', () => {
       })
     })
   })
+
+  describe('isOpen (always-mounted, hidden-toggle)', () => {
+    it('renders hidden (not unmounted) when isOpen is false, so its id stays a real element', () => {
+      renderPanel({}, { isOpen: false })
+      const panel = document.getElementById('app-panel-settings')
+      expect(panel).toBeInTheDocument()
+      expect(panel).toHaveAttribute('hidden')
+    })
+
+    it('does not focus a closed panel, even one that would otherwise auto-focus (modal)', () => {
+      renderPanel({ desktop: { slot: 'overlay', dismissible: true, modal: true } }, { isOpen: false })
+      const panel = document.getElementById('app-panel-settings')
+      expect(document.activeElement).not.toBe(panel)
+    })
+
+    it('keeps the same DOM node (no swap/remount) across an isOpen transition, and un-hides it once open', () => {
+      const panelConfig = { desktop: { slot: 'side', open: true, dismissible: false, modal: false, showLabel: true } }
+      const { rerender } = render(<Panel panelId='Settings' panelConfig={panelConfig} label='Settings' isOpen={false} />)
+      const panelWhileClosed = document.getElementById('app-panel-settings')
+      expect(panelWhileClosed).toHaveAttribute('hidden')
+
+      rerender(<Panel panelId='Settings' panelConfig={panelConfig} label='Settings' isOpen items={[{ id: 'a', element: <p>Item</p> }]} />)
+
+      const panelWhileOpen = document.getElementById('app-panel-settings')
+      expect(panelWhileOpen).toBe(panelWhileClosed)
+      expect(panelWhileOpen).not.toHaveAttribute('hidden')
+      expect(screen.getByText('Item')).toBeInTheDocument()
+    })
+  })
 })