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

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

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

package/src/App/hooks/useFeatureItems.js

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

package/src/App/hooks/useInterfaceAPI.js

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

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

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

package/src/InteractiveMap/InteractiveMap.js

@@ -461,12 +461,23 @@ export default class InteractiveMap {
    * Focus is moved to the panel by default. Set `focus: false` in options to
    * suppress this — useful when showing a panel and you want focus to remain on the button.
    *
+   * When the panel is later closed, focus returns to `triggeringElement` if one is given or
+   * can be inferred, falling back to the map viewport otherwise. If `triggeringElement` isn't
+   * passed explicitly, whatever currently has real DOM focus is captured automatically (e.g. a
+   * selected item in the map features list) — this only needs to be passed explicitly when the
+   * panel is opened from something that doesn't hold focus at the time (e.g a timer, or a
+   * genuine mouse click, which doesn't reliably focus its target in every browser).
+   *
    * @param {string} id - Panel identifier to show.
    * @param {object} [options]
    * @param {boolean} [options.focus=true] - Whether to move focus to the panel.
+   * @param {HTMLElement} [options.triggeringElement] - Element to return focus to on close.
+   *   Defaults to the currently focused element, if any.
    */
-  showPanel (id, { focus = true } = {}) {
-    this.eventBus.emit(events.APP_SHOW_PANEL, { id, focus })
+  showPanel (id, { focus = true, triggeringElement } = {}) {
+    const resolvedTriggeringElement = triggeringElement ??
+      (document.activeElement && document.activeElement !== document.body ? document.activeElement : undefined)
+    this.eventBus.emit(events.APP_SHOW_PANEL, { id, focus, triggeringElement: resolvedTriggeringElement })
   }
 
   /**

package/src/InteractiveMap/InteractiveMap.test.js

@@ -580,6 +580,39 @@ describe('InteractiveMap — Public API Methods', () => {
     expect(map.eventBus.emit).toHaveBeenCalledWith('app:togglebuttonstate', { id: 'btn-1', prop: 'disabled', value: true })
   })
 
+  describe('showPanel — triggeringElement', () => {
+    afterEach(() => { document.body.innerHTML = '' })
+
+    it('passes an explicit triggeringElement through unchanged', () => {
+      const el = document.createElement('button')
+      map.showPanel('panel1', { triggeringElement: el })
+      expect(map.eventBus.emit).toHaveBeenCalledWith('app:showpanel', { id: 'panel1', focus: true, triggeringElement: el })
+    })
+
+    it('auto-captures the currently focused element when none is given', () => {
+      const el = document.createElement('button')
+      document.body.appendChild(el)
+      el.focus()
+      map.showPanel('panel1')
+      expect(map.eventBus.emit).toHaveBeenCalledWith('app:showpanel', { id: 'panel1', focus: true, triggeringElement: el })
+    })
+
+    it('does not fall back to document.body as a triggeringElement', () => {
+      document.body.focus?.() // no-op in jsdom, but document.activeElement defaults to body regardless
+      map.showPanel('panel1')
+      expect(map.eventBus.emit).toHaveBeenCalledWith('app:showpanel', { id: 'panel1', focus: true, triggeringElement: undefined })
+    })
+
+    it('an explicit triggeringElement takes priority over the currently focused element', () => {
+      const focused = document.createElement('button')
+      document.body.appendChild(focused)
+      focused.focus()
+      const explicit = document.createElement('button')
+      map.showPanel('panel1', { triggeringElement: explicit })
+      expect(map.eventBus.emit).toHaveBeenCalledWith('app:showpanel', { id: 'panel1', focus: true, triggeringElement: explicit })
+    })
+  })
+
   it('setContinueEnabled enables and disables the journey continue button', () => {
     map.setContinueEnabled(true)
     expect(map.eventBus.emit).toHaveBeenCalledWith('app:togglebuttonstate', { id: 'journeyContinue', prop: 'disabled', value: false })

package/src/config/appConfig.js

@@ -98,7 +98,7 @@ export const defaultAppConfig = {
     desktop: buttonSlots
   }, {
     id: 'moveControls',
-    label: 'Move and zoom controls',
+    label: 'Map controls',
     iconId: 'move',
     keepFocus: true,
     isExpanded: false,
@@ -157,7 +157,7 @@ export const defaultAppConfig = {
     svgContent: '<path d="m6 9 6 6 6-6"/>'
   }, {
     id: 'move',
-    svgContent: '<path d="M12 2v20"/><path d="m15 19-3 3-3-3"/><path d="m19 9 3 3-3 3"/><path d="M2 12h20"/><path d="m5 9-3 3 3 3"/><path d="m9 5 3-3 3 3"/>'
+    svgContent: '<path d="M11.146 15.854a1.207 1.207 0 0 1 1.708 0l1.56 1.56A2 2 0 0 1 15 18.828V21a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2.172a2 2 0 0 1 .586-1.414z"/><path d="M18.828 15a2 2 0 0 1-1.414-.586l-1.56-1.56a1.207 1.207 0 0 1 0-1.708l1.56-1.56A2 2 0 0 1 18.828 9H21a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1z"/><path d="M6.586 14.414A2 2 0 0 1 5.172 15H3a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2.172a2 2 0 0 1 1.414.586l1.56 1.56a1.207 1.207 0 0 1 0 1.708z"/><path d="M9 3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2.172a2 2 0 0 1-.586 1.414l-1.56 1.56a1.207 1.207 0 0 1-1.708 0l-1.56-1.56A2 2 0 0 1 9 5.172z"/>'
   }, {
     id: 'precision',
     svgContent: '<circle cx="12" cy="12" r="10"/><line x1="22" x2="18" y1="12" y2="12"/><line x1="6" x2="2" y1="12" y2="12"/><line x1="12" x2="12" y1="6" y2="2"/><line x1="12" x2="12" y1="22" y2="18"/>'