basalt-ui 1.16.0 → 1.18.0

package/src/charts/kinds/DualPanel.test.tsx

@@ -6,9 +6,11 @@
  * `Bars.test.tsx`) — DualPanel has two `HoverOverlay`s sharing one cursor, but only the TOP one is
  * keyboard-focusable, so `getByRole('slider')` is unambiguous.
  */
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, within } from '@testing-library/react'
 import { describe, expect, test } from 'bun:test'
 import { renderToStaticMarkup } from 'react-dom/server'
+import { ChartCursorScope } from '../cursor/scope'
+import { CartesianChart } from '../primitives/CartesianChart'
 import { DualPanel } from './DualPanel'
 import type { ChartSeries } from '../series'
 
@@ -96,6 +98,236 @@ describe('DualPanel — per-point getMarker rendering', () => {
   })
 })
 
+describe('DualPanel — getMarker fillOpacity/ring', () => {
+  test('ring: false omits the stroke; fillOpacity defaults 1 and honors an override', () => {
+    const markerRows: Row[] = [
+      { date: '2026-08-01', v: 10, bar: 0.02 },
+      { date: '2026-08-02', v: 12, bar: 0.03 },
+    ]
+    const markerSeries: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#111',
+        mark: 'line',
+        getValue: (d) => d.v,
+        getMarker: (d) =>
+          d.date === '2026-08-01'
+            ? { ring: false, fillOpacity: 0.7 }
+            : d.date === '2026-08-02'
+              ? {}
+              : null,
+      },
+    ]
+
+    const { container } = render(
+      <DualPanel<Row>
+        data={markerRows}
+        chartId="dp-marker-ring"
+        getX={(d) => d.date}
+        series={markerSeries}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+      />,
+    )
+
+    const circles = container.querySelectorAll('circle')
+    expect(circles).toHaveLength(2)
+    // ring: false — no stroke attribute at all.
+    expect(circles[0]?.getAttribute('stroke')).toBeNull()
+    expect(circles[0]?.getAttribute('fill-opacity')).toBe('0.7')
+    // default marker — unchanged punched-out ring + full opacity.
+    expect(circles[1]?.getAttribute('stroke')).not.toBeNull()
+    expect(circles[1]?.getAttribute('fill-opacity')).toBe('1')
+  })
+})
+
+describe('DualPanel — formatX', () => {
+  test('a custom formatX renders on the bottom axis instead of the default DD.MM', () => {
+    const { container } = render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-formatx"
+        getX={(d) => d.date}
+        series={series}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+        formatX={(key) => `X:${key}`}
+      />,
+    )
+    expect(container.innerHTML).toContain('X:2026-08-01')
+  })
+})
+
+describe('DualPanel — formatX reaches the margin measurement, not just the axis', () => {
+  test('a formatter that widens x labels narrows the plot rect — the gutter grows to fit it', () => {
+    function xLabelGutterWidth(formatX?: (key: string) => string): number {
+      const { container, unmount } = render(
+        <DualPanel<Row>
+          data={rows}
+          chartId="dp-margin"
+          getX={(d) => d.date}
+          series={series}
+          getBar={(d) => d.bar}
+          barLabel="Bar"
+          barColorPositive="#0a0"
+          barColorNegative="#a00"
+          formatTop={(v) => String(v)}
+          formatBottom={(v) => v.toFixed(2)}
+          {...(formatX !== undefined && { formatX })}
+        />,
+      )
+      // The transparent HoverOverlay rects are drawn at exactly `width={xMax}` — `plot.width` is
+      // fixed under this DOM harness (no ResizeObserver, so `ChartFrame` falls back to its
+      // `minWidth` floor), so a narrower `xMax` here can only mean a wider measured margin.
+      const overlay = container.querySelector('rect[fill="transparent"]')
+      const width = Number(overlay?.getAttribute('width'))
+      unmount()
+      return width
+    }
+
+    const defaultWidth = xLabelGutterWidth()
+    const widenedWidth = xLabelGutterWidth(
+      (key) => `Extremely Long Formatted Axis Label ${key} With Lots Of Extra Padding Text`,
+    )
+    expect(widenedWidth).toBeLessThan(defaultWidth)
+  })
+})
+
+describe('DualPanel — tooltip.formatHeader', () => {
+  test('overrides the tooltip header date text', async () => {
+    render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-formatheader"
+        getX={(d) => d.date}
+        series={series}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+        formatHeader={(key) => `hdr:${key}`}
+      />,
+    )
+
+    const slider = screen.getByRole('slider')
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+    expect(await screen.findByText('hdr:2026-08-01')).toBeTruthy()
+  })
+})
+
+describe('DualPanel — ariaLabel reaches the slider, not only the frame', () => {
+  test('both the outer group and the focusable slider carry the name', () => {
+    render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-arialabel"
+        getX={(d) => d.date}
+        series={series}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+        ariaLabel="Latency"
+      />,
+    )
+
+    // The bug was precisely that the label stopped at the frame — assert both carry it.
+    expect(screen.getByRole('group', { name: 'Latency' })).toBeTruthy()
+    expect(screen.getByRole('slider', { name: 'Latency' })).toBeTruthy()
+  })
+})
+
+describe('DualPanel — slider value attributes', () => {
+  test('aria-valuemax is always present; aria-valuenow/valuetext appear only once a point is hovered', () => {
+    render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-slider-values"
+        getX={(d) => d.date}
+        series={series}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+      />,
+    )
+
+    const slider = screen.getByRole('slider')
+    expect(slider.getAttribute('aria-valuemax')).toBe('0')
+    expect(slider.hasAttribute('aria-valuenow')).toBe(false)
+    expect(slider.hasAttribute('aria-valuetext')).toBe(false)
+
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+    expect(slider.getAttribute('aria-valuenow')).toBe('0')
+    expect(slider.getAttribute('aria-valuetext')).toBe('01.08')
+  })
+})
+
+describe('DualPanel — aria-valuetext reflects formatX', () => {
+  test('a custom formatX also drives the hovered slider value text, not just the axis', () => {
+    render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-slider-formatx"
+        getX={(d) => d.date}
+        series={series}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+        formatX={(key) => `X:${key}`}
+      />,
+    )
+
+    const slider = screen.getByRole('slider')
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+    expect(slider.getAttribute('aria-valuetext')).toBe('X:2026-08-01')
+  })
+})
+
+describe('DualPanel — only the top overlay is keyboard-focusable', () => {
+  test('renders exactly one role="slider" element — the bottom overlay stays pointer-only', () => {
+    render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-one-slider"
+        getX={(d) => d.date}
+        series={series}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+      />,
+    )
+
+    // Two focusable tab stops for one logical x-axis is exactly what the pointer-only bottom
+    // overlay exists to prevent — this fails the moment a future edit adds onKeyDown there too.
+    expect(screen.getAllByRole('slider')).toHaveLength(1)
+  })
+})
+
 describe('DualPanel — fixed bottomYDomain ships verbatim (un-niced)', () => {
   test('bottom axis ticks come from the pinned domain, not the computed max-abs', () => {
     // Data's max abs is 0.02 — an auto domain would never produce a "5.00" tick. Pinning
@@ -129,3 +361,161 @@ describe('DualPanel — formatBar overrides only the tooltip row', () => {
     expect(await screen.findByText('0.020 m/s (2026-08-01)')).toBeTruthy()
   })
 })
+
+describe('DualPanel — cursorResolution threads through to sibling resolution', () => {
+  // `DualPanel` composes `ChartFrame` + `useChartCursor` directly rather than `CartesianChart`, so
+  // its forward runs through a different path than every other kind — verify it here rather than
+  // assuming the `CartesianChart`-composing pattern (`Bars.test.tsx`) ports verbatim.
+  //
+  // `DualPanel` forwards `ariaLabel` onto its own keyboard overlay (parity with every other kind),
+  // so the resolved bucket can be read straight off `aria-valuetext` — mirrors
+  // `Bars.test.tsx`'s cursorResolution assertions.
+  type DailyRow = { date: string; shown: number }
+  type FoldedRow = { date: string; v: number; bar: number }
+
+  const dailyRows: DailyRow[] = Array.from({ length: 14 }, (_, i) => ({
+    date: `2026-08-${String(i + 1).padStart(2, '0')}`,
+    shown: i,
+  }))
+  const foldedRows: FoldedRow[] = [
+    { date: '2026-08-01', v: 0, bar: 5 },
+    { date: '2026-08-08', v: 1, bar: -5 },
+  ]
+  const dailySeries: ChartSeries<DailyRow>[] = [
+    { key: 'shown', label: 'Shown', color: '#111', mark: 'line', getValue: (d) => d.shown },
+  ]
+  const foldedSeries: ChartSeries<FoldedRow>[] = [
+    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+  ]
+
+  function renderPair(cursorResolution?: 'leading') {
+    render(
+      <ChartCursorScope>
+        <CartesianChart<DailyRow>
+          data={dailyRows}
+          chartId="dp-cursor-daily"
+          getX={(d) => d.date}
+          series={dailySeries}
+          ariaLabel="Daily"
+        >
+          {() => null}
+        </CartesianChart>
+        <DualPanel<FoldedRow>
+          data={foldedRows}
+          chartId="dp-cursor-folded"
+          getX={(d) => d.date}
+          series={foldedSeries}
+          getBar={(d) => d.bar}
+          barLabel="Bar"
+          barColorPositive="#0a0"
+          barColorNegative="#a00"
+          formatTop={(v) => String(v)}
+          formatBottom={(v) => v.toFixed(2)}
+          ariaLabel="Folded"
+          {...(cursorResolution !== undefined && { cursorResolution })}
+        />
+      </ChartCursorScope>,
+    )
+  }
+
+  // Drives the daily chart to Aug 05 — the back half of the Aug 01–07 bucket (midpoint Aug 04) —
+  // via 5 keyboard ArrowRights from an unfocused slider (1st press lands on index 0).
+  function driveDailyToAug05() {
+    const dailySlider = screen.getByRole('slider', { name: 'Daily' })
+    for (let i = 0; i < 5; i++) fireEvent.keyDown(dailySlider, { key: 'ArrowRight' })
+  }
+
+  test("cursorResolution='leading' resolves the back-half day to the bucket it's INSIDE, not the following one", () => {
+    renderPair('leading')
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('01.08')
+  })
+
+  test("without the prop (default 'nearest'), the same daily hover lands on the FOLLOWING bucket instead", () => {
+    renderPair()
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('08.08')
+  })
+})
+
+describe('DualPanel — onFollow (follower behaviour parity with CartesianChart)', () => {
+  type SourceRow = { date: string; shown: number }
+  const sourceRows: SourceRow[] = [{ date: '2026-08-01', shown: 10 }]
+  const sourceSeries: ChartSeries<SourceRow>[] = [
+    { key: 'shown', label: 'Shown', color: '#111', mark: 'line', getValue: (d) => d.shown },
+  ]
+
+  function renderPair(onFollow?: boolean, followerRows: Row[] = rows) {
+    render(
+      <ChartCursorScope>
+        <CartesianChart<SourceRow>
+          data={sourceRows}
+          chartId="dp-of-source"
+          getX={(d) => d.date}
+          series={sourceSeries}
+          ariaLabel="Source"
+          legend={false}
+        >
+          {() => null}
+        </CartesianChart>
+        <DualPanel<Row>
+          data={followerRows}
+          chartId="dp-of-follower"
+          getX={(d) => d.date}
+          series={series}
+          getBar={(d) => d.bar}
+          barLabel="Bar"
+          barColorPositive="#0a0"
+          barColorNegative="#a00"
+          formatTop={(v) => String(v)}
+          formatBottom={(v) => v.toFixed(2)}
+          ariaLabel="Follower"
+          legend={false}
+          {...(onFollow !== undefined && { onFollow })}
+        />
+      </ChartCursorScope>,
+    )
+  }
+
+  test('onFollow: true renders the DualPanel tooltip while a sibling owns the cursor', async () => {
+    renderPair(true)
+    fireEvent.keyDown(screen.getByRole('slider', { name: 'Source' }), { key: 'ArrowRight' })
+
+    expect(await screen.findByText('V')).toBeTruthy()
+  })
+
+  test('without onFollow (default false), DualPanel renders no tooltip as a follower', async () => {
+    renderPair()
+    fireEvent.keyDown(screen.getByRole('slider', { name: 'Source' }), { key: 'ArrowRight' })
+
+    // The SOURCE still renders its own tooltip — only the DualPanel follower stays silent.
+    expect(await screen.findByText('Shown')).toBeTruthy()
+    expect(screen.queryByText('V')).toBeNull()
+    expect(screen.queryAllByRole('tooltip')).toHaveLength(1)
+  })
+
+  test('the follower tooltip is not aria-live; the source is', async () => {
+    renderPair(true)
+    fireEvent.keyDown(screen.getByRole('slider', { name: 'Source' }), { key: 'ArrowRight' })
+    await screen.findByText('V')
+
+    const tooltips = screen.getAllByRole('tooltip')
+    expect(tooltips).toHaveLength(2)
+    const sourceTooltip = tooltips.find((t) => within(t).queryByText('Shown') !== null)
+    const followerTooltip = tooltips.find((t) => within(t).queryByText('V') !== null)
+    expect(sourceTooltip?.getAttribute('aria-live')).toBe('polite')
+    expect(followerTooltip?.hasAttribute('aria-live')).toBe(false)
+  })
+
+  test('a follower whose domain never resolves the broadcast key renders no tooltip shell', async () => {
+    const foreignRows: Row[] = [{ date: '2027-01-15', v: 99, bar: 0.5 }]
+    renderPair(true, foreignRows)
+    fireEvent.keyDown(screen.getByRole('slider', { name: 'Source' }), { key: 'ArrowRight' })
+
+    expect(await screen.findByText('Shown')).toBeTruthy()
+    expect(screen.queryByText('V')).toBeNull()
+    expect(screen.queryAllByRole('tooltip')).toHaveLength(1)
+  })
+})

package/src/charts/kinds/DualPanel.tsx

@@ -4,7 +4,7 @@ import { Group } from '@visx/group'
 import { scaleLinear, scalePoint } from '@visx/scale'
 import { Bar, LinePath } from '@visx/shape'
 import { Threshold } from '@visx/threshold'
-import { memo, useMemo } from 'react'
+import { memo, useMemo, useRef } from 'react'
 import type { ReactNode } from 'react'
 import { AxisBottomDate, AxisLeftNumeric } from '../primitives/Axes'
 import {
@@ -18,6 +18,7 @@ import { Crosshair, SeriesDot } from '../primitives/Crosshair'
 import { HoverOverlay } from '../primitives/HoverOverlay'
 import { ZoneRects } from '../primitives/ZoneRects'
 import type { ZoneSpec } from '../primitives/ZoneRects'
+import type { CursorResolution } from '../cursor/resolve'
 import { useChartCursor } from '../hooks/useChartCursor'
 import { autoMargin, probeAxisLabels } from '../layout/auto-margin'
 import { deriveTooltipRows, LINE_OVERLAY_STROKE_WIDTH } from '../series'
@@ -32,6 +33,15 @@ export type DualPanelProps<T> = {
   height?: number
   chartId: string
   getX: (d: T) => string
+  /** X tick label formatter. Default `fmtAxisDate` (DD.MM) — same default `CartesianChart` uses,
+   * so omitting it is byte-identical to today's rendering. */
+  formatX?: (key: string) => string
+  /**
+   * How a sibling chart's broadcast cursor key resolves against this chart's points. Default
+   * `'nearest'`. Pass `'leading'` when `getX` returns a bucket's leading edge (a weekly series
+   * keyed by its Monday) — see `CursorResolution`.
+   */
+  cursorResolution?: CursorResolution
   /** 1+ line series in the top pane — the single source of truth for color, dash, legend, and
    * tooltip rows. E.g. acute (solid) / chronic (dashed). */
   series: ChartSeries<T>[]
@@ -67,6 +77,20 @@ export type DualPanelProps<T> = {
   bottomMaxAbsFloor?: number
   /** Tooltip badge — appears at the right of the tooltip header. */
   tooltipLabel?: (d: T) => { text: string; color: string } | null
+  /**
+   * Overrides the tooltip header's date text — the same seam `CartesianChart`'s
+   * `CartesianTooltipConfig.formatHeader` exposes, so the two don't diverge. Default:
+   * `TooltipHeader`'s own `fmtTooltipDate` behavior, unchanged. Receives the raw `getX` key
+   * alongside the hovered datum.
+   */
+  formatHeader?: (key: string, d: T) => string
+  /**
+   * Render this chart's tooltip when it is a cursor FOLLOWER, not only when it is the SOURCE —
+   * same seam and same anchored-positioning behaviour as `CartesianTooltipConfig.onFollow`. Default
+   * false (today's behaviour). Only the SOURCE's tooltip is `aria-live`; a follower's is visual
+   * only.
+   */
+  onFollow?: boolean
   /** Legend config forwarded to `ChartFrame`; `false` disables the legend (sparkline escape).
    * Default `{ placement: 'bottom' }`. */
   legend?: ChartLegendConfig | false
@@ -138,6 +162,9 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     data,
     chartId,
     getX,
+    formatX = fmtAxisDate,
+    cursorResolution,
+    ariaLabel,
     series,
     topYDomain = 'auto',
     fillBetween,
@@ -154,6 +181,8 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     bottomYDomain = 'auto',
     bottomMaxAbsFloor,
     tooltipLabel,
+    formatHeader,
+    onFollow,
     plot,
   } = props
 
@@ -237,7 +266,9 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
 
   // Full (untinned) x labels are enough to measure the bottom/right gutters — thinning only drops
   // labels, never widens the max, so measuring against the full set is a safe over-estimate.
-  const xLabelsAll = useMemo(() => data.map((d) => fmtAxisDate(getX(d))), [data, getX])
+  // Uses the SAME `formatX` the real axis paints with (`AxisBottomDate` below), or the measured
+  // gutter would be computed from labels the axis never paints.
+  const xLabelsAll = useMemo(() => data.map((d) => formatX(getX(d))), [data, getX, formatX])
 
   const margin = useMemo(
     () => autoMargin({ left: [...topLabels, ...bottomLabels], bottom: xLabelsAll }),
@@ -285,6 +316,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     getKey: getX,
     xScale,
     marginLeft: margin.left,
+    ...(cursorResolution !== undefined && { resolution: cursorResolution }),
   })
 
   const tickValues = useMemo(() => smartTicks(data.map(getX), xMax), [data, xMax, getX])
@@ -382,6 +414,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
           if (m === null) continue
           const cx = xScale(getX(p.__d)) ?? 0
           const cy = topYScale(p.__y)
+          const ring = m.ring ?? true
           markers.push(
             <circle
               key={`mk-${s.key}-${getX(p.__d)}`}
@@ -389,8 +422,8 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
               cy={cy}
               r={m.r ?? VX.dotR}
               fill={m.color ?? s.color}
-              stroke={VX.dotStroke}
-              strokeWidth={2}
+              fillOpacity={m.fillOpacity ?? 1}
+              {...(ring && { stroke: VX.dotStroke, strokeWidth: 2 })}
             />,
           )
         }
@@ -399,13 +432,27 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     [visibleSeries, lineValid, xScale, topYScale, getX],
   )
 
+  const svgRef = useRef<SVGSVGElement>(null)
   const point = cursor.point
   const sx = point !== null ? (xScale(getX(point)) ?? 0) : 0
   const syncedBar = point !== null ? getBar(point) : null
 
+  // Same seam as `CartesianChart`: this chart renders its tooltip as the cursor SOURCE (always) or,
+  // opted in via `onFollow`, as a FOLLOWER. A follower has no pointer under it, so it is always
+  // positioned via the anchored (crosshair) path — `cursor.anchor` stays null on a chart nobody is
+  // hovering, so following it here would render nothing.
+  const isFollowerRender = !cursor.isSource && onFollow === true
+  const showTooltip = point !== null && (cursor.isSource || isFollowerRender)
+  const anchorX = isFollowerRender && point !== null ? sx : null
+  const svgRect = anchorX === null ? undefined : svgRef.current?.getBoundingClientRect()
+  const tooltipAnchor =
+    svgRect === undefined || anchorX === null
+      ? cursor.anchor
+      : { x: svgRect.left + margin.left + anchorX, y: svgRect.top + margin.top }
+
   return (
     <>
-      <svg width={plot.width} height={plot.height}>
+      <svg ref={svgRef} width={plot.width} height={plot.height}>
         {/* Top pane: line series + fill-between + zones + ref lines. */}
         <Group left={margin.left} top={margin.top}>
           <GridRows scale={topYScale} width={xMax} stroke={VX.grid} numTicks={4} />
@@ -484,6 +531,11 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
           {/* One HoverOverlay per pane, both driving the SAME shared cursor — snap-to-nearest is
               x-only, so either overlay yields the same point. The top overlay extends over the gutter
               (height = topH + PANE_GAP) so there's no dead zone between the panes. */}
+          {/* The focusable overlay is the ONE keyboard control for both panes, so it carries the
+              slider's label and value — parity with `CartesianChart`. Without them the frame's
+              `aria-label` announces the chart and the slider underneath it is an unnamed control
+              reporting no position: technically focusable, useless to read. The bottom overlay
+              stays pointer-only and therefore deliberately carries neither. */}
           <HoverOverlay
             width={xMax}
             height={topH + PANE_GAP}
@@ -491,6 +543,12 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
             onLeave={cursor.onPointerLeave}
             onKeyDown={cursor.onKeyDown}
             onBlur={cursor.onBlur}
+            valueMax={Math.max(data.length - 1, 0)}
+            {...(point !== null && {
+              valueNow: data.indexOf(point),
+              valueText: formatX(getX(point)),
+            })}
+            {...(ariaLabel !== undefined && { ariaLabel })}
           />
         </Group>
 
@@ -531,7 +589,12 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
             )}
 
           <AxisLeftNumeric scale={bottomYScale} numTicks={3} tickFormat={formatBottom} />
-          <AxisBottomDate top={bottomH} scale={xScale} tickValues={tickValues} />
+          <AxisBottomDate
+            top={bottomH}
+            scale={xScale}
+            tickValues={tickValues}
+            tickFormat={formatX}
+          />
           {/* Pointer only — deliberately NO `onKeyDown`, which is what makes an overlay focusable.
               Both panes scrub the same single x cursor, so a second tab stop would be a second
               control for one logical axis: a keyboard user would tab twice through one chart and
@@ -552,10 +615,13 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
         )}
       </svg>
 
-      {cursor.isSource && point !== null && (
-        <ChartTooltipFloat anchor={cursor.anchor}>
+      {showTooltip && (
+        <ChartTooltipFloat anchor={tooltipAnchor} ariaLive={cursor.isSource}>
           <TooltipHeader
             date={getX(point)}
+            {...(formatHeader !== undefined && {
+              format: (key: string) => formatHeader(key, point),
+            })}
             {...(() => {
               const lbl = tooltipLabel?.(point) ?? null
               return lbl !== null ? { label: lbl.text, labelColor: lbl.color } : {}