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

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

@@ -1,18 +1,31 @@
 import React, { useState, useCallback } from 'react'
+import { useConfig } from '../../store/configContext'
 
-const toTabId = (name) => `im-c-tabs-tab-${name.toLowerCase().replaceAll(/\s+/g, '-')}`
-const toPanelId = (name) => `im-c-tabs-panel-${name.toLowerCase().replaceAll(/\s+/g, '-')}`
+// Prefixed with the app's own id (not the im-c- BEM prefix, which is for CSS classes, not DOM
+// ids — see Panel.jsx's/MapButton.jsx's own ${id}-... ids for the same convention) so these
+// stay unique when more than one map instance is on the same page.
+const toTabId = (idPrefix, name) => `${idPrefix}-tabs-tab-${name.toLowerCase().replaceAll(/\s+/g, '-')}`
+const toPanelId = (idPrefix, name) => `${idPrefix}-tabs-panel-${name.toLowerCase().replaceAll(/\s+/g, '-')}`
 
+/**
+ * @param {object} [panelProps] Extra props merged onto the tabpanel div (not the tablist) —
+ * e.g. a scrollable container's ref/className/tabIndex, for a caller (Panel.jsx) that needs
+ * that behaviour scoped to just the active tab's content, not the tablist above it. `id`,
+ * `role` and `aria-labelledby` are structural to the tabs pattern and always win over any
+ * same-named key in `panelProps`; `tabIndex` defers to `panelProps.tabIndex` when provided,
+ * since a scrollable tabpanel legitimately wants tabIndex 0 rather than the -1 default.
+ */
 // eslint-disable-next-line camelcase, react/jsx-pascal-case
 // sonarjs/disable-next-line function-name
-export const Tabs = ({ tabs, defaultTab }) => { // NOSONAR: project does not use PropTypes
+export const Tabs = ({ tabs, defaultTab, panelProps }) => { // NOSONAR: project does not use PropTypes
+  const { id: idPrefix } = useConfig()
   const names = tabs.map(t => t.name)
   const [activeTab, setActiveTab] = useState(defaultTab ?? names[0])
 
   const activateTab = useCallback((name) => {
     setActiveTab(name)
-    document.getElementById(toTabId(name))?.focus()
-  }, [])
+    document.getElementById(toTabId(idPrefix, name))?.focus()
+  }, [idPrefix])
 
   const handleKeyDown = useCallback((e) => {
     const idx = names.indexOf(activeTab)
@@ -33,7 +46,7 @@ export const Tabs = ({ tabs, defaultTab }) => { // NOSONAR: project does not use
     }
   }, [names, activeTab, activateTab])
 
-  const activeContent = tabs.find(t => t.name === activeTab)?.content
+  const panelClassName = ['im-c-tabs__panel', panelProps?.className].filter(Boolean).join(' ')
 
   return (
     <div className='im-c-tabs'>
@@ -42,10 +55,10 @@ export const Tabs = ({ tabs, defaultTab }) => { // NOSONAR: project does not use
           <button
             type='button'
             key={name}
-            id={toTabId(name)}
+            id={toTabId(idPrefix, name)}
             role='tab'
             aria-selected={activeTab === name}
-            aria-controls={toPanelId(name)}
+            aria-controls={toPanelId(idPrefix, name)}
             tabIndex={activeTab === name ? 0 : -1}
             className='im-c-tabs__tab'
             onClick={() => activateTab(name)}
@@ -55,15 +68,28 @@ export const Tabs = ({ tabs, defaultTab }) => { // NOSONAR: project does not use
           </button>
         ))}
       </div>
