@defra/interactive-map 0.0.22-alpha → 0.0.24-alpha

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

@@ -0,0 +1,121 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Tabs } from './Tabs'
+
+const TAB_A = { name: 'Alpha', content: <p>Alpha content</p> }
+const TAB_B = { name: 'Beta', content: <p>Beta content</p> }
+const TAB_C = { name: 'Gamma', content: <p>Gamma content</p> }
+
+// ─── rendering ───────────────────────────────────────────────────────────────
+
+describe('Tabs — rendering', () => {
+  it('renders a tab button for each entry', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B]} />)
+    expect(screen.getByRole('tab', { name: 'Alpha' })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: 'Beta' })).toBeInTheDocument()
+  })
+
+  it('shows content for the active tab only', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B]} />)
+    expect(screen.getByText('Alpha content')).toBeInTheDocument()
+    expect(screen.queryByText('Beta content')).not.toBeInTheDocument()
+  })
+
+  it('uses defaultTab to set the initial active tab', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B]} defaultTab='Beta' />)
+    expect(screen.getByRole('tab', { name: 'Beta' })).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByText('Beta content')).toBeInTheDocument()
+    expect(screen.queryByText('Alpha content')).not.toBeInTheDocument()
+  })
+
+  it('falls back to first tab when defaultTab is not provided', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B]} />)
+    expect(screen.getByRole('tab', { name: 'Alpha' })).toHaveAttribute('aria-selected', 'true')
+  })
+})
+
+// ─── click behaviour ──────────────────────────────────────────────────────────
+
+describe('Tabs — click behaviour', () => {
+  it('switches to the clicked tab', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B]} />)
+    fireEvent.click(screen.getByRole('tab', { name: 'Beta' }))
+    expect(screen.getByRole('tab', { name: 'Beta' })).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByText('Beta content')).toBeInTheDocument()
+    expect(screen.queryByText('Alpha content')).not.toBeInTheDocument()
+  })
+})
+
+// ─── WCAG attributes ─────────────────────────────────────────────────────────
+
+describe('Tabs — WCAG attributes', () => {
+  it('active tab has tabIndex 0, inactive tabs have tabIndex -1', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B]} />)
+    expect(screen.getByRole('tab', { name: 'Alpha' })).toHaveAttribute('tabindex', '0')
+    expect(screen.getByRole('tab', { name: 'Beta' })).toHaveAttribute('tabindex', '-1')
+  })
+
+  it('each tab has aria-controls pointing to an element in the DOM', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B]} />)
+    const tab = screen.getByRole('tab', { name: 'Alpha' })
+    expect(document.getElementById(tab.getAttribute('aria-controls'))).toBeInTheDocument()
+  })
+
+  it('panel has aria-labelledby pointing to the active tab', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B]} />)
+    const panel = screen.getByRole('tabpanel')
+    const tabId = panel.getAttribute('aria-labelledby')
+    expect(document.getElementById(tabId)).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('panel has tabIndex -1 per ARIA tabs pattern', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B]} />)
+    expect(screen.getByRole('tabpanel')).toHaveAttribute('tabindex', '-1')
+  })
+})
+
+// ─── WCAG keyboard navigation ─────────────────────────────────────────────────
+
+describe('Tabs — WCAG keyboard navigation', () => {
+  it('ArrowRight moves to next tab', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B, TAB_C]} />)
+    fireEvent.keyDown(screen.getByRole('tab', { name: 'Alpha' }), { key: 'ArrowRight' })
+    expect(screen.getByRole('tab', { name: 'Beta' })).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('ArrowLeft moves to previous tab', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B, TAB_C]} defaultTab='Beta' />)
+    fireEvent.keyDown(screen.getByRole('tab', { name: 'Beta' }), { key: 'ArrowLeft' })
+    expect(screen.getByRole('tab', { name: 'Alpha' })).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('ArrowRight wraps from last tab to first', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B, TAB_C]} defaultTab='Gamma' />)
+    fireEvent.keyDown(screen.getByRole('tab', { name: 'Gamma' }), { key: 'ArrowRight' })
+    expect(screen.getByRole('tab', { name: 'Alpha' })).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('ArrowLeft wraps from first tab to last', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B, TAB_C]} />)
+    fireEvent.keyDown(screen.getByRole('tab', { name: 'Alpha' }), { key: 'ArrowLeft' })
+    expect(screen.getByRole('tab', { name: 'Gamma' })).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('Home moves to first tab', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B, TAB_C]} defaultTab='Gamma' />)
+    fireEvent.keyDown(screen.getByRole('tab', { name: 'Gamma' }), { key: 'Home' })
+    expect(screen.getByRole('tab', { name: 'Alpha' })).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('End moves to last tab', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B, TAB_C]} />)
+    fireEvent.keyDown(screen.getByRole('tab', { name: 'Alpha' }), { key: 'End' })
+    expect(screen.getByRole('tab', { name: 'Gamma' })).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('unhandled keys do not change the active tab', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B]} />)
+    fireEvent.keyDown(screen.getByRole('tab', { name: 'Alpha' }), { key: 'Enter' })
+    expect(screen.getByRole('tab', { name: 'Alpha' })).toHaveAttribute('aria-selected', 'true')
+  })
+})

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

