@eifi1/ui-kit 0.9.0 → 0.10.0

package/src/components/modal.tsx

@@ -1,4 +1,4 @@
-import { createContext, useRef, useState } from "react";
+import { createContext, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import type {
   ComponentPropsWithoutRef,
@@ -11,7 +11,7 @@ import { cn } from "../lib/cn";
 import { useFocusTrap } from "../hooks/use-focus-trap";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
-import { useCloseTransition } from "../hooks/use-close-transition";
+import { OVERLAY_EXIT_MS, prefersReducedMotion, useCloseTransition } from "../hooks/use-close-transition";
 
 /**
  * Drag the panel by its top strip, in pointer space (dev#460).
@@ -40,6 +40,9 @@ function useDragOffset(enabled: boolean) {
   };
 
   return {
+    /** Back to where the panel opens. A `Modal` with an `open` prop outlives its own
+     *  closes, so "the position resets when the dialog closes" needs saying. */
+    reset: () => setOffset(null),
     style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,
     handlers: !enabled
       ? undefined
@@ -120,6 +123,28 @@ export function useBackdropClose(onClose: () => void) {
 export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
   /** Invoked on backdrop click and on Escape. */
   onClose: () => void;
+  /**
+   * Who decides whether the dialog is up, when the caller wants to keep it MOUNTED.
+   *
+   * Left out, the dialog is open for as long as it is mounted — `{open && <Modal/>}`,
+   * which is every caller before this prop and stays exactly as it was. That idiom has
+   * one blind spot: a close the CALLER decides on (a save that succeeded, a
+   * `setOpen(false)` from outside) unmounts the panel on the spot, with no exit,
+   * because there is nothing left to animate. kastlan's `FormModal` was nothing but an
+   * `if (!open) return null` gate in front of this.
+   *
+   * Passed, the component stays mounted while closed and renders nothing, and a flip
+   * to `false` plays the same exit a dismissal does before the panel goes. The focus
+   * trap, the scroll lock and the Back-gesture history entry are held only while
+   * `open` is true — they are released the moment it turns false, so focus is back on
+   * the trigger while the panel is still lowering. A dismissal (Escape, the backdrop,
+   * Back, the frame's X) animates first and then calls `onClose`; the `false` that
+   * comes back from it is not animated a second time.
+   *
+   * The body is unmounted once the exit has finished, as it is today, so a form inside
+   * still starts fresh on the next open.
+   */
+  open?: boolean;
   /** `"alertdialog"` for a dialog that interrupts to ask a question the user must
    *  answer (a confirmation) — screen readers announce it with more urgency. Only the
    *  two dialog roles are allowed: the panel stays modal either way. */
@@ -183,6 +208,7 @@ export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"
  */
 export function Modal({
   onClose,
+  open,
   children,
   size = "md",
   className,
@@ -196,37 +222,68 @@ export function Modal({
 }: ModalProps) {
   const panelRef = useRef<HTMLDivElement>(null);
   const drag = useDragOffset(Boolean(draggable));
+  // Without `open`, mounted means open — the constant `true` every hook below used to
+  // be given. With it, `open` itself.
+  const active = open ?? true;
+
+  // Whether the last close came through `requestClose`, i.e. has ALREADY been
+  // animated. Set in the same batch as the caller's `onClose`, so the render that sees
+  // `open` turn false also sees this and does not lower the panel a second time.
+  const [dismissed, setDismissed] = useState(false);
+  // The exit of a close the caller decided on (only reachable with `open`). Adjusted
+  // during render when `open` flips — `Collapse`'s pattern — so the very render that
+  // closes it already paints the `-out` classes rather than a frame of nothing.
+  const [exiting, setExiting] = useState(false);
+  const [prevOpen, setPrevOpen] = useState(open);
+  if (open !== prevOpen) {
+    setPrevOpen(open);
+    setDismissed(false);
+    setExiting(open === false && prevOpen === true && !dismissed && !prefersReducedMotion());
+    if (open) drag.reset();
+  }
+  useEffect(() => {
+    if (!exiting) return;
+    const timer = setTimeout(() => setExiting(false), OVERLAY_EXIT_MS);
+    return () => clearTimeout(timer);
+  }, [exiting]);
+
   // The panel lowers itself before the caller unmounts it (live #320 rework). Every
   // dismissal below goes through `requestClose`; `onClose` still does the closing, one
   // animation later. A caller that closes the dialog ITSELF — after a save, say —
-  // unmounts with no exit, which is the documented limit of this.
-  const { closing, requestClose } = useCloseTransition(onClose);
-  const backdropClose = useBackdropClose(requestClose);
+  // unmounts with no exit unless it passes `open`, which is what that prop is for.
+  const { closing, requestClose } = useCloseTransition(() => {
+    setDismissed(true);
+    onClose();
+  });
+  // A panel on its way out after `open` turned false is already closed: a press on
+  // its fading backdrop must not report a second close.
+  const backdropClose = useBackdropClose(active ? requestClose : () => {});
   // Back means the same as Escape here. On a phone Escape doesn't exist, so without
   // this the only way out of a dialog is finding its close button — and Back, the
   // gesture everyone reaches for, navigated the page underneath instead (#172).
-  // Mounted only while open, hence the constant `true`.
-  useOverlayHistory(true, requestClose);
+  // Held only while open: a closed `open={false}` dialog must not own a history entry.
+  useOverlayHistory(active, requestClose);
 
-  // Mounted only while open, hence the constant `true`. Through the shared hook and
-  // not by hand: this component's own save/restore copy was one half of the pair that
-  // left the page permanently unscrollable when a dialog containing an open sheet was
-  // closed — see the note in use-body-scroll-lock.ts.
-  useBodyScrollLock(true);
+  // Through the shared hook and not by hand: this component's own save/restore copy
+  // was one half of the pair that left the page permanently unscrollable when a dialog
+  // containing an open sheet was closed — see the note in use-body-scroll-lock.ts.
+  useBodyScrollLock(active);
 
   // Focus the panel itself (not the first field) so opening doesn't pop the mobile
   // keyboard, while still moving focus into the dialog for keyboard and screen-reader
   // users. Through the shared hook since this component is where it came from — the
   // hook adds per-keystroke recomputation, a guard on restoring to a detached node,
-  // and nesting, none of which this copy had.
-  useFocusTrap(panelRef, { active: true, initialFocus: "container" });
+  // and nesting, none of which this copy had. Released when `open` turns false, which
+  // hands focus back to the trigger while the panel is still on its way out.
+  useFocusTrap(panelRef, { active, initialFocus: "container" });
+  const leaving = closing || exiting;
 
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     onKeyDown?.(e);
     if (e.defaultPrevented) return;
     if (e.key === "Escape") {
       e.stopPropagation();
-      requestClose();
+      if (active) requestClose();
       return;
     }
     // Tab containment lives in useFocusTrap, which listens on the panel itself.
@@ -237,13 +294,19 @@ export function Modal({
   // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the
   // expanded transaction editor (feedback #320). The tour/command-palette overlays
   // already portal for the same reason.
+  if (!active && !exiting) return null;
   return createPortal(
     <div
+      // Out of the accessibility tree for the length of a caller-driven exit: focus is
+      // already back on the page, and an `aria-modal` panel that is leaving would hide
+      // that page from a screen reader for 220ms. Not `inert` — that would let a tap
+      // fall through the fading backdrop to the row underneath.
+      aria-hidden={exiting || undefined}
       className={cn(
         // Live #320. The panel below rises only where it is bottom-anchored: from md up
         // it is centred, and a centred box sliding up from off-screen reads as a
         // different component arriving rather than as the same one settling.
-        closing ? "animate-overlay-out" : "animate-overlay",
+        leaving ? "animate-overlay-out" : "animate-overlay",
         "fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center",
         fullBleed ? "p-0 md:p-4" : "p-4",
       )}
@@ -270,7 +333,7 @@ export function Modal({
         // the ones where the panel is being dragged.
         style={{ ...style, ...drag.style }}
         className={cn(
-          closing ? "animate-sheet-out md:animate-none" : "animate-sheet md:animate-none",
+          leaving ? "animate-sheet-out md:animate-none" : "animate-sheet md:animate-none",
           "w-full rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] shadow-sm outline-none",
           { md: "max-w-md", lg: "max-w-lg", xl: "max-w-3xl" }[size],
           // A panel taller than the screen has to scroll ITSELF. The backdrop is

package/src/components/page-contents.tsx

@@ -176,14 +176,14 @@ export function PageContents({
           <li key={item.id} data-entry={item.id}>
             <a
               href={hrefFor(item.id)}
-              // One line per entry in the rail; past 22rem the ellipsis takes over and
-              // the full text is on hover. The disclosure has the page's width and wraps.
-              title={variant === "rail" && typeof item.label === "string" ? item.label : undefined}
+              // Entries WRAP in the rail rather than truncate: a cut-off heading needed a
+              // native `title` to be read at all, which a keyboard never sees and which
+              // broke keksdose's one-tooltip rule (dev#523).
               aria-current={current ? "location" : undefined}
               onClick={() => setClicked(item.id)}
               className={cn(
                 "-ms-px block border-s-2 py-1 pe-1 text-[13px] leading-snug transition-colors duration-150",
-                variant === "rail" && "truncate",
+                variant === "rail" && "[overflow-wrap:anywhere]",
                 item.level === 2 ? "ps-6" : "ps-3",
                 current
                   ? "border-[var(--brand)] font-medium text-[var(--brand)]"

package/src/components/page-header.tsx

@@ -0,0 +1,68 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { SECTION_LABEL_CLASS } from "./text";
+
+/** `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a
+ *  phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx). */
+export type PageHeaderSize = "sm" | "md";
+
+const TITLE: Record<PageHeaderSize, string> = {
+  sm: "text-lg font-semibold",
+  md: "text-xl font-semibold tracking-tight sm:text-2xl",
+};
+
+export interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+  title: ReactNode;
+  /** A sentence under the title. */
+  description?: ReactNode;
+  /** Buttons for the page — "New", "Export". At the title's end from `sm` up; under it,
+   *  wrapping, on a phone. */
+  actions?: ReactNode;
+  /** A `Breadcrumbs` trail, drawn above everything else. */
+  breadcrumbs?: ReactNode;
+  /** A small uppercase line above the title — the section or the kind of record
+   *  ("Building", "Settings"). The section-label type. */
+  eyebrow?: ReactNode;
+  /** The title's element. Default `h1`: a page has one, and this is it. `h2` for a
+   *  header inside a page that already has its `h1` (a tab's own header). */
+  as?: "h1" | "h2" | "h3";
+  size?: PageHeaderSize;
+}
+
+/**
+ * A page's head: optional breadcrumbs, an eyebrow, the title, a description, and the
+ * page's actions.
+ *
+ * kastlan's (shared/components/display/page-header.tsx) is the model — title and
+ * description on one side, actions on the other, stacked on a phone — and this adds
+ * what its pages kept writing around it: a trail above, an eyebrow, a `ReactNode`
+ * title (a status chip beside the name), and actions that WRAP when there are more
+ * than fit a phone's width, instead of running off it. No outer margin: the page's
+ * own rhythm (`space-y-*`, a grid gap) places it.
+ */
+export function PageHeader({
+  title,
+  description,
+  actions,
+  breadcrumbs,
+  eyebrow,
+  as = "h1",
+  size = "md",
+  className,
+  ...rest
+}: PageHeaderProps) {
+  const Heading = as as ElementType;
+  return (
+    <div {...rest} className={cn("flex min-w-0 flex-col gap-2", className)}>
+      {breadcrumbs}
+      <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
+        <div className="min-w-0 flex-1">
+          {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, "mb-1")}>{eyebrow}</p>}
+          <Heading className={cn("break-words text-[var(--text-primary)]", TITLE[size])}>{title}</Heading>
+          {description != null && <p className="mt-1 text-sm text-[var(--text-muted)]">{description}</p>}
+        </div>
+        {actions != null && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
+      </div>
+    </div>
+  );
+}

package/src/components/series-chart-labels.ts

@@ -15,6 +15,9 @@ export interface SeriesChartLabels {
   empty: string;
   /** Accessible name of a `ToggleLegend` — a group of switches, one per series. */
   legend: string;
+  /** Accessible name of the group of keyboard stops a clickable chart (`onPointClick`)
+   *  lays over its bars or periods — one tab stop, arrow keys between them. */
+  points: string;
 }
 
 export const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels = {
@@ -23,4 +26,5 @@ export const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels = {
     "Drag to zoom: a roughly square selection zooms both axes, a long thin one only its own. Double-click to reset.",
   empty: "No data",
   legend: "Series",
+  points: "Chart values",
 };

package/src/components/series-chart.tsx

@@ -26,8 +26,8 @@
 // "category"`) or real dates (`x.type: "time"`) instead of a number the app had to
 // invent. What each of those does to the zoom is decided in one place,
 // `defaultZoomAxes` in `chart-zoom.tsx`.
-import { useMemo } from "react";
-import type { ReactNode, RefObject } from "react";
+import { useMemo, useRef, useState } from "react";
+import type { KeyboardEvent, ReactNode, RefObject } from "react";
 import {
   Area,
   Bar,
@@ -37,8 +37,12 @@ import {
   Line,
   ReferenceDot,
   ReferenceLine,
+  Rectangle,
   XAxis,
   YAxis,
+  usePlotArea,
+  useXAxisScale,
+  type BarShapeProps,
 } from "recharts";
 import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "./chart";
 import {
@@ -202,6 +206,22 @@ interface SeriesChartAxisShape {
    * a hairline). A pinned `domain` is left alone either way.
    */
   includeZero?: boolean;
+  /**
+   * Tick only on whole numbers — the y counterpart of `SeriesChartX.integerTicks`, and
+   * what keksdose's user-count axis (`metrics-panel.tsx`, `wholeTicks`) and its runway
+   * in days (`cash-buffer-chart.tsx`, `wholeDayTicks`) each wrote by hand: a band of
+   * [0, 3.1] users is ticked 0 1 2 3, not 0 0.5 1 … 3, and a short runway is not ticked
+   * 0 / 0.5 / 1 under a rounding formatter that prints "1" twice. A (zoom) window that
+   * holds no whole number falls back to the ordinary ticks rather than to none.
+   *
+   * AUTOMATIC by default — on when every value this axis carries is a whole number
+   * (counts), because that is where a half tick is a value no sample can have, and it
+   * changes nothing on a span wider than about eight, which already ticks on whole
+   * steps. `true` forces it over fractional data (days of runway computed as 43.7);
+   * `false` keeps fractional ticks for a continuous quantity that merely happens to be
+   * whole in this sample. `tickValues` wins over either.
+   */
+  integerTicks?: boolean;
 }
 
 /**
@@ -818,6 +838,150 @@ const STEP_WIDTH = 1.5;
  *  which recharts cannot tell apart per cell, so stacks stay square. */
 const BAR_RADIUS: [number, number, number, number] = [3, 3, 0, 0];
 
+/**
+ * One keyboard stop of a clickable chart: a bar, or (a chart with no bars) a whole slot.
+ * `from`/`to` bound its slot on the plotted number line — half way to each neighbour,
+ * or to the edge of the window on show.
+ */
+interface PointStop {
+  index: number;
+  /** The bar's series; absent for a slot. */
+  key?: string;
+  from: number;
+  to: number;
+  /** The accessible name: where it is and what it says. */
+  name: string;
+}
+
+/**
+ * The shape of a series whose bar has keyboard focus: recharts' own rectangle, with an
+ * outline on the one bar at `index` — drawn at the bar's exact geometry, which an
+ * overlay could only guess at. Not `activeBar`: that follows the tooltip's active index,
+ * which recharts stops taking from `defaultIndex` once a pointer has hovered the chart.
+ */
+function focusedBarShape(index: number) {
+  return function FocusedBar(props: BarShapeProps) {
+    const focused = props.originalDataIndex === index;
+    return (
+      <Rectangle {...props} {...(focused ? { stroke: "var(--text-primary)", strokeWidth: 2 } : {})} />
+    );
+  };
+}
+
+/**
+ * The keyboard's way onto a clickable chart (`onPointClick`): one focusable `<rect>` per
+ * bar, or per slot when there are no bars, laid over the plot INSIDE the recharts chart,
+ * where the x scale answers.
+ *
+ * keksdose drew its weekday pattern as seven real `<button>`s (spending-tab.tsx) because
+ * a recharts bar is reachable by nothing but the pointer. This is that, for every chart:
+ *
+ * - ONE tab stop (roving `tabIndex`): Tab moves past the chart, not through 30 bars.
+ * - ←/→ step through the stops in order, ↑/↓ between the bars of one slot, Home/End.
+ * - ↵ and Space report the stop as a click would — with the series for a bar.
+ * - Each is a `role="button"` named "period — series: value".
+ *
+ * The stops take NO pointer events, so the drag-to-zoom layer, the tooltip and the
+ * pointer's own clicks underneath behave exactly as they did. Focus is shown by the
+ * slot tinted and, for a bar, its own outline (`focusedBarShape`) — and by the tooltip,
+ * moved to the stop through `defaultIndex`, which recharts honours until a pointer has
+ * hovered the chart.
+ */
+function PointKeys({
+  stops,
+  current,
+  label,
+  onFocusStop,
+  onBlurStops,
+  onPick,
+}: {
+  stops: readonly PointStop[];
+  current: number;
+  label: string;
+  onFocusStop: (at: number) => void;
+  onBlurStops: () => void;
+  onPick: (stop: PointStop) => void;
+}) {
+  const plot = usePlotArea();
+  const scale = useXAxisScale();
+  const refs = useRef<(SVGRectElement | null)[]>([]);
+  if (!plot || !scale || plot.width <= 0 || plot.height <= 0) return null;
+
+  const move = (at: number) => {
+    const next = Math.max(0, Math.min(stops.length - 1, at));
+    refs.current[next]?.focus();
+  };
+  const onKeyDown = (at: number) => (event: KeyboardEvent<SVGRectElement>) => {
+    const stop = stops[at];
+    // ↑/↓ stay in the slot: the next or previous bar of the same period. The stops are
+    // in slot order, so a slot's bars are neighbours.
+    const inSlot = (step: 1 | -1) => (stops[at + step]?.index === stop.index ? at + step : at);
+    const target =
+      event.key === "ArrowRight"
+        ? at + 1
+        : event.key === "ArrowLeft"
+          ? at - 1
+          : event.key === "ArrowDown"
+            ? inSlot(1)
+            : event.key === "ArrowUp"
+              ? inSlot(-1)
+              : event.key === "Home"
+                ? 0
+                : event.key === "End"
+                  ? stops.length - 1
+                  : undefined;
+    if (target !== undefined) {
+      event.preventDefault();
+      move(target);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onPick(stop);
+    }
+  };
+
+  const left = plot.x;
+  const right = plot.x + plot.width;
+  return (
+    <g role="group" aria-label={label}>
+      {stops.map((stop, at) => {
+        // An edge with no neighbour runs to the plot's edge.
+        const a = finite(scale(stop.from)) ?? left;
+        const b = finite(scale(stop.to)) ?? right;
+        const x0 = Math.max(left, Math.min(a, b));
+        const x1 = Math.min(right, Math.max(a, b));
+        return (
+          <rect
+            key={`${stop.index}:${stop.key ?? ""}`}
+            ref={(node) => {
+              refs.current[at] = node;
+            }}
+            role="button"
+            tabIndex={at === current ? 0 : -1}
+            aria-label={stop.name}
+            data-point-key={stop.key}
+            x={x0}
+            y={plot.y}
+            width={Math.max(0, x1 - x0)}
+            height={plot.height}
+            fill="transparent"
+            // Focus only: the pointer's drag, hover and click belong to what is below.
+            pointerEvents="none"
+            strokeWidth={2}
+            className={cn(
+              "outline-none focus-visible:fill-[var(--brand)]/10",
+              // A bar outlines ITSELF (see `FOCUSED_BAR`); a slot has nothing else to.
+              stop.key === undefined && "focus-visible:stroke-[var(--brand)]",
+            )}
+            onFocus={() => onFocusStop(at)}
+            onBlur={onBlurStops}
+            onKeyDown={onKeyDown(at)}
+          />
+        );
+      })}
+    </g>
+  );
+}
+
 interface PlotProps extends Omit<SeriesChartProps, "rows" | "x"> {
   /** The rows AS PLOTTED — what the zoom fits on. The caller's are `model.source`. */
   rows: readonly SeriesChartRow[];
@@ -851,6 +1015,10 @@ function SeriesPlot({
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
   const number = useDefaultFormat(localeProp);
+  // The keyboard stops' roving tab stop, and the one that has focus (see `PointKeys`).
+  // Up here, above the empty state's early return, like every hook.
+  const [keyStop, setKeyStop] = useState(0);
+  const [keyFocus, setKeyFocus] = useState<number | undefined>(undefined);
 
   // A number is pixels, set inline; a string is a class. Either way the one value
   // sizes both the chart and its empty state.
@@ -995,6 +1163,19 @@ function SeriesPlot({
     series.some(
       (entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id && (entry.type ?? "line") !== "line",
     );
+  // Whole-number ticks on an axis whose values are all whole — see
+  // `SeriesChartAxis.integerTicks`. A stack of whole layers sums to a whole number, so
+  // the layers are enough to look at.
+  const wholeOnly = (axis: SeriesChartAxis) =>
+    axis.integerTicks ??
+    series
+      .filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id)
+      .every((entry) =>
+        plotted.every((row) => {
+          const value = finite(row[entry.key]);
+          return value === undefined || Number.isInteger(value);
+        }),
+      );
   const onAxis = (axisId: string) => (ref: { axis?: string }) => (ref.axis ?? DEFAULT_Y_AXIS) === axisId;
   const fittedY = (axis: SeriesChartAxis): [number, number] | undefined => {
     const own = [
@@ -1024,6 +1205,48 @@ function SeriesPlot({
     return row ? { index, row, x: xOf(index), key } : undefined;
   };
 
+  // The keyboard stops of a clickable chart — every bar with a value, slot by slot; or,
+  // with no bars, every slot with any value. Only what is inside the window on show.
+  const stops: PointStop[] = [];
+  if (onPointClick) {
+    const valueText = valueFormat ?? number;
+    const nameOf = (entry: SeriesChartSeries) =>
+      typeof entry.label === "string" || typeof entry.label === "number" ? String(entry.label) : entry.key;
+    const said = (entry: SeriesChartSeries, value: number) => {
+      const name = nameOf(entry);
+      return name ? `${name}: ${valueText(value)}` : valueText(value);
+    };
+    const bars = series.filter((entry) => entry.type === "bar");
+    const [low, high] = fittedX ?? [-Infinity, Infinity];
+    const placed = plotted
+      .map((row, index) => ({ index, at: model.kind === "category" ? index : finite(row[xKey]) }))
+      .filter((slot): slot is { index: number; at: number } => slot.at !== undefined && slot.at >= low && slot.at <= high)
+      .sort((a, b) => a.at - b.at);
+    placed.forEach(({ index, at }, k) => {
+      const from = k > 0 ? (placed[k - 1].at + at) / 2 : low;
+      const to = k < placed.length - 1 ? (placed[k + 1].at + at) / 2 : high;
+      // The heading the tooltip would give it, when that is text; else the tick.
+      const heading = xLabel(at);
+      const where = typeof heading === "string" && heading ? heading : xFormat(at);
+      const valued = (bars.length ? bars : series)
+        .map((entry) => ({ entry, value: finite(rows[index]?.[entry.key]) }))
+        .filter((cell): cell is { entry: SeriesChartSeries; value: number } => cell.value !== undefined);
+      if (bars.length) {
+        for (const { entry, value } of valued) {
+          stops.push({ index, key: entry.key, from, to, name: `${where} — ${said(entry, value)}` });
+        }
+      } else if (valued.length) {
+        stops.push({
+          index,
+          from,
+          to,
+          name: `${where} — ${valued.map(({ entry, value }) => said(entry, value)).join(", ")}`,
+        });
+      }
+    });
+  }
+  const focusedStop = keyFocus === undefined ? undefined : stops[keyFocus];
+
   const dotFor = (entry: SeriesChartSeries) => {
     const want = entry.dot;
     if (!want) return false;
@@ -1080,6 +1303,9 @@ function SeriesPlot({
         // Positive and negative layers stacked apart, as `axisExtent` fits them — a
         // month's expenses hang below the axis instead of eating into its income.
         stackOffset="sign"
+        // recharts' own keyboard layer makes the whole surface a tab stop whose arrows
+        // move the tooltip — a second stop beside `PointKeys`, and one ↵ does nothing on.
+        accessibilityLayer={!onPointClick}
         onClick={
           onPointClick
             ? (state) => {
@@ -1136,7 +1362,10 @@ function SeriesPlot({
               yAxisId={axis.id}
               hide={axis.hide}
               domain={domain}
-              ticks={resolveTicks(axis.tickValues, domain, finite) ?? niceTicks(domain)}
+              ticks={
+                resolveTicks(axis.tickValues, domain, finite) ??
+                (wholeOnly(axis) ? (integerTicks(domain) ?? niceTicks(domain)) : niceTicks(domain))
+              }
               allowDataOverflow={zoomed}
               orientation={axis.orientation ?? "left"}
               width={axisBandWidth(axis.width, Boolean(axis.title) && !axis.hide)}
@@ -1170,6 +1399,8 @@ function SeriesPlot({
           // The content shifts itself 12 px off the cursor (or flips) against the
           // boundary; recharts' own offset on top would double it.
           {...(tooltip?.boundary ? { offset: 0 } : {})}
+          // The keyboard's stop shows its tooltip as the pointer's would.
+          defaultIndex={focusedStop?.index}
           content={
             <ChartTooltipContent
               labelFormatter={(value) => xLabel(Number(value))}
@@ -1196,6 +1427,9 @@ function SeriesPlot({
                 fill={color}
                 fillOpacity={entry.fillOpacity}
                 radius={entry.stack === undefined ? BAR_RADIUS : 0}
+                // Only the focused stop's series swaps its shape, and only for as long
+                // as it has focus: every other bar keeps recharts' own.
+                {...(focusedStop?.key === entry.key ? { shape: focusedBarShape(focusedStop.index) } : {})}
                 onClick={
                   onPointClick
                     ? (_bar, index, event) => {
@@ -1320,6 +1554,22 @@ function SeriesPlot({
             />
           );
         })}
+        {stops.length > 0 && (
+          <PointKeys
+            stops={stops}
+            current={Math.min(keyStop, stops.length - 1)}
+            label={labels.points}
+            onFocusStop={(at) => {
+              setKeyStop(at);
+              setKeyFocus(at);
+            }}
+            onBlurStops={() => setKeyFocus(undefined)}
+            onPick={(stop) => {
+              const hit = hitAt(stop.index, stop.key);
+              if (hit) onPointClick?.(hit);
+            }}
+          />
+        )}
         {zoom?.layer}
       </ComposedChart>
     </ChartContainer>