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

package/src/App/components/MapButton/MapButton.jsx

@@ -1,6 +1,7 @@
 // components/MapButton.jsx
 import React, { useState, useRef, useCallback } from 'react'
 import { stringToKebab } from '../../../utils/stringToKebab'
+import { getPanelElementId } from '../../../utils/getPanelElementId.js'
 import { Tooltip } from '../Tooltip/Tooltip'
 import { Icon } from '../Icon/Icon'
 import { SlotRenderer } from '../../renderer/SlotRenderer'
@@ -88,6 +89,10 @@ const makePopupKeyUpHandler = (hasMenu, buttonRefs, buttonId, setMenuStartPos, s
 const getButtonSlot = (panelId, buttonId) =>
   panelId ? `${stringToKebab(buttonId)}-button` : undefined
 
+// aria-haspopup only accepts these role-shaped tokens (plus 'true', unused here) — any other
+// controlled-element role (e.g. a panel's 'complementary'/'region') means no aria-haspopup.
+const HASPOPUP_ROLES = new Set(['menu', 'listbox', 'tree', 'grid', 'dialog'])
+
 /**
  * Determines the controlled element (panel or popup menu) for ARIA attributes.
  * @param {Object} options - Configuration options
@@ -95,14 +100,16 @@ const getButtonSlot = (panelId, buttonId) =>
  * @param {string} options.panelId - ID of the controlled panel (if applicable)
  * @param {string} options.buttonId - Unique button identifier
  * @param {boolean} options.hasMenu - Whether the button has a popup menu
- * @returns {Object|null} Object with id and type ('panel' or 'popup'), or null if no controlled element
+ * @param {string} [options.panelRole] - The controlled panel's own ARIA role (see getPanelRole.js),
+ *   used for aria-haspopup on the button — undefined when no panel is controlled.
+ * @returns {Object|null} Object with id, type ('panel' or 'popup') and role, or null if no controlled element
  */
-const getControlledElement = ({ idPrefix, panelId, buttonId, hasMenu }) => {
+const getControlledElement = ({ idPrefix, panelId, buttonId, hasMenu, panelRole }) => {
   if (panelId) {
-    return { id: `${idPrefix}-panel-${stringToKebab(panelId)}`, type: 'panel' }
+    return { id: getPanelElementId(idPrefix, panelId), type: 'panel', role: panelRole }
   }
   if (hasMenu) {
-    return { id: `${idPrefix}-popup-${stringToKebab(buttonId)}`, type: 'popup' }
+    return { id: `${idPrefix}-popup-${stringToKebab(buttonId)}`, type: 'popup', role: 'menu' }
   }
   return null
 }
@@ -168,7 +175,7 @@ const buildButtonProps = ({
     'aria-expanded': ariaExpanded,
     'aria-pressed': typeof isPressed === 'boolean' ? isPressed : undefined,
     'aria-controls': controlledElement?.id ?? ariaControls,
-    'aria-haspopup': controlledElement?.type === 'popup' ? 'menu' : undefined,
+    'aria-haspopup': HASPOPUP_ROLES.has(controlledElement?.role) ? controlledElement.role : undefined,
     ...(href
       ? { href, target: '_blank', onKeyUp: handleKeyUp, role: 'button' }
       : { type: 'button' })
@@ -191,6 +198,7 @@ const buildButtonProps = ({
  * @param {boolean} [props.isExpanded] - Whether content controlled by the button is expanded
  * @param {boolean} [props.isHidden=false] - Whether to hide the button (CSS display: none)
  * @param {boolean} [props.isPanelOpen=false] - Whether the controlled panel is open
+ * @param {string} [props.panelRole] - The controlled panel's own ARIA role, used for aria-haspopup
  * @param {string} [props.variant] - CSS variant class for styling (e.g., 'primary')
  * @param {Function} [props.onClick] - Custom click handler
  * @param {string} [props.panelId] - ID of the panel controlled by this button
@@ -212,6 +220,7 @@ export const MapButton = ({
   isExpanded,
   isHidden,
   isPanelOpen,
+  panelRole,
   variant,
   onClick,
   panelId,
@@ -239,7 +248,7 @@ export const MapButton = ({
   const hasMenu = menuItems?.length >= 1
   const showIcon = iconId || iconSvgContent || hasMenu
   const buttonSlot = getButtonSlot(panelId, buttonId)
-  const controlledElement = getControlledElement({ idPrefix, panelId, buttonId, hasMenu })
+  const controlledElement = getControlledElement({ idPrefix, panelId, buttonId, hasMenu, panelRole })
 
   /**
    * Handles button click events.
@@ -301,7 +310,10 @@ export const MapButton = ({
     >
       {showLabel ? buttonEl : <Tooltip content={label}>{buttonEl}</Tooltip>}
       {buttonSlot && <SlotRenderer slot={buttonSlot} />}
-      {isPopupOpen && <PopupMenu popupMenuId={controlledElement.id} buttonId={buttonId} startPos={menuStartPos} menuRef={menuRef} items={menuItems} setIsOpen={setIsPopupOpen} buttonRect={menuRect} />}
+      {/* Mounted permanently, not just while open, so its aria-controls id stays a stable node. */}
+      {controlledElement?.type === 'popup' && (
+        <PopupMenu popupMenuId={controlledElement.id} buttonId={buttonId} startPos={menuStartPos} menuRef={menuRef} items={menuItems} setIsOpen={setIsPopupOpen} buttonRect={menuRect} isOpen={isPopupOpen} />
+      )}
     </div>
   )
 }

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

@@ -30,8 +30,7 @@
     justify-content: center;
     align-items: center;
 
-    padding-left: var(--button-padding);
-    padding-right: var(--button-padding);
+    padding: 0 var(--button-padding) 0 var(--button-padding);
 
     pointer-events: auto;
     color: var(--foreground-color);

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

@@ -23,7 +23,8 @@ jest.mock('../../renderer/SlotRenderer', () => ({
 }))
 
 jest.mock('../PopupMenu/PopupMenu', () => ({
-  PopupMenu: ({ startPos, items, buttonRect }) => {
+  // Mirrors the real component: always mounted, hidden/children gated by isOpen.
+  PopupMenu: ({ popupMenuId, isOpen, startPos, items, buttonRect }) => {
     let selectedIndex = -1
     if (startPos === 'first' && items?.length > 0) {
       selectedIndex = 0
@@ -31,7 +32,11 @@ jest.mock('../PopupMenu/PopupMenu', () => ({
     if (startPos === 'last' && items?.length > 0) {
       selectedIndex = items.length - 1
     }
-    return <div data-testid='popup-menu' data-start-pos={String(startPos)} data-selected-index={String(selectedIndex)} data-has-rect={String(!!buttonRect)}>{items?.map((item, i) => <div key={i} data-testid={`menu-item-${i}`}>{item.label}</div>)}</div>
+    return (
+      <div id={popupMenuId} hidden={!isOpen} data-testid='popup-menu' data-start-pos={String(startPos)} data-selected-index={String(selectedIndex)} data-has-rect={String(!!buttonRect)}>
+        {isOpen && items?.map((item, i) => <div key={i} data-testid={`menu-item-${i}`}>{item.label}</div>)}
+      </div>
+    )
   }
 }))
 
@@ -78,9 +83,20 @@ describe('MapButton', () => {
     expect(button).toHaveAttribute('aria-expanded', 'false')
     expect(button).not.toHaveAttribute('aria-pressed')
     expect(button).toHaveAttribute('aria-controls', 'prefix-panel-settings')
+    expect(button).not.toHaveAttribute('aria-haspopup')
     expect(screen.getByTestId('slot')).toHaveAttribute('data-slot', 'test-button')
   })
 
+  it('sets aria-haspopup="dialog" when the controlled panel is a dialog', () => {
+    renderButton({ panelId: 'Settings', idPrefix: 'prefix', panelRole: 'dialog' })
+    expect(getButton()).toHaveAttribute('aria-haspopup', 'dialog')
+  })
+
+  it.each(['complementary', 'region'])('sets no aria-haspopup when the controlled panel role is %s', (panelRole) => {
+    renderButton({ panelId: 'Settings', idPrefix: 'prefix', panelRole })
+    expect(getButton()).not.toHaveAttribute('aria-haspopup')
+  })
+
   it.each([
     [{ isPressed: true }, 'true'],
     [{ isPressed: 'true' }, undefined]
@@ -118,7 +134,7 @@ describe('MapButton', () => {
     renderButton({ isDisabled: true, menuItems: [{ label: 'Item' }], onClick })
     fireEvent.click(getButton())
     expect(onClick).not.toHaveBeenCalled()
-    expect(screen.queryByTestId('popup-menu')).not.toBeInTheDocument()
+    expect(screen.getByTestId('popup-menu')).not.toBeVisible()
   })
 
   it('stores button refs correctly', () => {
@@ -138,6 +154,28 @@ describe('MapButton', () => {
     expect(button).toHaveAttribute('aria-haspopup', 'menu')
   })
 
+  it('reserves the aria-controls id as a stable, hidden node before the popup has ever been opened', () => {
+    renderButton({ idPrefix: 'prefix', menuItems: [{ label: 'Item' }] })
+    const menu = document.getElementById('prefix-popup-test')
+    expect(menu).toBeInTheDocument()
+    expect(menu).not.toBeVisible()
+  })
+
+  it('keeps the same DOM node (no swap/remount) when opening and closing the popup', () => {
+    renderButton({ idPrefix: 'prefix', menuItems: [{ label: 'Item' }] })
+    const menuBeforeOpen = document.getElementById('prefix-popup-test')
+
+    fireEvent.click(getButton())
+    const menuWhileOpen = document.getElementById('prefix-popup-test')
+    expect(menuWhileOpen).toBe(menuBeforeOpen)
+    expect(menuWhileOpen).toBeVisible()
+
+    fireEvent.click(getButton())
+    const menuAfterClose = document.getElementById('prefix-popup-test')
+    expect(menuAfterClose).toBe(menuBeforeOpen)
+    expect(menuAfterClose).not.toBeVisible()
+  })
+
   it('toggles popup aria-expanded and startPos', () => {
     renderButton({ menuItems: [{ label: 'Item' }] })
     const button = getButton()
@@ -224,7 +262,7 @@ describe('MapButton', () => {
   it('does nothing for unrelated keys', () => {
     renderButton({ menuItems: [{ label: 'Item' }] })
     fireEvent.keyUp(getButton(), { key: 'Enter' })
-    expect(screen.queryByTestId('popup-menu')).not.toBeInTheDocument()
+    expect(screen.getByTestId('popup-menu')).not.toBeVisible()
   })
 
   it.each([

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

@@ -18,13 +18,13 @@ const ZOOM_ACTIONS = [
   { id: 'nudgeZoomOut', label: 'Zoom out', announceLabel: 'Zoomed out', method: 'zoomOut' }
 ]
 
-export const MoveControls = () => {
+export const MapControls = () => {
   const { id: appId, mapProvider, panDelta, nudgePanDelta, zoomDelta, nudgeZoomDelta } = useConfig()
   const { dispatch, expandedButtons, nudgeStepSize, interfaceType, layoutRefs } = useApp()
   const { isAtMaxZoom, isAtMinZoom } = useMap()
   const { announce } = useService()
 
-  const isOpen = expandedButtons.has('moveControls')
+  const isOpen = expandedButtons.has('mapControls')
   const firstDirectionButtonId = `${appId}-pan-up`
 
   useEffect(() => {
@@ -41,7 +41,7 @@ export const MoveControls = () => {
   // Registry buttons (declared via a plugin's manifest) auto-return focus to the map
   // viewport after a click (see createButtonClickHandler in mapButtons.js) unless
   // marked keepFocus — which is how e.g. draw's own toolbar buttons never leave
-  // keyboard shortcuts (like arrow-key vertex nudging) stranded afterward. MoveControls
+  // keyboard shortcuts (like arrow-key vertex nudging) stranded afterward. MapControls
   // renders its own buttons directly, bypassing that mechanism entirely, so it has to
   // replicate the same return-to-viewport behaviour itself. But unlike a one-off
   // action button, the D-pad is meant to be pressed repeatedly — a keyboard/switch
@@ -70,7 +70,7 @@ export const MoveControls = () => {
 
     // Any plugin can claim the D-pad for something other than panning the map (e.g.
     // moving a selected draw vertex) by setting mapProvider.activeMoveTarget — a
-    // generic { move(dx, dy, isLargeStep), label? } contract. MoveControls doesn't
+    // generic { move(dx, dy, isLargeStep), label? } contract. MapControls doesn't
     // know or care what's claiming it; it just checks for a claimant before
     // defaulting to its own panBy behaviour. Read fresh on every click rather than
     // subscribed to reactively, since it's a plain mapProvider property, not state.
@@ -107,7 +107,7 @@ export const MoveControls = () => {
   // first tabbing all the way back to the map. Handling arrow keys here — while
   // focus is anywhere within this control, not just on a direction button — covers
   // that directly, without needing draw's (or the app's own) keyboard-shortcut
-  // guards to special-case MoveControls' buttons. Only arrow keys are handled;
+  // guards to special-case MapControls' buttons. Only arrow keys are handled;
   // other shortcuts (delete/escape/undo) still require focus on the viewport,
   // which mouse/touch users already get back automatically after any click here.
   const handleContainerKeyDown = (e) => {
@@ -120,12 +120,12 @@ export const MoveControls = () => {
   }
 
   const containerClassName = [
-    'im-c-move-controls',
-    !isOpen && 'im-c-move-controls--collapsed'
+    'im-c-map-controls',
+    !isOpen && 'im-c-map-controls--collapsed'
   ].filter(Boolean).join(' ')
 
   const directionsGroup = (
-    <div key='directions' role='group' aria-label='Direction controls' className='im-c-move-controls__directions'>{/* NOSONAR - div with role="group" is correct for a button group */}
+    <div key='directions' role='group' aria-label='Direction controls' className='im-c-map-controls__directions'>{/* NOSONAR - div with role="group" is correct for a button group */}
       {DIRECTIONS.map(({ id, verb, dx, dy }) => (
         <MapButton
           key={id}
@@ -154,7 +154,7 @@ export const MoveControls = () => {
   )
 
   const zoomGroup = (
-    <div key='zoom' role='group' aria-label='Zoom controls' className='im-c-move-controls__zoom'>{/* NOSONAR - div with role="group" is correct for a button group */}
+    <div key='zoom' role='group' aria-label='Zoom controls' className='im-c-map-controls__zoom'>{/* NOSONAR - div with role="group" is correct for a button group */}
       {ZOOM_ACTIONS.map(({ id, label, announceLabel, method }) => (
         <MapButton
           key={id}
@@ -169,7 +169,7 @@ export const MoveControls = () => {
   )
 
   return (
-    <div id={`${appId}-move-controls-content`} className={containerClassName} onKeyDown={handleContainerKeyDown} data-map-keyboard-scope>{/* NOSONAR - only catches arrow-key bubbling from the real, already-focusable button descendants below; the div itself needs no role/tabIndex */}
+    <div id={`${appId}-map-controls-content`} className={containerClassName} onKeyDown={handleContainerKeyDown} data-map-keyboard-scope>{/* NOSONAR - only catches arrow-key bubbling from the real, already-focusable button descendants below; the div itself needs no role/tabIndex */}
       {directionsGroup}
       {zoomGroup}
     </div>

package/src/App/components/{MoveControls/MoveControls.module.scss → MapControls/MapControls.module.scss}

@@ -1,63 +1,63 @@
 @use '../../../scss/tools/index' as tools;
 
 // ===================================================
-// Component: MoveControls
+// Component: MapControls
 // ===================================================
 
 // 1. Base styles
-.im-c-move-controls {
+.im-c-map-controls {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--divider-gap);
 }
 
-.im-c-move-controls.im-c-move-controls--collapsed {
+.im-c-map-controls.im-c-map-controls--collapsed {
     display: none;
 }
 
 // 2. Elements
-.im-c-move-controls__directions {
+.im-c-map-controls__directions {
     display: grid;
     grid-template-columns: repeat(3, var(--button-size));
     grid-template-rows: repeat(3, var(--button-size));
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-up {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-up {
     grid-column: 2;
     grid-row: 1;
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-left {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-left {
     grid-column: 1;
     grid-row: 2;
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-right {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-right {
     grid-column: 3;
     grid-row: 2;
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-down {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-down {
     grid-column: 2;
     grid-row: 3;
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--nudge-step-toggle {
+.im-c-map-controls__directions .im-c-button-wrapper--nudge-step-toggle {
     grid-column: 2;
     grid-row: 2;
     z-index: 1;
 }
 
-.im-c-move-controls__directions .im-c-map-button--pan-up svg {
+.im-c-map-controls__directions .im-c-map-button--pan-up svg {
     transform: rotate(180deg);
 }
 
-.im-c-move-controls__directions .im-c-map-button--pan-left svg {
+.im-c-map-controls__directions .im-c-map-button--pan-left svg {
     transform: rotate(90deg);
 }
 
-.im-c-move-controls__directions .im-c-map-button--pan-right svg {
+.im-c-map-controls__directions .im-c-map-button--pan-right svg {
     transform: rotate(-90deg);
 }
 
@@ -67,7 +67,7 @@
 // express a plus-shaped grid where the centre button touches all four neighbours —
 // clip-path is set directly per button instead, clipping only the side(s) where it
 // touches another button and leaving the exposed side(s) showing the shadow as normal.
-.im-c-move-controls__directions .im-c-button-wrapper--pan-up .im-c-map-button {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-up .im-c-map-button {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 
@@ -76,7 +76,7 @@
     }
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-left .im-c-map-button {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-left .im-c-map-button {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 
@@ -85,7 +85,7 @@
     }
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-right .im-c-map-button {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-right .im-c-map-button {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 
@@ -94,7 +94,7 @@
     }
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--pan-down .im-c-map-button {
+.im-c-map-controls__directions .im-c-button-wrapper--pan-down .im-c-map-button {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 
@@ -103,7 +103,7 @@
     }
 }
 
-.im-c-move-controls__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button {
+.im-c-map-controls__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button {
     border-radius: 0;
     outline: 1px solid var(--button-hover-color);
 
@@ -114,13 +114,13 @@
 
 // Same inverted "pressed" treatment already used for actions-slot toggle buttons
 // (e.g. draw's Snap toggle) — reused here so Nudge mode reads consistently active.
-.im-c-move-controls .im-c-map-button[aria-pressed="true"] {
+.im-c-map-controls .im-c-map-button[aria-pressed="true"] {
     color: var(--pressed-button-foreground-color);
     border-color: var(--pressed-button-border-color);
     background-color: var(--pressed-button-background-color);
 }
 
-// The trigger lives in the right-top slot, outside .im-c-move-controls, so this is
+// The trigger lives in the right-top slot, outside .im-c-map-controls, so this is
 // its own top-level rule. Same colour treatment as above, but keyed off
 // aria-expanded rather than aria-pressed — the trigger is correctly a disclosure
 // button (it reveals the control below), not a toggle button, so it doesn't carry
@@ -132,31 +132,31 @@
 // hovering the expanded trigger button was a coin-flip decided by cascade order —
 // one cssnano mergeRules reshuffle in production and hover started winning,
 // showing the hover tint instead of the pressed colours. The sibling
-// .im-c-move-controls .im-c-map-button[aria-pressed="true"] rule above never had
+// .im-c-map-controls .im-c-map-button[aria-pressed="true"] rule above never had
 // this problem (it's already (0,3,0), safely ahead of hover); this one needed the
 // same headroom.
-.im-c-map-button.im-c-map-button--move-controls[aria-expanded="true"] {
+.im-c-map-button.im-c-map-button--map-controls[aria-expanded="true"] {
     color: var(--pressed-button-foreground-color);
     border-color: var(--pressed-button-border-color);
     background-color: var(--pressed-button-background-color);
 }
 
-.im-c-move-controls__zoom {
+.im-c-map-controls__zoom {
     display: flex;
     flex-direction: row;
 }
 
 // A simple two-item linear row, so the standard button-group corner/shadow treatment
 // applies directly (matches .im-o-app__top's first/last-child pattern).
-.im-c-move-controls__zoom .im-c-button-wrapper--nudge-zoom-in .im-c-map-button {
+.im-c-map-controls__zoom .im-c-button-wrapper--nudge-zoom-in .im-c-map-button {
     @include tools.border-focus-corner-override($corners: 'left');
 }
 
-.im-c-move-controls__zoom .im-c-button-wrapper--nudge-zoom-out .im-c-map-button {
+.im-c-map-controls__zoom .im-c-button-wrapper--nudge-zoom-out .im-c-map-button {
     @include tools.border-focus-corner-override($corners: 'right');
 }
 
 // App dark modifiers
-.im-o-app--dark-app .im-c-move-controls__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button {
+.im-o-app--dark-app .im-c-map-controls__directions .im-c-button-wrapper--nudge-step-toggle .im-c-map-button {
     outline-offset: -1px;
 }