@@ -35,7 +35,7 @@
 
     padding: var(--tooltip-padding);
     font-size: var(--tooltip-font-size);
-    line-height: 1;
+    line-height: 1.2;
 
     @media (prefers-reduced-motion: no-preference) {
         transition: opacity var(--duration) ease, visibility var(--duration) ease;

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

@@ -0,0 +1,35 @@
+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.module.scss

@@ -0,0 +1,31 @@
+@use '../../../scss/tools/index' as tools;
+
+// ===================================================
+// Component: Features
+// ===================================================
+
+.im-c-features {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  @include tools.border-focus-base(
+    $is-inset: true
+  );
+
+  &[data-focus-visible="true"][aria-activedescendant]::after {
+    opacity: 0;
+  }
+
+  [role="option"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}

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

@@ -0,0 +1,124 @@
+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()
+  })
+})

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

@@ -12,10 +12,6 @@ export const MapStatus = () => {
       ref={mapStatusRef}
       role='status'
       className='im-c-viewport__status'
-      aria-live='polite'
-      aria-atomic='true'
-      // aria-relevant="additions"
-      aria-label='Map updates'
     />
   )
 }

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

@@ -1,47 +1,58 @@
-import React, { useRef, useEffect, useState } from 'react'
+import React, { useRef, useEffect } from 'react'
+import { useFeatureFocus } from '../../hooks/useFeatureFocus.js'
+import { useFeatureItems } from '../../hooks/useFeatureItems.js'
 import { EVENTS as events } from '../../../config/events.js'
-import { createPortal } from 'react-dom'
 import { useConfig } from '../../store/configContext.js'
-
 import { useApp } from '../../store/appContext.js'
 import { useMap } from '../../store/mapContext.js'
+import { useService } from '../../store/serviceContext.js'
 import { MapController } from './MapController.jsx'
 import { useKeyboardHint } from '../../hooks/useKeyboardHint.js'
 import { useKeyboardShortcuts } from '../../hooks/useKeyboardShortcuts.js'
 import { useMapEvents } from '../../hooks/useMapEvents.js'
 import { MapStatus } from './MapStatus.jsx'
 import { CrossHair } from '../CrossHair/CrossHair'