-      <div
-        id={toPanelId(activeTab)}
-        role='tabpanel'
-        aria-labelledby={toTabId(activeTab)}
-        tabIndex={-1} // nosonar — panel has no focusable children; -1 per ARIA tabs pattern (AT reads via role/aria-labelledby)
-        className='im-c-tabs__panel'
-      >
-        {activeContent}
-      </div>
+      {/* All tabpanels render, hidden unless active — not swapped in/out — so every tab's
+          aria-controls always resolves to a real element, rather than only the active one's.
+          panelProps (ref/tabIndex — a scrollable container's, from a caller like Panel.jsx)
+          can only meaningfully target one DOM node, so it's applied to the active panel only;
+          className is shared by all of them so there's nothing to restyle on switch. */}
+      {tabs.map(({ name, content }) => {
+        const isActive = activeTab === name
+        return (
+          <div
+            key={name}
+            ref={isActive ? panelProps?.ref : undefined}
+            id={toPanelId(idPrefix, name)}
+            role='tabpanel'
+            aria-labelledby={toTabId(idPrefix, name)}
+            tabIndex={isActive ? (panelProps?.tabIndex ?? -1) : -1} // nosonar — panel has no focusable children by default (-1); a scrollable active one wants 0, via panelProps
+            hidden={!isActive}
+            className={panelClassName}
+          >
+            {content}
+          </div>
+        )
+      })}
     </div>
   )
 }

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

@@ -4,9 +4,18 @@
 // Component: Tabs
 // ===================================================
 
+// Lets a caller (e.g. Panel.jsx) give Tabs a bounded height — only .im-c-tabs__panel scrolls.
+.im-c-tabs {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex: 1 1 auto;
+}
+
 .im-c-tabs__list {
     position: relative;
     display: flex;
+    flex: 0 0 auto;
     flex-wrap: wrap;
     padding: 0;
     margin: 0;
@@ -14,8 +23,14 @@
     z-index: 1;
 }
 
+.im-c-tabs__panel {
+    flex: 1 1 auto;
+    overflow: auto;
+}
+
 .im-c-tabs__tab {
     position: relative;
+    z-index: 0; // scopes the active tab's ::before (below) to this button's own stacking context
     appearance: none;
     background: var(--button-hover-color);
     border: 1px solid transparent;
@@ -42,12 +57,24 @@
         }
     }
 
+    // The selected tab looks taller via an absolutely-positioned ::before rather than changing
+    // the button's own box, so the label never moves and the tablist's height never shifts.
     &[aria-selected='true'] {
-        background: var(--background-color);
-        border-color: var(--app-border-color);
-        border-bottom-color: var(--background-color);
-        margin-top: 0;
-        margin-bottom: -1px;
+        z-index: 1; // sit above unselected siblings
+        background: transparent;
+
+        &::before {
+            content: '';
+            position: absolute;
+            z-index: -1;
+            top: -5px;
+            right: -1px;
+            bottom: -6px;
+            left: -1px;
+            background: var(--background-color);
+            border: 1px solid var(--app-border-color);
+            border-bottom-color: var(--background-color);
+        }
     }
 
     &:focus .im-c-tabs__label {

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

@@ -1,11 +1,18 @@
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { Tabs } from './Tabs'
+import { useConfig } from '../../store/configContext'
+
+jest.mock('../../store/configContext', () => ({ useConfig: jest.fn() }))
 
 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> }
 
