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

package/src/utils/getPanelRole.test.js

@@ -0,0 +1,56 @@
+import { classifyPanel, getPanelRole } from './getPanelRole.js'
+
+describe('classifyPanel', () => {
+  it('is a dialog when dismissible and not a persistent side aside', () => {
+    expect(classifyPanel({ slot: 'right-top', open: false })).toMatchObject({
+      isModal: false,
+      isAside: false,
+      isDismissible: true,
+      isDialog: true
+    })
+  })
+
+  it('is an aside (not a dialog) for a persistently open side panel', () => {
+    expect(classifyPanel({ slot: 'side', open: true })).toMatchObject({
+      isAside: true,
+      isDialog: false
+    })
+  })
+
+  it('is never an aside when modal, even in the side slot', () => {
+    expect(classifyPanel({ slot: 'side', open: true, modal: true })).toMatchObject({
+      isModal: true,
+      isAside: false,
+      isDismissible: true,
+      isDialog: true
+    })
+  })
+
+  it('treats dismissible: false as non-dismissible unless modal forces it', () => {
+    expect(classifyPanel({ slot: 'right-top', open: false, dismissible: false })).toMatchObject({
+      isDismissible: false,
+      isDialog: false
+    })
+  })
+
+  it('modal forces dismissible regardless of an explicit dismissible: false', () => {
+    expect(classifyPanel({ slot: 'right-top', open: false, dismissible: false, modal: true })).toMatchObject({
+      isDismissible: true,
+      isDialog: true
+    })
+  })
+})
+
+describe('getPanelRole', () => {
+  it('returns dialog when isDialog', () => {
+    expect(getPanelRole({ isDialog: true, isDismissible: true })).toBe('dialog')
+  })
+
+  it('returns complementary when dismissible but not a dialog', () => {
+    expect(getPanelRole({ isDialog: false, isDismissible: true })).toBe('complementary')
+  })
+
+  it('returns region when neither a dialog nor dismissible', () => {
+    expect(getPanelRole({ isDialog: false, isDismissible: false })).toBe('region')
+  })
+})

package/src/utils/globalAltShortcuts.js

@@ -0,0 +1,12 @@
+// Alt+<key> keyup combos useKeyboardShortcuts.js binds globally (see keyboardMappings.js's
+// `keyup` section) — a locally-focused context using the same combo must shadow it, or both
+// fire. Single source of truth so a new global mapping is a visible prompt to check for that.
+export const GLOBAL_ALT_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter'])
+
+// Call unconditionally from a local keyup handler while its scope is active — it only acts
+// when the key is actually shadowed, so it's safe to call regardless of which key was pressed.
+export const stopIfGlobalAltKey = (event) => {
+  if (event.altKey && GLOBAL_ALT_KEYS.has(event.key)) {
+    event.stopPropagation()
+  }
+}

package/src/utils/globalAltShortcuts.test.js

