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

package/providers/maplibre/src/utils/spatial.js

@@ -7,7 +7,7 @@ import turfBbox from '@turf/bbox'
 // -----------------------------------------------------------------------------
 
 /**
- * Calculate distance in meters between two [lng, lat] coordinates
+ * Calculate distance in metres between two [lng, lat] coordinates
  */
 const getDistance = (from, to) => {
   const [lng1, lat1] = from
@@ -16,22 +16,24 @@ const getDistance = (from, to) => {
   const fromLatLon = new LatLon(lat1, lng1)
   const toLatLon = new LatLon(lat2, lng2)
 
-  return fromLatLon.distanceTo(toLatLon) // meters
+  return fromLatLon.distanceTo(toLatLon) // metres
 }
 
 /**
- * Format dimension, meters if less than 0.5 miles, otherwise miles
+ * Format dimension, metres if less than 0.5 miles, otherwise miles
  */
-const formatDimension = (meters) => {
+const formatDimension = (metres) => {
   const WHOLE_MILE_THRESHOLD = 10
   const MILE_THRESHOLD = 0.5
-  const METERS_PER_MILE = 1609.344
+  const METRES_PER_MILE = 1609.344
 
-  const miles = meters / METERS_PER_MILE
+  const miles = metres / METRES_PER_MILE
 
   // Check if we are under the half-mile threshold
   if (miles < MILE_THRESHOLD) {
-    return `${Math.round(meters)}m`
+    const roundedMetres = Math.round(metres)
+    const units = roundedMetres === 1 ? 'metre' : 'metres'
+    return `${roundedMetres} ${units}`
   }
 
   if (miles < WHOLE_MILE_THRESHOLD) {
@@ -50,7 +52,7 @@ const formatDimension = (meters) => {
 
 /**
  * bounds: [[west, south], [east, north]]
- * Returns: "400m by 1.4 miles"
+ * Returns: "400 metres by 1.4 miles"
  */
 const getAreaDimensions = (bounds) => {
   let west, south, east, north
@@ -69,12 +71,12 @@ const getAreaDimensions = (bounds) => {
   }
 
   // Width: west <-> east at the southern latitude
-  const widthMeters = getDistance([west, south], [east, south])
+  const widthMetres = getDistance([west, south], [east, south])
   // Height: south <-> north at the western longitude
-  const heightMeters = getDistance([west, south], [west, north])
+  const heightMetres = getDistance([west, south], [west, north])
 
-  const widthLabel = formatDimension(widthMeters)
-  const heightLabel = formatDimension(heightMeters)
+  const widthLabel = formatDimension(widthMetres)
+  const heightLabel = formatDimension(heightMetres)
 
   return `${heightLabel} by ${widthLabel}`
 }
@@ -82,7 +84,7 @@ const getAreaDimensions = (bounds) => {
 /**
  * Generate a cardinal direction move description.
  * Only non-zero moves are announced.
- * Example: "north 400m", "east 750m", or "south 400m, west 750m"
+ * Example: "north 400 metres", "east 750 metres", or "south 400 metres, west 750 metres"
  */
 const getCardinalMove = (from, to) => {
   const [lng1, lat1] = from
@@ -94,74 +96,18 @@ const getCardinalMove = (from, to) => {
   const moves = []
 
   if (Math.abs(dLat) > 0.0001) { // threshold to ignore tiny movement
-    const meters = Math.round(getDistance([lng1, lat1], [lng1, lat2]))
-    moves.push(`${dLat > 0 ? 'north' : 'south'} ${formatDimension(meters)}`)
+    const metres = Math.round(getDistance([lng1, lat1], [lng1, lat2]))
+    moves.push(`${dLat > 0 ? 'north' : 'south'} ${formatDimension(metres)}`)
   }
 
   if (Math.abs(dLng) > 0.0001) {
-    const meters = Math.round(getDistance([lng1, lat1], [lng2, lat1]))
-    moves.push(`${dLng > 0 ? 'east' : 'west'} ${formatDimension(meters)}`)
+    const metres = Math.round(getDistance([lng1, lat1], [lng2, lat1]))
+    moves.push(`${dLng > 0 ? 'east' : 'west'} ${formatDimension(metres)}`)
   }
 
   return moves.join(', ')
 }
 
-/**
- * Find the index of the nearest pixel in a given cardinal direction.
- *
- * The function:
- * - Filters candidate points that lie in the specified direction
- *   (up, down, left, right) relative to a start pixel.
- * - Selects the nearest valid candidate using Euclidean distance.
- * - Falls back to returning the start pixel index if no candidate exists.
- *
- * Example:
- *   spatialNavigate('up', [100, 200], [[100, 100], [150, 250], [90, 180]])
- *   → returns the index of [100, 100]
- *
- * @param {'ArrowUp'|'ArrowDown'|'ArrowLeft'|'ArrowRight'} direction - The direction to search.
- * @param {[number, number]} start - The starting pixel coordinate [x, y].
- * @param {Array<[number, number]>} pixels - Array of pixel coordinates.
- * @returns {number} Index of the closest pixel in the given direction.
- */
-const isInDirection = (direction, dx, dy) => {
-  switch (direction) {
-    case 'ArrowUp': return dy < 0 && Math.abs(dy) >= Math.abs(dx)
-    case 'ArrowDown': return dy > 0 && Math.abs(dy) >= Math.abs(dx)
-    case 'ArrowLeft': return dx < 0 && Math.abs(dx) > Math.abs(dy)
-    case 'ArrowRight': return dx > 0 && Math.abs(dx) > Math.abs(dy)
-    default: return false
-  }
-}
-
-const spatialNavigate = (direction, start, pixels) => {
-  const [sx, sy] = start
-
-  // Direction filters
-  const candidates = pixels.filter(([x, y]) =>
-    (x !== sx || y !== sy) && isInDirection(direction, x - sx, y - sy)
-  )
-
-  if (!candidates.length) {
-    return pixels.findIndex(p => p[0] === sx && p[1] === sy)
-  }
-
-  // Choose the closest by Euclidean distance
-  let closestIndex = -1
-  let minDist = Infinity
-  candidates.forEach(c => {
-    const dx = c[0] - sx
-    const dy = c[1] - sy
-    const dist = dx * dx + dy * dy // squared distance is enough
-    if (dist < minDist) {
-      minDist = dist
-      closestIndex = pixels.indexOf(c)
-    }
-  })
-
-  return closestIndex
-}
-
 const getResolution = (center, zoom) => {
   const EARTH_CIRCUMFERENCE = 40075016.686
   const TILE_SIZE = 512
@@ -239,7 +185,6 @@ export {
   getCardinalMove,
   getBboxFromGeoJSON,
   isGeometryObscured,
-  spatialNavigate,
   getResolution,
   getPaddedBounds,
   formatDimension

package/providers/maplibre/src/utils/spatial.test.js

@@ -12,18 +12,21 @@ jest.mock('@turf/bbox', () => jest.fn(() => [-1, 50, 1, 52]))
 describe('spatial utils', () => {
   test('formatDimension hits all branches', () => {
     // < 0.5 miles
-    expect(spatial.formatDimension(500)).toMatch(/m$/)
+    expect(spatial.formatDimension(500)).toMatch(/metres?$/)
+
+    // Singular metre (exactly 1) - hits roundedMetres === 1 branch
+    expect(spatial.formatDimension(1)).toBe('1 metre')
 
     // Singular mile (exactly 1.0) - hits value === 1 branch
     expect(spatial.formatDimension(1609.344)).toBe('1 mile')
 
     // 5 miles
-    const metersSmallMiles = 5 * 1609.344
-    expect(spatial.formatDimension(metersSmallMiles)).toMatch(/^5\s*miles$/)
+    const metresSmallMiles = 5 * 1609.344
+    expect(spatial.formatDimension(metresSmallMiles)).toMatch(/^5\s*miles$/)
 
     // >= WHOLE_MILE_THRESHOLD
-    const metersLarge = 15 * 1609.344
-    expect(spatial.formatDimension(metersLarge)).toBe('15 miles')
+    const metresLarge = 15 * 1609.344
+    expect(spatial.formatDimension(metresLarge)).toBe('15 miles')
   })
 
   test('array bounds triggers all branches', () => {
@@ -50,33 +53,6 @@ describe('spatial utils', () => {
     expect(spatial.getCardinalMove([0, 0], [0.00001, 0.00001])).toBe('')
   })
 
-  test('spatialNavigate all directions and fallback', () => {
-    const pixels = [[0, 0], [0, -1], [1, 0], [0, 1], [-1, 0]]
-    expect(spatial.spatialNavigate('ArrowUp', [0, 0], pixels)).toBe(1)
-    expect(spatial.spatialNavigate('ArrowDown', [0, 0], pixels)).toBe(3)
-    expect(spatial.spatialNavigate('ArrowLeft', [0, 0], pixels)).toBe(4)
-    expect(spatial.spatialNavigate('ArrowRight', [0, 0], pixels)).toBe(2)
-    expect(spatial.spatialNavigate('InvalidDir', [0, 0], pixels)).toBe(0)
-  })
-
-  test('spatialNavigate finds closer candidates (hits dist < minDist)', () => {
-    const start = [0, 0]
-    const pixels = [[0, 0], [10, 0], [2, 0]]
-    expect(spatial.spatialNavigate('ArrowRight', start, pixels)).toBe(2)
-  })
-
-  test('spatialNavigate skips farther candidate (dist >= minDist false branch)', () => {
-    // Closer candidate first → second candidate fails dist < minDist
-    const pixels = [[0, 0], [2, 0], [10, 0]]
-    expect(spatial.spatialNavigate('ArrowRight', [0, 0], pixels)).toBe(1)
-  })
-
-  test('spatialNavigate diagonal with dx>dy', () => {
-    const start = [0, 0]
-    const pixels = [[0, 0], [3, 1], [1, 0]] // dx>dy
-    expect(spatial.spatialNavigate('ArrowRight', start, pixels)).toBe(2)
-  })
-
   test('getResolution returns positive value', () => {
     expect(spatial.getResolution({ lat: 0 }, 1)).toBeGreaterThan(0)
   })

package/rollup.esm.mjs

@@ -166,7 +166,8 @@ const createESMConfig = (entryPath, outDir, isCore = false, manualChunks = null,
       // (rootDir) → "css/index.css" — no ".." in the emitted fileName.
       postcss({
         extract: path.resolve(cssDir, 'index.css'),
-        use: ['sass']
+        use: ['sass'],
+        minimize: true
       }),
 
       terser(),

package/scripts/publish-package.sh

@@ -5,6 +5,12 @@ set -e
 VERSION_PATTERN="^v([0-9]{1,}.[0-9]{1,}.[0-9]{1,})(-[0-9A-Za-z-].*)?$"
 PRE_RELEASE_PATTERN="(-[0-9A-Za-z-].*)$"
 
+# Prerelease labels (case-insensitive) that share the "pre-release" npm dist-tag.
+# Any other label (e.g. an experimental feature slug) gets isolated to its own
+# dist-tag instead — see determine_release_tag(). Add to this list if another
+# shared-channel convention (e.g. "rc") is adopted.
+SHARED_PRERELEASE_LABELS=("alpha" "beta")
+
 validate_arguments() {
   if [ -z "$TAG_NAME" ]; then
     echo "ERROR: TAG_NAME is required"
@@ -52,7 +58,37 @@ validate_version_bump() {
   echo "✓ Version check passed"
 }
 
+is_shared_prerelease_label() {
+  local candidate_lower
+  candidate_lower=$(echo "$1" | tr '[:upper:]' '[:lower:]')
+
+  local shared_label
+  for shared_label in "${SHARED_PRERELEASE_LABELS[@]}"; do
+    if [[ "$candidate_lower" == "$shared_label" ]]; then
+      return 0
+    fi
+  done
+  return 1
+}
+
 determine_release_tag() {
+  # Extract the first prerelease identifier: semver splits identifiers on '.',
+  # so this stops at the first dot if there is one ("-fmp.2" -> "fmp"), or runs
+  # to the end of the string if there isn't ("-fmp-2" -> "fmp-2", since hyphens
+  # are legal inside a single identifier). Anything not in
+  # SHARED_PRERELEASE_LABELS (matched case-insensitively) gets isolated to its
+  # own npm dist-tag either way — this is what prevents a mistyped experimental
+  # tag from silently landing in the shared "pre-release" channel, regardless
+  # of whether a dot or hyphen was used before the build number, or how the
+  # label happens to be capitalised.
+  if [[ "$TAG_NAME" =~ -([^.]+) ]]; then
+    local label="${BASH_REMATCH[1]}"
+    if ! is_shared_prerelease_label "$label"; then
+      echo "$label"
+      return
+    fi
+  fi
+
   if [[ "$IS_PRE_RELEASE" == "true" ]] || [[ "$TAG_NAME" =~ $PRE_RELEASE_PATTERN ]]; then
     echo "pre-release"
   else

package/src/App/App.jsx

@@ -19,7 +19,7 @@ export const App = (props) => {
   return (
     <AppProvider options={props}>
       <MapProvider options={props}>
-        <ServiceProvider eventBus={props.eventBus}>
+        <ServiceProvider eventBus={props.eventBus} pluginRegistry={props.pluginRegistry}>
           <PluginProvider>
             <PluginInits />
             <Layout />

package/src/App/App.test.jsx

@@ -70,7 +70,8 @@ describe('App', () => {
   })
 
   test('renders component hierarchy with props', () => {
-    const props = { mapProvider: 'test', extraProp: 'value', eventBus: mockEventBus }
+    const mockPluginRegistry = { getPlugin: jest.fn() }
+    const props = { mapProvider: 'test', extraProp: 'value', eventBus: mockEventBus, pluginRegistry: mockPluginRegistry }
 
     render(<App {...props} />)
 
@@ -98,6 +99,10 @@ describe('App', () => {
     // Verify eventBus exists
     expect(appProviderProps.options.eventBus).toBe(mockEventBus)
     expect(mapProviderProps.options.eventBus).toBe(mockEventBus)
+
+    // Verify pluginRegistry reaches ServiceProvider
+    const serviceProviderProps = ServiceProvider.mock.calls[0][0]
+    expect(serviceProviderProps.pluginRegistry).toBe(mockPluginRegistry)
   })
 
   test('calls removeLoadingState and emits APP_READY on mount', () => {

package/src/App/components/CrossHair/CrossHair.jsx

@@ -16,24 +16,38 @@ export const CrossHair = () => {
   const { isVisible, isPinnedToMap, state } = crossHair
 
   return (
-    <svg
-      id={`${id}-cross-hair`}
+    <button
+      tabIndex='-1'
       ref={crossHairRef}
-      className='im-c-cross-hair'
-      width='38'
-      height='38'
-      viewBox='0 0 38 38'
-      fillRule='evenodd'
-      fill='currentColor'
+      id={`${id}-cross-hair`}
+      className='im-c-cross-hair-button'
+      // "Target" — short for Voice Control to say ("Click Target"). A plain attribute, not a
+      // hidden child <span>, so there's no separate text node for Chrome's AX tree to expose.
+      aria-label='Target'
+      // This button should never take real DOM focus — a screen reader's virtual cursor and
+      // Voice Control can both reach it without that, and real focus landing here would break
+      // keyboard drawing (which requires focus to stay on the viewport container).
+      onMouseDown={(event) => event.preventDefault()}
+      onClick={() => crossHair.activate?.()}
       style={{
         position: 'absolute',
         left: isPinnedToMap ? 0 : '50%',
         top: isPinnedToMap ? 0 : '50%',
-        pointerEvents: 'none',
         display: isVisible ? 'block' : 'none'
       }}
     >
-      <path d={paths[state || 'active']} />
-    </svg>
+      {/* aria-hidden: without it, WebKit exposes the <path> as its own accessibility node, and
+          Voice Control activates that instead of bubbling a click up to this button. */}
+      <svg
+        width='38'
+        height='38'
+        viewBox='0 0 38 38'
+        fillRule='evenodd'
+        fill='currentColor'
+        aria-hidden='true'
+      >
+        <path d={paths[state || 'active']} />
+      </svg>
+    </button>
   )
 }

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

@@ -1,14 +1,39 @@
-.im-c-cross-hair {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
+// A real <button> (tabIndex="-1") so it's a discoverable target for AT (Voice Control, a screen
+// reader's virtual cursor) without being a Tab stop or ever taking real DOM focus.
+.im-c-cross-hair-button {
+  // Its ancestor (.im-c-viewport__safezone) is pointer-events:none, so this has to opt back in
+  // itself or clicks here pass straight through to the map canvas underneath.
+  pointer-events: auto;
+
+  // Reset native chrome to zero — position/margin below assumes the content-box starts exactly
+  // at the border-box edge.
+  appearance: none;
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  cursor: inherit;
+
+  // Explicit size plus the negative margin centre the button's own geometry (not just its SVG
+  // child's) on wherever CrossHair.jsx's inline top/left positions it — without it, an AT
+  // overlay's badge would land at the anchor point's corner, not on the icon.
+  width: 38px;
+  height: 38px;
   margin: -19px 0 0 -19px;
-}
 
-.im-c-cross-hair path {
-  stroke-width: 3;
-  stroke: var(--map-overlay-halo-color);
-  fill: var(--map-overlay-foreground-color);
-  paint-order: stroke fill;
-}
+  outline: 3px solid transparent;
+
+  svg {
+    display: block;
+    // Purely decorative (aria-hidden in CrossHair.jsx) — without this it's still its own
+    // hit-testable target, so a click could resolve to the icon instead of the button.
+    pointer-events: none;
+  }
+
+  path {
+    stroke-width: 3;
+    stroke: var(--map-overlay-halo-color);
+    fill: var(--map-overlay-foreground-color);
+    paint-order: stroke fill;
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 import { CrossHair } from './CrossHair.jsx'
 import { useCrossHair } from '../../hooks/useCrossHairAPI.js'
 
@@ -9,6 +9,8 @@ jest.mock('../../store/configContext', () => ({ useConfig: jest.fn(() => ({ id:
 describe('CrossHair', () => {
   const crossHairRef = React.createRef()
 
+  // Positioning/visibility/sizing all live on the outer <button> (tabIndex="-1", discoverable
+  // by AT like Voice Control without being a Tab stop); the SVG itself is a plain, unstyled child.
   const renderWith = (overrides = {}) => {
     useCrossHair.mockReturnValue({
       crossHairRef,
@@ -19,43 +21,70 @@ describe('CrossHair', () => {
         ...overrides
       }
     })
-    return render(<CrossHair />).container.querySelector('svg')
+    const { container } = render(<CrossHair />)
+    return { button: container.querySelector('button'), svg: container.querySelector('svg') }
   }
 
   it('renders visible active marker when pinned', () => {
-    const svg = renderWith()
+    const { button, svg } = renderWith()
     const path = svg.querySelector('path')
 
-    expect(svg).toHaveClass('im-c-cross-hair')
-    expect(svg).toHaveStyle({
+    expect(button).toHaveClass('im-c-cross-hair-button')
+    expect(button).toHaveStyle({
       position: 'absolute',
       left: 0,
       top: 0,
-      pointerEvents: 'none',
       display: 'block'
     })
     expect(path.getAttribute('d')).toContain('M5.035 20H1v-2h4.035C5.525') // active path
   })
 
   it('positions marker at center when not pinned', () => {
-    const svg = renderWith({ isPinnedToMap: false })
+    const { button } = renderWith({ isPinnedToMap: false })
 
-    expect(svg).toHaveStyle({
+    expect(button).toHaveStyle({
       left: '50%',
       top: '50%'
     })
   })
 
+  // Fully removed from the layout/accessibility tree when hidden, not just faded — so Voice
+  // Control's Show Names never puts a "Target" label over nothing. Its real route back is
+  // opening MapControls (a normal, always-visible button), not re-discovering this element.
   it('hides marker when not visible', () => {
-    const svg = renderWith({ isVisible: false })
-    expect(svg).toHaveStyle({ display: 'none' })
+    const { button } = renderWith({ isVisible: false })
+    expect(button).toHaveStyle({ display: 'none' })
+  })
+
+  it('invokes crossHair.activate() on click, for Voice Control / mouse / touch activation', () => {
+    const activate = jest.fn()
+    const { button } = renderWith({ activate })
+    fireEvent.click(button)
+    expect(activate).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not throw when clicked with no activate() assigned', () => {
+    const { button } = renderWith()
+    expect(() => fireEvent.click(button)).not.toThrow()
+  })
+
+  it('prevents the default mousedown so a real click never gives it focus (or the resulting outline)', () => {
+    const { button } = renderWith()
+    const event = fireEvent.mouseDown(button)
+    expect(event).toBe(false) // fireEvent returns false when preventDefault() was called
+  })
+
+  it('is not a Tab stop, but is a real button for coordinate-based AT (e.g. Voice Control) to find', () => {
+    const { button } = renderWith()
+    expect(button.tabIndex).toBe(-1)
+    expect(button.tagName).toBe('BUTTON')
   })
 
   it.each([
     ['inactive', 'M5.035 20H1v-2h4.035a13.98'],
     [undefined, 'M5.035 20H1v-2h4.035C5.525'] // fallback to active
   ])('renders correct path for state=%s', (state, expected) => {
-    const svg = renderWith({ state })
+    const { svg } = renderWith({ state })
     expect(svg.querySelector('path').getAttribute('d')).toContain(expected)
   })
 })

package/src/App/components/Hints/Hints.jsx

@@ -17,7 +17,7 @@ import { htmlToPlainText } from '../../../utils/htmlToPlainText.js'
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
 export const Hints = () => {
-  const { id, keyboardHintText, enableMoveControls, moveControlsHintText } = useConfig()
+  const { id, keyboardHintText, enableMapControls, mapControlsHintText } = useConfig()
   const { hints } = useService()
   const { layoutRefs } = useApp()
   const [activeHint, setActiveHint] = useState(null)
@@ -33,8 +33,8 @@ export const Hints = () => {
   }
 
   // Composed at render time so overriding one text doesn't drop the other.
-  const keyboardDescriptionHtml = enableMoveControls
-    ? `${keyboardHintText} ${moveControlsHintText}`
+  const keyboardDescriptionHtml = enableMapControls
+    ? `${keyboardHintText} ${mapControlsHintText}`
     : keyboardHintText
 
   return createPortal(

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

@@ -52,13 +52,13 @@ describe('Hints — rendering', () => {
     expect(desc.innerHTML).toBe('Shift + ?')
   })
 
-  it('appends the move-controls hint text when enableMoveControls is true', () => {
+  it('appends the map-controls hint text when enableMapControls is true', () => {
     const mainEl = setup()
     useConfig.mockReturnValue({
       id: 'test-map',
       keyboardHintText: '<kbd>Shift</kbd> + <kbd>?</kbd>',
-      enableMoveControls: true,
-      moveControlsHintText: '<kbd>Arrow keys</kbd> to move'
+      enableMapControls: true,
+      mapControlsHintText: '<kbd>Arrow keys</kbd> to move'
     })
     render(<Hints />)
     const desc = mainEl.querySelector('#test-map-keyboard-desc')

package/src/App/components/KeyboardHelp/KeyboardHelp.jsx

@@ -10,7 +10,10 @@ const DEFAULT_GROUP = 'Navigate'
 const ShortcutList = ({ items }) => (
   <dl className='im-c-keyboard-help__list'>
     {items.map((item) => (
-      <div key={item.id} className='im-c-keyboard-help__item'>
+      <div
+        key={item.id}
+        className={`im-c-keyboard-help__item${item.visuallyHidden ? ' im-u-visually-hidden' : ''}`}
+      >
         <dt className='im-c-keyboard-help__title'>{item.title}</dt>
         <dd className='im-c-keyboard-help__description' dangerouslySetInnerHTML={{ __html: item.command }} />
       </div>

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

@@ -68,6 +68,23 @@ describe('KeyboardHelp — flat list', () => {
     render(<KeyboardHelp />)
     expect(screen.getByText('↑')).toBeInTheDocument()
   })
+
+  it('visually hides a shortcut flagged visuallyHidden but keeps it in the DOM for assistive tech', () => {
+    getKeyboardShortcuts.mockReturnValue([
+      ...VIEWPORT_SHORTCUTS,
+      { id: 'sr', context: 'viewport', title: 'Get info', command: '<kbd>Alt</kbd> + <kbd>I</kbd>', visuallyHidden: true }
+    ])
+    render(<KeyboardHelp />)
+    const item = screen.getByText('Get info').closest('.im-c-keyboard-help__item')
+    expect(item).toHaveClass('im-u-visually-hidden')
+  })
+
+  it('does not visually hide a regular shortcut', () => {
+    getKeyboardShortcuts.mockReturnValue(VIEWPORT_SHORTCUTS)
+    render(<KeyboardHelp />)
+    const item = screen.getByText('Move').closest('.im-c-keyboard-help__item')
+    expect(item).not.toHaveClass('im-u-visually-hidden')
+  })
 })
 
 // ─── tab UI (multiple groups) ─────────────────────────────────────────────────