+beforeEach(() => {
+  useConfig.mockReturnValue({ id: 'test-app' })
+})
+
 // ─── rendering ───────────────────────────────────────────────────────────────
 
 describe('Tabs — rendering', () => {
@@ -15,17 +22,17 @@ describe('Tabs — rendering', () => {
     expect(screen.getByRole('tab', { name: 'Beta' })).toBeInTheDocument()
   })
 
-  it('shows content for the active tab only', () => {
+  it('shows content for the active tab only — the inactive one stays in the DOM (so its aria-controls target exists) but hidden', () => {
     render(<Tabs tabs={[TAB_A, TAB_B]} />)
-    expect(screen.getByText('Alpha content')).toBeInTheDocument()
-    expect(screen.queryByText('Beta content')).not.toBeInTheDocument()
+    expect(screen.getByText('Alpha content')).toBeVisible()
+    expect(screen.getByText('Beta content')).not.toBeVisible()
   })
 
   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()
+    expect(screen.getByText('Beta content')).toBeVisible()
+    expect(screen.getByText('Alpha content')).not.toBeVisible()
   })
 
   it('falls back to first tab when defaultTab is not provided', () => {
@@ -41,8 +48,8 @@ describe('Tabs — click behaviour', () => {
     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()
+    expect(screen.getByText('Beta content')).toBeVisible()
+    expect(screen.getByText('Alpha content')).not.toBeVisible()
   })
 })
 
@@ -55,10 +62,33 @@ describe('Tabs — WCAG attributes', () => {
     expect(screen.getByRole('tab', { name: 'Beta' })).toHaveAttribute('tabindex', '-1')
   })
 
-  it('each tab has aria-controls pointing to an element in the DOM', () => {
+  it('every tab has aria-controls pointing to a real element — including inactive tabs, since their panel stays in the DOM (hidden) rather than being unmounted', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B]} />)
+    const activeTab = screen.getByRole('tab', { name: 'Alpha' })
+    const inactiveTab = screen.getByRole('tab', { name: 'Beta' })
+    expect(document.getElementById(activeTab.getAttribute('aria-controls'))).toBeInTheDocument()
+    expect(document.getElementById(inactiveTab.getAttribute('aria-controls'))).toBeInTheDocument()
+  })
+
+  it('gives every tabpanel its own stable id, distinct per tab, not just the active one', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B]} />)
+    const activeTab = screen.getByRole('tab', { name: 'Alpha' })
+    const inactiveTab = screen.getByRole('tab', { name: 'Beta' })
+    expect(activeTab.getAttribute('aria-controls')).not.toBe(inactiveTab.getAttribute('aria-controls'))
+  })
+
+  it('hides the inactive tabpanel via the hidden attribute rather than unmounting it', () => {
+    render(<Tabs tabs={[TAB_A, TAB_B]} />)
+    const inactiveTab = screen.getByRole('tab', { name: 'Beta' })
+    const inactivePanel = document.getElementById(inactiveTab.getAttribute('aria-controls'))
+    expect(inactivePanel).toHaveAttribute('hidden')
+  })
+
+  it("labels every tabpanel with its own tab, not just the active one's", () => {
     render(<Tabs tabs={[TAB_A, TAB_B]} />)
-    const tab = screen.getByRole('tab', { name: 'Alpha' })
-    expect(document.getElementById(tab.getAttribute('aria-controls'))).toBeInTheDocument()
+    const inactiveTab = screen.getByRole('tab', { name: 'Beta' })
+    const inactivePanel = document.getElementById(inactiveTab.getAttribute('aria-controls'))
+    expect(inactivePanel.getAttribute('aria-labelledby')).toBe(inactiveTab.id)
   })
 
   it('panel has aria-labelledby pointing to the active tab', () => {

package/src/App/renderer/groupByKey.js

@@ -0,0 +1,28 @@
+import { stringToKebab } from '../../utils/stringToKebab.js'
+
+/**
+ * Partitions a list of items into buckets, keyed by `keyFn(item)` kebab-cased — two items
+ * share a bucket by producing the same key (so 'Map Size' and 'map size' merge). Items for
+ * which `keyFn` returns a falsy value all share one `null`-keyed bucket. Bucket iteration
+ * order follows first-encountered order, same as `Map`.
+ *
+ * Shared by `groupIntoTabs` (panel/control tabs) and `mapButtons` (button groups) — the two
+ * callers differ only in what happens *after* bucketing (how a bucket's own order/label is
+ * derived), not in how items get partitioned.
+ *
+ * @returns {Map<string|null, object[]>}
+ */
+export function groupByKey ({ items, keyFn }) {
+  const buckets = new Map()
+
+  for (const item of items) {
+    const raw = keyFn(item)
+    const key = raw ? stringToKebab(raw) : null
+    if (!buckets.has(key)) {
+      buckets.set(key, [])
+    }
+    buckets.get(key).push(item)
+  }
+
+  return buckets
+}

package/src/App/renderer/groupByKey.test.js

@@ -0,0 +1,39 @@
+import { groupByKey } from './groupByKey.js'
+
+describe('groupByKey', () => {
+  it('returns one bucket per distinct key', () => {
+    const items = [{ id: 'a', k: 'Styles' }, { id: 'b', k: 'Sizes' }]
+    const buckets = groupByKey({ items, keyFn: item => item.k })
+    expect([...buckets.keys()].sort()).toEqual(['sizes', 'styles'])
+  })
+
+  it('lowercases the key, hyphenating only camelCase-style boundaries (stringToKebab)', () => {
+    const items = [{ id: 'a', k: 'mapSize' }]
+    const buckets = groupByKey({ items, keyFn: item => item.k })
+    expect([...buckets.keys()]).toEqual(['map-size'])
+  })
+
+  it('merges items whose key differs only by case/whitespace into one bucket', () => {
+    const items = [{ id: 'a', k: 'Map Size' }, { id: 'b', k: 'map size' }]
+    const buckets = groupByKey({ items, keyFn: item => item.k })
+    expect(buckets.size).toBe(1)
+    expect([...buckets.values()][0]).toHaveLength(2)
+  })
+
+  it('puts items with no key into one null-keyed bucket', () => {
+    const items = [{ id: 'a' }, { id: 'b' }]
+    const buckets = groupByKey({ items, keyFn: () => null })
+    expect(buckets.size).toBe(1)
+    expect(buckets.get(null)).toHaveLength(2)
+  })
+
+  it('keeps items within a bucket in their original relative order', () => {
+    const items = [{ id: 'a', k: 'g' }, { id: 'b', k: 'g' }, { id: 'c', k: 'g' }]
+    const buckets = groupByKey({ items, keyFn: item => item.k })
+    expect(buckets.get('g').map(i => i.id)).toEqual(['a', 'b', 'c'])
+  })
+
+  it('returns an empty map for an empty list', () => {
+    expect(groupByKey({ items: [], keyFn: () => 'x' }).size).toBe(0)
+  })
+})

package/src/App/renderer/groupIntoTabs.js

@@ -0,0 +1,42 @@
+import { orderItems } from './orderItems.js'
+import { groupByKey } from './groupByKey.js'
+
+/**
+ * Groups a flat list of `{ id, order, tab, element }` items into tabs, when warranted.
+ *
+ * Items are partitioned by `tab` via `groupByKey` — two items share a tab by producing the
+ * same kebab-cased key. Items with no `tab` share one fallback bucket. Returns `null` when
+ * there's one bucket or fewer, so the caller can fall back to flat rendering unchanged.
+ *
+ * Each bucket's members are ordered via `orderItems`; the resulting tab's own `order` and
+ * displayed `name` both come from whichever member ends up first in that ordering — the same
+ * item that "wins" the position also wins the label, so there's nothing separate to reconcile
+ * when members disagree. The tabs themselves are then ordered the same way, via `orderItems`
+ * again — no new ordering concept, just the existing one applied twice.
+ *
+ * This derived-order approach is safe here because tabs are mutually exclusive — only the
+ * active tab's content is ever visible, so a "losing" member's own order never has to compete
+ * against anything outside its own tab at the same time. `mapButtons`'s button groups don't
+ * have that property (every group renders simultaneously), so they don't derive a group's
+ * order from its members the same way — see `mapButtons.js`.
+ */
+export function groupIntoTabs ({ items, fallbackLabel }) {
+  const buckets = groupByKey({ items, keyFn: item => item.tab })
+
+  if (buckets.size <= 1) {
+    return null
+  }
+
+  const tabs = Array.from(buckets.entries()).map(([key, members]) => {
+    const orderedMembers = orderItems(members)
+    const first = orderedMembers[0]
+    return {
+      id: key ?? 'default',
+      order: first.order,
+      name: key ? first.tab : fallbackLabel,
+      items: orderedMembers
+    }
+  })
+
+  return orderItems(tabs)
+}

package/src/App/renderer/groupIntoTabs.test.js

@@ -0,0 +1,95 @@
+import { groupIntoTabs } from './groupIntoTabs.js'
+
+describe('groupIntoTabs', () => {
+  it('returns null when there are no items', () => {
+    expect(groupIntoTabs({ items: [], fallbackLabel: 'Panel' })).toBeNull()
+  })
+
+  it('returns null when all items share the same tab', () => {
+    const items = [
+      { id: 'a', order: 0, tab: 'Styles' },
+      { id: 'b', order: 0, tab: 'Styles' }
+    ]
+    expect(groupIntoTabs({ items, fallbackLabel: 'Panel' })).toBeNull()
+  })
+
+  it('returns null when no items have a tab', () => {
+    const items = [{ id: 'a', order: 0 }, { id: 'b', order: 0 }]
+    expect(groupIntoTabs({ items, fallbackLabel: 'Panel' })).toBeNull()
+  })
+
+  it('partitions items into distinct tabs', () => {
+    const items = [
+      { id: 'a', order: 0, tab: 'Styles' },
+      { id: 'b', order: 0, tab: 'Sizes' }
+    ]
+    const tabs = groupIntoTabs({ items, fallbackLabel: 'Panel' })
+    expect(tabs.map(t => t.name).sort()).toEqual(['Sizes', 'Styles'])
+  })
+
+  it('groups untagged items into one fallback bucket named after fallbackLabel', () => {
+    const items = [
+      { id: 'a', order: 0, tab: 'Styles' },
+      { id: 'b', order: 0 },
+      { id: 'c', order: 0 }
+    ]
+    const tabs = groupIntoTabs({ items, fallbackLabel: 'Map styles' })
+    const fallback = tabs.find(t => t.name === 'Map styles')
+    expect(fallback.items.map(i => i.id).sort()).toEqual(['b', 'c'])
+  })
+
+  it('merges items whose tab differs only by case/whitespace into one bucket', () => {
+    const items = [
+      { id: 'a', order: 0, tab: 'Map Size' },
+      { id: 'b', order: 1, tab: 'map size' },
+      { id: 'c', order: 0, tab: 'Styles' }
+    ]
+    const tabs = groupIntoTabs({ items, fallbackLabel: 'Panel' })
+    expect(tabs).toHaveLength(2)
+    const merged = tabs.find(t => t.items.length === 2)
+    expect(merged.items.map(i => i.id)).toEqual(expect.arrayContaining(['a', 'b']))
+  })
+
+  it("uses the winning (lowest-order) member's raw tab string as the displayed name", () => {
+    const items = [
+      { id: 'a', order: 2, tab: 'MAP SIZE' },
+      { id: 'b', order: 1, tab: 'map size' }, // lower order wins the label
+      { id: 'c', order: 0, tab: 'Styles' }
+    ]
+    const tabs = groupIntoTabs({ items, fallbackLabel: 'Panel' })
+    const merged = tabs.find(t => t.items.length === 2)
+    expect(merged.name).toBe('map size')
+  })
+
+  it("derives a tab's order from its first ordered member", () => {
+    const items = [
+      { id: 'a', order: 5, tab: 'Styles' },
+      { id: 'b', order: 1, tab: 'Styles' },
+      { id: 'c', order: 0, tab: 'Sizes' }
+    ]
+    const tabs = groupIntoTabs({ items, fallbackLabel: 'Panel' })
+    const stylesTab = tabs.find(t => t.name === 'Styles')
+    expect(stylesTab.order).toBe(1)
+  })
+
+  it('orders tabs among themselves using the derived order', () => {
+    const items = [
+      { id: 'a', order: 2, tab: 'Second' },
+      { id: 'b', order: 1, tab: 'First' }
+    ]
+    const tabs = groupIntoTabs({ items, fallbackLabel: 'Panel' })
+    expect(tabs.map(t => t.name)).toEqual(['First', 'Second'])
+  })
+
+  it('orders items within a tab using orderItems', () => {
+    const items = [
+      { id: 'a', order: 0, tab: 'Styles' },
+      { id: 'b', order: 1, tab: 'Styles' },
+      { id: 'c', order: 0, tab: 'Sizes' }
+    ]
+    const tabs = groupIntoTabs({ items, fallbackLabel: 'Panel' })
+    const stylesTab = tabs.find(t => t.name === 'Styles')
+    // b (order 1) is spliced ahead of the unordered item a
+    expect(stylesTab.items.map(i => i.id)).toEqual(['b', 'a'])
+  })
+})