@@ -0,0 +1,27 @@
+import { GLOBAL_ALT_KEYS, stopIfGlobalAltKey } from './globalAltShortcuts.js'
+
+describe('GLOBAL_ALT_KEYS', () => {
+  test('lists the arrow keys and Enter — the combos keyboardMappings.js binds globally under Alt', () => {
+    expect([...GLOBAL_ALT_KEYS].sort()).toEqual(['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'Enter'].sort())
+  })
+})
+
+describe('stopIfGlobalAltKey', () => {
+  test.each(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter'])('stops propagation for Alt+%s', (key) => {
+    const event = { altKey: true, key, stopPropagation: jest.fn() }
+    stopIfGlobalAltKey(event)
+    expect(event.stopPropagation).toHaveBeenCalled()
+  })
+
+  test('leaves the same keys alone without Alt held', () => {
+    const event = { altKey: false, key: 'ArrowUp', stopPropagation: jest.fn() }
+    stopIfGlobalAltKey(event)
+    expect(event.stopPropagation).not.toHaveBeenCalled()
+  })
+
+  test('leaves an Alt+<other key> alone — nothing global uses this combo', () => {
+    const event = { altKey: true, key: 'i', stopPropagation: jest.fn() }
+    stopIfGlobalAltKey(event)
+    expect(event.stopPropagation).not.toHaveBeenCalled()
+  })
+})

package/src/utils/spatialNavigate.js

@@ -0,0 +1,49 @@
+/**
+ * Given a starting screen pixel and a set of candidate pixels, finds the index of the
+ * candidate that's nearest to `start` in the given cardinal direction — the shared primitive
+ * behind every directional "move to the next spatially-adjacent thing" interaction in this
+ * codebase (map label navigation, draw/edit vertex navigation, and the map features listbox).
+ *
+ * Candidates are first filtered to a ~90° cone centred on the pressed direction (whichever
+ * axis dominates the offset decides up/down vs left/right), then the nearest of those by
+ * Euclidean distance wins. If nothing falls in that cone, `start`'s own index in `pixels` is
+ * returned (a no-op move) rather than jumping somewhere the user didn't ask for.
+ *
+ * Previously duplicated (with subtly different tie-breaking/equality logic) between
+ * providers/maplibre/src/utils/spatial.js and plugins/draw/src/utils/spatial.js —
+ * consolidated here as the one canonical implementation both now import.
+ *
+ * @param {[number, number]} start - Current pixel [x, y].
+ * @param {Array<[number, number]>} pixels - All candidate pixels, including `start` itself.
+ * @param {'ArrowUp'|'ArrowDown'|'ArrowLeft'|'ArrowRight'|undefined} direction - undefined matches every candidate (nearest overall, any direction).
+ * @returns {number} Index into `pixels` of the chosen candidate.
+ */
+export const spatialNavigate = (start, pixels, direction) => {
+  const isSamePixel = (a, b) => a[0] === b[0] && a[1] === b[1]
+
+  const quadrant = pixels.filter((p) => {
+    const offsetX = Math.abs(p[0] - start[0])
+    const offsetY = Math.abs(p[1] - start[1])
+    let isQuadrant = false
+    if (direction === 'ArrowUp') {
+      isQuadrant = p[1] <= start[1] && offsetY >= offsetX
+    } else if (direction === 'ArrowDown') {
+      isQuadrant = p[1] > start[1] && offsetY >= offsetX
+    } else if (direction === 'ArrowLeft') {
+      isQuadrant = p[0] <= start[0] && offsetY < offsetX
+    } else if (direction === 'ArrowRight') {
+      isQuadrant = p[0] > start[0] && offsetY < offsetX
+    } else {
+      isQuadrant = true
+    }
+    return isQuadrant && !isSamePixel(p, start)
+  })
+
+  if (!quadrant.length) {
+    quadrant.push(start)
+  }
+
+  const distance = (p) => Math.hypot(start[0] - p[0], start[1] - p[1])
+  const closest = quadrant.reduce((best, p) => (distance(p) < distance(best) ? p : best), quadrant[0])
+  return pixels.findIndex((p) => isSamePixel(p, closest))
+}

package/src/utils/spatialNavigate.test.js

@@ -0,0 +1,42 @@
+import { spatialNavigate } from './spatialNavigate.js'
+
+describe('spatialNavigate', () => {
+  const start = [0, 0]
+  const pixels = [[0, 0], [0, -10], [0, 10], [-10, 0], [10, 0]]
+
+  test.each([
+    ['ArrowUp', 1],
+    ['ArrowDown', 2],
+    ['ArrowLeft', 3],
+    ['ArrowRight', 4]
+  ])('finds the nearest pixel for %s', (direction, expectedIndex) => {
+    expect(spatialNavigate(start, pixels, direction)).toBe(expectedIndex)
+  })
+
+  test('considers all pixels for an unrecognised direction', () => {
+    expect(spatialNavigate(start, pixels, 'Tab')).toBe(1)
+  })
+
+  test('considers all pixels when no direction is given (nearest overall)', () => {
+    expect(spatialNavigate(start, pixels, undefined)).toBe(1)
+  })
+
+  test('falls back to the start point when no pixel is in the quadrant', () => {
+    expect(spatialNavigate(start, [[0, 0]], 'ArrowUp')).toBe(0)
+  })
+
+  test('picks the closer of two candidates in the same direction', () => {
+    const pixels = [[0, 0], [10, 0], [2, 0]]
+    expect(spatialNavigate(start, pixels, 'ArrowRight')).toBe(2)
+  })
+
+  test('keeps the first-seen closer candidate rather than a later farther one', () => {
+    const pixels = [[0, 0], [2, 0], [10, 0]]
+    expect(spatialNavigate(start, pixels, 'ArrowRight')).toBe(1)
+  })
+
+  test('a diagonal candidate with dx > dy counts as ArrowRight, not ArrowUp/Down', () => {
+    const pixels = [[0, 0], [3, 1], [1, 0]]
+    expect(spatialNavigate(start, pixels, 'ArrowRight')).toBe(2)
+  })
+})

package/webpack.umd.mjs

@@ -3,6 +3,7 @@ import { fileURLToPath } from 'url'
 import fs from 'fs'
 
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
 import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts'
 import RemoveFilesPlugin from 'remove-files-webpack-plugin'
 
@@ -124,7 +125,11 @@ const createUMDConfig = (entryName, entryPath, libraryPath, outDir, isCore = fal
 
     optimization: {
       splitChunks: { chunks: () => false },
-      removeEmptyChunks: true
+      removeEmptyChunks: true,
+      // '...' keeps webpack's default JS minimizer (Terser); CssMinimizerPlugin
+      // is added alongside it since setting `minimizer` explicitly replaces the
+      // defaults otherwise.
+      minimizer: ['...', new CssMinimizerPlugin()]
     }
   }
 }