+import { Features } from './Features'
 import { Markers } from '../Markers/Markers'
 
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
 export const Viewport = () => {
   const { id, mapProvider, mapLabel, keyboardHintText } = useConfig()
-  const { interfaceType, mode, previousMode, layoutRefs, safeZoneInset } = useApp()
-  const { mainRef } = layoutRefs
+  const { mode, previousMode, layoutRefs, safeZoneInset, dispatch } = useApp()
   const { mapSize } = useMap()
+  const { eventBus, hints } = useService()
 
   const mapContainerRef = useRef(null)
-  const keyboardHintRef = useRef(null)
+  const featuresRef = useRef(null)
+
+  const { items: featureItems, multiselectable } = useFeatureItems(eventBus)
+  const { activeFeatureId, selectedIds, onFocus: handleFeaturesFocus, onBlur: handleFeaturesBlur } = useFeatureFocus({ viewportRef: layoutRefs.viewportRef, featuresRef, items: featureItems, eventBus, hints })
+
+  useEffect(() => {
+    const handler = () => dispatch({ type: 'SET_LISTBOX_ACTIVE' })
+    eventBus.on('interact:listboxcapable', handler)
+    return () => eventBus.off('interact:listboxcapable', handler)
+  }, [eventBus])
 
-  // Local state for keyboard hint visibility
-  const [keyboardHintVisible, setKeyboardHintVisible] = useState(false)
+  const onFeaturesFocus = () => { handleFeaturesFocus(); hints.show(keyboardHintText, { duration: 0 }) }
+  const onFeaturesBlur = () => { handleFeaturesBlur(); hints.dismiss() }
 
-  // Attach map keyboard controls
   useKeyboardShortcuts(layoutRefs.viewportRef)
 
-  // Attach map events
   useMapEvents({
     [events.MAP_CLICK]: () => mapProvider?.clearHighlightedLabel?.()
   })
 
-  // Manage keyboard hint visibility using local state
-  const { showHint, handleFocus, handleBlur } = useKeyboardHint({
-    interfaceType,
+  const { handleFocus, handleBlur } = useKeyboardHint({
     containerRef: layoutRefs.viewportRef,
-    keyboardHintRef,
-    keyboardHintVisible,
-    onViewportFocusChange: setKeyboardHintVisible // update local state only
+    onViewportFocusChange: (visible) => {
+      if (visible) {
+        hints.show(keyboardHintText, { duration: 0 })
+      } else {
+        hints.dismiss()
+      }
+    }
   })
 
   // Set focus on viewport on mode change
@@ -63,24 +74,19 @@ export const Viewport = () => {
         onFocus={handleFocus}
         onBlur={handleBlur}
         ref={layoutRefs.viewportRef}
+        aria-describedby={`${id}-keyboard-desc`}
+        aria-controls={`${id}-features`}
       >
-        {showHint && mainRef?.current && createPortal(
-          <div
-            className='im-c-viewport__keyboard-hint'
-            aria-hidden='true'
-            ref={keyboardHintRef}
-            dangerouslySetInnerHTML={{ __html: keyboardHintText }}
-          />,
-          mainRef.current
-        )}
-        <div className='im-c-viewport__map-container' ref={mapContainerRef} />
-        <div className='im-c-viewport__features' />
+        <div className='im-c-viewport__map-container' ref={mapContainerRef} aria-hidden='true' />
         <MapStatus />
-        <div className='im-c-viewport__safezone' style={safeZoneInset} ref={layoutRefs.safeZoneRef}>
+        <div className='im-c-viewport__safezone' style={safeZoneInset} ref={layoutRefs.safeZoneRef} aria-hidden='true'>
           <CrossHair />
         </div>
-        <Markers />
+        <div className='im-c-viewport__markers' aria-hidden='true'>
+          <Markers />
+        </div>
       </div>
+      <Features ref={featuresRef} activeFeatureId={activeFeatureId} selectedIds={selectedIds} multiselectable={multiselectable} items={featureItems} onFocus={onFeaturesFocus} onBlur={onFeaturesBlur} />
     </>
   )
 }

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

@@ -29,26 +29,6 @@
 
 // 2. Elements
 
-.im-c-viewport__keyboard-hint {
-    position: absolute;
-    bottom: var(--keyboard-hint-bottom, var(--primary-gap));
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 1001;
-    text-wrap: nowrap;
-
-    color: var(--tooltip-foreground-color);
-    background-color: var(--tooltip-background-color);
-    border-radius: var(--tooltip-border-radius);
-    padding: var(--tooltip-padding);
-    font-size: var(--tooltip-font-size);
-    line-height: 1;
-}
-
-.im-c-viewport__keyboard-hint kbd {
-    border: var(--kbd-tooltip-border);
-}
-
 .im-c-viewport__map-container > *:first-child {
     overflow: visible;
     transform-origin: top left;
@@ -56,7 +36,7 @@
 
 
 // ---------------------------------------------------
-// Focus area: The bit of the map thats always visible
+// Safe zone: The bit of the map thats always visible
 // ---------------------------------------------------
 
 .im-c-viewport__safezone {
@@ -65,6 +45,12 @@
   z-index: 1;
 }
 
+.im-c-viewport__markers {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
 
 // 3. Modifiers