package/plugins/interact/src/hooks/useMapItemList.js

@@ -1,187 +0,0 @@
-import { useEffect, useRef } from 'react'
-import { EVENTS } from '../../../../src/config/events.js'
-import { isStandaloneLabel } from '../../../../src/utils/symbolUtils.js'
-import { buildLayerConfigMap } from '../utils/featureQueries.js'
-
-const getFeatureId = (feature, config) =>
-  config ? (feature.properties?.[config.idProperty] ?? feature.id) : null
-
-const isInViewport = (el) => {
-  const container = el.closest('.im-c-viewport__markers')
-  if (!container) {
-    return false
-  }
-  const containerRect = container.getBoundingClientRect()
-  const { left, right, top, bottom } = el.getBoundingClientRect()
-  return right > containerRect.left && left < containerRect.right &&
-    bottom > containerRect.top && top < containerRect.bottom
-}
-
-const collectVisibleMarkers = (markers) => {
-  const items = []
-  for (const marker of markers.items) {
-    if (!marker.label) { continue }
-    const el = markers.markerRefs?.get(marker.id)
-    if (!isStandaloneLabel(marker) && el && isInViewport(el)) {
-      items.push({ id: marker.id, label: marker.label })
-    }
-  }
-  return items
-}
-
-const toFeatureItem = (feature, layerConfigMap, seenIds) => {
-  const config = layerConfigMap[feature.layer?.id]
-  if (!config?.labelProperty) {
-    return null
-  }
-  const id = getFeatureId(feature, config)
-  const stringId = id == null ? null : String(id)
-  if (stringId == null || seenIds.has(stringId)) {
-    return null
-  }
-  seenIds.add(stringId)
-  const label = feature.properties?.[config.labelProperty] ?? stringId
-  return { id: stringId, label }
-}
-
-const collectVisibleFeatures = (mapProvider, layers) => {
-  const items = []
-  const seenIds = new Set()
-  const layerIds = layers.map(layer => layer.layerId)
-  const layerConfigMap = buildLayerConfigMap(layers)
-  const features = mapProvider.getVisibleFeatures(layerIds)
-  for (const feature of features) {
-    const item = toFeatureItem(feature, layerConfigMap, seenIds)
-    if (item) {
-      items.push(item)
-    }
-  }
-  return items
-}
-
-const findFeatureById = (features, layerConfigMap, targetId) => {
-  for (const feature of features) {
-    const config = layerConfigMap[feature.layer?.id]
-    const rawId = getFeatureId(feature, config)
-    if (rawId != null && String(rawId) === String(targetId)) {
-      return { feature, config, rawId }
-    }
-  }
-  return null
-}
-
-/**
- * Rebuilds the keyboard-navigable item list whenever the map moves or data changes.
- * Collects visible markers (by DOM visibility) and visible features (by viewport query),
- * then emits MAP_SET_FEATURES so the listbox stays in sync with what the user can see.
- */
-function useItemListSync ({ markers, interactionModes, layers, mapProvider, multiSelect, eventBus }) {
-  useEffect(() => {
-    const handleMoveEnd = () => {
-      const items = []
-      if (interactionModes?.includes('selectMarker')) {
-        items.push(...collectVisibleMarkers(markers))
-      }
-      if (interactionModes?.includes('selectFeature') && layers.length > 0) {
-        items.push(...collectVisibleFeatures(mapProvider, layers))
-      }
-      eventBus.emit(EVENTS.MAP_SET_FEATURES, { items, multiselectable: multiSelect })
-    }
-    handleMoveEnd()
-    eventBus.on(EVENTS.MAP_MOVE_END, handleMoveEnd)
-    eventBus.on(EVENTS.MAP_DATA_CHANGE, handleMoveEnd)
-    return () => {
-      eventBus.off(EVENTS.MAP_MOVE_END, handleMoveEnd)
-      eventBus.off(EVENTS.MAP_DATA_CHANGE, handleMoveEnd)
-    }
-  }, [markers, interactionModes, layers, mapProvider, multiSelect, eventBus])
-}
-
-/**
- * Listens for MAP_SET_ACTIVE_FEATURE and resolves the active item to its full feature/marker data,
- * storing it in both a ref (for synchronous access) and plugin state (for highlight rendering).
- * Shows the keyboard cursor ring without firing interact:selectionchange — committing the item
- * to the real selection only happens when the user presses Enter/Space.
- */
-function useActiveItemHandler ({ markers, interactionModes, layers, mapProvider, eventBus, dispatch, listboxActiveItemRef }) {
-  useEffect(() => {
-    const handle = ({ id }) => {
-      if (id === null) {
-        listboxActiveItemRef.current = null
-        dispatch({ type: 'SET_LISTBOX_ACTIVE', payload: null })
-        return
-      }
-      const hasMarkerMatch = markers.items.some(m => m.id === id)
-      if (hasMarkerMatch) {
-        listboxActiveItemRef.current = { id, isMarker: true }
-        dispatch({ type: 'SET_LISTBOX_ACTIVE', payload: null })
-        return
-      }
-      if (interactionModes?.includes('selectFeature') && layers.length > 0) {
-        const layerIds = layers.map(layer => layer.layerId)
-        const layerConfigMap = buildLayerConfigMap(layers)
-        const features = mapProvider.getVisibleFeatures(layerIds)
-        const match = findFeatureById(features, layerConfigMap, id)
-        if (match) {
-          const payload = {
-            featureId: match.rawId,
-            layerId: match.config.layerId,
-            idProperty: match.config.idProperty,
-            geometry: match.feature.geometry
-          }
-          listboxActiveItemRef.current = { id, isMarker: false, ...payload, properties: match.feature.properties }
-          dispatch({ type: 'SET_LISTBOX_ACTIVE', payload })
-        }
-      }
-    }
-    eventBus.on(EVENTS.MAP_SET_ACTIVE_FEATURE, handle)
-    return () => { eventBus.off(EVENTS.MAP_SET_ACTIVE_FEATURE, handle) }
-  }, [markers, interactionModes, layers, mapProvider, eventBus, dispatch, listboxActiveItemRef])
-}
-
-/**
- * Handles MAP_SELECT_FEATURE (Enter/Space keypress) by promoting the currently active
- * listbox item to a confirmed selection, dispatching TOGGLE_SELECTED_FEATURES or
- * TOGGLE_SELECTED_MARKERS and triggering interact:selectionchange downstream.
- */
-function useSelectItemHandler ({ eventBus, dispatch, listboxActiveItemRef, multiSelect }) {
-  useEffect(() => {
-    const handleConfirm = () => {
-      const item = listboxActiveItemRef.current
-      if (!item) {
-        return
-      }
-      if (item.isMarker) {
-        dispatch({ type: 'TOGGLE_SELECTED_MARKERS', payload: { markerId: item.id, multiSelect } })
-      } else {
-        const { featureId, layerId, idProperty, geometry, properties } = item
-        dispatch({
-          type: 'TOGGLE_SELECTED_FEATURES',
-          payload: { featureId, layerId, idProperty, geometry, properties, multiSelect, replaceAll: !multiSelect }
-        })
-      }
-    }
-    eventBus.on(EVENTS.MAP_SELECT_FEATURE, handleConfirm)
-    return () => { eventBus.off(EVENTS.MAP_SELECT_FEATURE, handleConfirm) }
-  }, [eventBus, dispatch, listboxActiveItemRef, multiSelect])
-}
-
-/**
- * Orchestrates the keyboard-accessible listbox for the interact plugin.
- *
- * Composes three concerns:
- * - Item list sync — keeps the listbox populated with currently visible markers and features
- * - Active item resolution — translates a listbox cursor position into full feature/marker data
- * - Selection confirmation — commits the active item to the selection on Enter/Space
- *
- * @param {{ mapState: object, pluginState: object, services: object, mapProvider: object }} params
- */
-export function useMapItemList ({ mapState, pluginState, services, mapProvider }) {
-  const { markers } = mapState
-  const { dispatch, interactionModes, layers, multiSelect } = pluginState
-  const { eventBus } = services
-  const listboxActiveItemRef = useRef(null)
-  useItemListSync({ markers, interactionModes, layers, mapProvider, multiSelect, eventBus })
-  useActiveItemHandler({ markers, interactionModes, layers, mapProvider, eventBus, dispatch, listboxActiveItemRef })
-  useSelectItemHandler({ eventBus, dispatch, listboxActiveItemRef, multiSelect })
-}

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

@@ -1,35 +0,0 @@
-import React, { forwardRef } from 'react'
-import { useConfig } from '../../store/configContext.js'
-
-export const Features = forwardRef(({ activeFeatureId, selectedIds = [], multiselectable = false, items = [], onFocus, onBlur }, ref) => {
-  const { id } = useConfig()
-  const hasItems = items.length > 0
-  return (
-    <ul // NOSONAR: role='listbox' is correct for custom composite widget; native <select> cannot host SVG marker elements
-      id={`${id}-features`}
-      ref={ref}
-      role='listbox' // NOSONAR
-      tabIndex={hasItems ? '0' : '-1'}
-      aria-hidden={hasItems ? undefined : true}
-      aria-label='Map features'
-      aria-describedby={`${id}-keyboard-desc`}
-      aria-multiselectable={multiselectable || undefined}
-      aria-activedescendant={activeFeatureId ? `${id}-feature-${activeFeatureId}` : undefined}
-      className='im-c-features'
-      onFocus={onFocus}
-      onBlur={onBlur}
-    >
-      {items.map(item => (
-        <li // NOSONAR: role='option' overrides implicit listitem; this is the correct ARIA listbox child pattern
-          key={item.id} id={`${id}-feature-${item.id}`} role='option' // NOSONAR
-          data-id={item.id}
-          aria-selected={selectedIds.includes(item.id)}
-        >
-          {item.label}
-        </li>
-      ))}
-    </ul>
-  )
-})
-
-Features.displayName = 'Features'

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

@@ -1,124 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { Features } from './Features.jsx'
-import { useConfig } from '../../store/configContext.js'
-
-jest.mock('../../store/configContext.js', () => ({ useConfig: jest.fn() }))
-
-const APP_ID = 'test-app'
-const LISTBOX = '[role="listbox"]' // NOSONAR
-const OPTION = '[role="option"]' // NOSONAR
-const ARIA_SELECTED = 'aria-selected'
-const ITEMS = [
-  { id: 'f1', label: 'Feature One' },
-  { id: 'f2', label: 'Feature Two' }
-]
-
-beforeEach(() => {
-  useConfig.mockReturnValue({ id: APP_ID })
-})
-
-// ─── Features — rendering ─────────────────────────────────────────────────────
-
-describe('Features — rendering', () => {
-  it('renders a listbox with the correct id', () => {
-    const { container } = render(<Features />)
-    expect(container.querySelector(`#${APP_ID}-features`)).toBeTruthy()
-    expect(container.querySelector(LISTBOX)).toBeTruthy() // NOSONAR
-  })
-
-  it('renders no options when items is empty', () => {
-    const { container } = render(<Features />)
-    expect(container.querySelectorAll('[role="option"]')).toHaveLength(0) // NOSONAR
-  })
-
-  it('renders one option per item with correct id, data-id and label', () => {
-    const { container } = render(<Features items={ITEMS} />)
-    const options = container.querySelectorAll(OPTION)
-    expect(options).toHaveLength(2)
-    expect(options[0].getAttribute('id')).toBe(`${APP_ID}-feature-f1`)
-    expect(options[0].dataset.id).toBe('f1')
-    expect(options[0].textContent).toBe('Feature One')
-    expect(options[1].getAttribute('id')).toBe(`${APP_ID}-feature-f2`)
-    expect(options[1].dataset.id).toBe('f2')
-    expect(options[1].textContent).toBe('Feature Two')
-  })
-
-  it('sets aria-selected on items present in selectedIds', () => {
-    const { container } = render(<Features items={ITEMS} selectedIds={['f1']} />)
-    const options = container.querySelectorAll(OPTION)
-    expect(options[0]).toHaveAttribute(ARIA_SELECTED, 'true')
-    expect(options[1]).toHaveAttribute(ARIA_SELECTED, 'false')
-  })
-
-  it('sets aria-selected on multiple items when selectedIds has multiple entries', () => {
-    const { container } = render(<Features items={ITEMS} selectedIds={['f1', 'f2']} />)
-    const options = container.querySelectorAll(OPTION)
-    expect(options[0]).toHaveAttribute(ARIA_SELECTED, 'true')
-    expect(options[1]).toHaveAttribute(ARIA_SELECTED, 'true')
-  })
-
-  it('does not set aria-selected from activeFeatureId alone', () => {
-    const { container } = render(<Features items={ITEMS} activeFeatureId='f1' />)
-    const options = container.querySelectorAll(OPTION)
-    expect(options[0]).toHaveAttribute(ARIA_SELECTED, 'false')
-    expect(options[1]).toHaveAttribute(ARIA_SELECTED, 'false')
-  })
-
-  it('sets aria-activedescendant to the option element id when activeFeatureId is provided', () => {
-    const { container } = render(<Features items={ITEMS} activeFeatureId='f2' />)
-    expect(container.querySelector(LISTBOX).getAttribute('aria-activedescendant')).toBe('test-app-feature-f2') // NOSONAR
-  })
-
-  it('omits aria-activedescendant when activeFeatureId is absent', () => {
-    const { container } = render(<Features items={ITEMS} />)
-    expect(container.querySelector(LISTBOX).getAttribute('aria-activedescendant')).toBeNull() // NOSONAR
-  })
-
-  it('sets aria-multiselectable when multiselectable is true', () => {
-    const { container } = render(<Features items={ITEMS} multiselectable />)
-    expect(container.querySelector(LISTBOX).getAttribute('aria-multiselectable')).toBe('true') // NOSONAR
-  })
-
-  it('omits aria-multiselectable when multiselectable is false', () => {
-    const { container } = render(<Features items={ITEMS} />)
-    expect(container.querySelector(LISTBOX).getAttribute('aria-multiselectable')).toBeNull() // NOSONAR
-  })
-
-  it('is tabIndex 0 and not aria-hidden when items are present', () => {
-    const { container } = render(<Features items={ITEMS} />)
-    const ul = container.querySelector(LISTBOX) // NOSONAR
-    expect(ul.getAttribute('tabIndex')).toBe('0')
-    expect(ul.getAttribute('aria-hidden')).toBeNull()
-  })
-
-  it('is tabIndex -1 and aria-hidden when items is empty', () => {
-    const { container } = render(<Features />)
-    const ul = container.querySelector(LISTBOX) // NOSONAR
-    expect(ul.getAttribute('tabIndex')).toBe('-1')
-    expect(ul.getAttribute('aria-hidden')).toBe('true')
-  })
-
-  it('sets aria-describedby to the shared hints container id', () => {
-    const { container } = render(<Features />)
-    expect(container.querySelector(LISTBOX).getAttribute('aria-describedby')).toBe(`${APP_ID}-keyboard-desc`) // NOSONAR
-  })
-})
-
-// ─── Features — interactions ──────────────────────────────────────────────────
-
-describe('Features — interactions', () => {
-  it('calls onFocus when the listbox receives focus', () => {
-    const onFocus = jest.fn()
-    const { container } = render(<Features onFocus={onFocus} />)
-    fireEvent.focus(container.querySelector(LISTBOX)) // NOSONAR
-    expect(onFocus).toHaveBeenCalled()
-  })
-
-  it('calls onBlur when the listbox loses focus', () => {
-    const onBlur = jest.fn()
-    const { container } = render(<Features onBlur={onBlur} />)
-    fireEvent.blur(container.querySelector(LISTBOX)) // NOSONAR
-    expect(onBlur).toHaveBeenCalled()
-  })
-})