@multiplatform.one/components 6.7.0 → 7.1.0

package/src/layouts/breadcrumbs.tsx

@@ -1,24 +1,31 @@
 /**
- * Breadcrumbs - Navigation breadcrumbs.
+ * Breadcrumbs — wayfinding trail (Polaris / Primer / GOV.UK).
  *
- * Renders a horizontal trail of clickable navigation items
- * separated by "/" dividers. The last item is rendered as
- * non-clickable bold text (current page).
+ * Landmark `<nav>` + ordered list; last crumb is the current page
+ * (`aria-current="page"`, not a link). Separators stay the RTL-neutral `/`.
+ * LC-71: keyboard ring on each link (and the overflow control), never the
+ * trail container. LC-03 / LC-35: tight chromeless trail.
  */
 
 import {
   MIN_PRESS_TARGET,
+  ensureFocusVisibleRing,
   pressTargetHitSlop,
   useAccentOnSurface,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import React from "react";
-import { Anchor, Text, XStack } from "tamagui";
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Anchor, Text, XStack, isWeb } from "tamagui";
 import { componentColors } from "../componentColors";
+import { withInterp } from "../shared/t";
 
 /** Approx medium body line box before press-target padding (DG-LAY-04). */
 const CRUMB_LINE_PX = 24;
 
+const RING = ensureFocusVisibleRing();
+const webListReset = isWeb ? { style: { listStyle: "none" as const } } : null;
+
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -31,18 +38,79 @@ export interface BreadcrumbItem {
 export interface BreadcrumbsProps {
   items: BreadcrumbItem[];
   onNavigate?: (href: string) => void;
+  /** Landmark name. Defaults to "Breadcrumb" (GOV.UK / WAI-ARIA APG). */
+  label?: string;
+  /**
+   * Collapse middle crumbs into a "…" control when the trail is longer
+   * (Polaris / Primer overflow menu; GOV.UK collapse-on-mobile). Unset = wrap.
+   */
+  maxVisible?: number;
+}
+
+type CrumbSlot =
+  | { kind: "item"; item: BreadcrumbItem; index: number; isCurrent: boolean }
+  | { kind: "overflow"; hidden: { item: BreadcrumbItem; index: number }[] };
+
+function collapseSlots(
+  items: BreadcrumbItem[],
+  maxVisible: number | undefined,
+  expanded: boolean,
+): CrumbSlot[] {
+  const asItems = (): CrumbSlot[] =>
+    items.map((item, index) => ({
+      kind: "item" as const,
+      item,
+      index,
+      isCurrent: index === items.length - 1,
+    }));
+
+  if (!maxVisible || expanded || items.length <= maxVisible) return asItems();
+
+  const tailCount = Math.max(1, maxVisible - 2);
+  const hiddenStart = 1;
+  const hiddenEnd = items.length - tailCount;
+  if (hiddenEnd <= hiddenStart) return asItems();
+
+  const slots: CrumbSlot[] = [
+    { kind: "item", item: items[0], index: 0, isCurrent: false },
+    {
+      kind: "overflow",
+      hidden: items.slice(hiddenStart, hiddenEnd).map((item, offset) => ({
+        item,
+        index: hiddenStart + offset,
+      })),
+    },
+  ];
+  for (let i = hiddenEnd; i < items.length; i++) {
+    slots.push({
+      kind: "item",
+      item: items[i],
+      index: i,
+      isCurrent: i === items.length - 1,
+    });
+  }
+  return slots;
 }
 
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
 
-export function Breadcrumbs({ items, onNavigate }: BreadcrumbsProps) {
-  const { knobProps } = useResolvedKnobs();
+export function Breadcrumbs({ items, onNavigate, label, maxVisible }: BreadcrumbsProps) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs({ component: "Breadcrumbs" });
   // UX-P04 / Axiom 12: crumb links are accent-hued text on the PAGE, so they
   // need the page-readable accent — `$accentColor` (the on-fill foreground)
   // measured 1.94:1 as a dark-scheme link on the page.
   const linkColor = useAccentOnSurface();
+  const [expanded, setExpanded] = useState(false);
+  const landmark = label ?? t("Breadcrumb");
+
+  const slots = useMemo(
+    () => collapseSlots(items, maxVisible, expanded),
+    [items, maxVisible, expanded],
+  );
+
   if (items.length === 0) return null;
 
   const sz = knobProps.sizeToken;
@@ -55,76 +123,146 @@ export function Breadcrumbs({ items, onNavigate }: BreadcrumbsProps) {
   const spaceGap = knobProps.gap.gap;
   const trailGap =
     spaceGap === "$2" ? ("$1" as const) : spaceGap === "$5" ? ("$2" as const) : ("$1.5" as const);
-  // Vertical pad only (theme-propagation SP-FIXED / DG-LAY-04): grow the
-  // clickable box to ≥44 without horizontal width that would re-spread the trail.
+  // Vertical pad only (theme-propagation SP-FIXED / DG-LAY-04 / LC-03): grow
+  // the clickable box to ≥44 without horizontal padding that would re-spread
+  // the trail. No minWidth floor — the ring must hug the link, not a 44px well.
   const crumbPadY = Math.max(0, Math.ceil((MIN_PRESS_TARGET - CRUMB_LINE_PX) / 2));
+  const crumbRadius = knobProps.borderRadius.borderRadius;
+
+  const interactiveCrumb = {
+    color: linkColor,
+    cursor: "pointer" as const,
+    fontSize: textSize,
+    // Crumbs are R-SCALE: the interactive surface (focus ring) rounds with
+    // the radius knob. Chromeless trail keeps no border.
+    borderRadius: crumbRadius,
+    paddingVertical: crumbPadY,
+    marginVertical: -crumbPadY,
+    minHeight: MIN_PRESS_TARGET,
+    justifyContent: "center" as const,
+    alignItems: "center" as const,
+    hitSlop: pressTargetHitSlop(CRUMB_LINE_PX),
+    textDecorationLine: "none" as const,
+    hoverStyle: { textDecorationLine: "underline" as const },
+    pressStyle: { opacity: 0.7 },
+    // LC-71: rest + pointer-origin focus paint no ring. Keyboard ring lives
+    // on THIS node (the perceived link), never the nav/ol container.
+    outlineWidth: 0,
+    focusStyle: { outlineWidth: 0 },
+    focusVisibleStyle: RING,
+  };
+
+  const navigate = (href: string | undefined, event?: { preventDefault?: () => void }) => {
+    event?.preventDefault?.();
+    if (href) onNavigate?.(href);
+  };
+
+  const trail = (
+    <XStack
+      role="list"
+      {...webListReset}
+      padding={0}
+      margin={0}
+      gap={trailGap}
+      alignItems="center"
+      flexWrap="wrap"
+      outlineWidth={0}
+    >
+      {slots.map((slot, slotIndex) => {
+        const isLastSlot = slotIndex === slots.length - 1;
+        return (
+          <XStack
+            key={slot.kind === "item" ? `${slot.item.label}-${slot.index}` : "overflow"}
+            role="listitem"
+            {...webListReset}
+            padding={0}
+            margin={0}
+            gap={trailGap}
+            alignItems="center"
+            outlineWidth={0}
+          >
+            {slot.kind === "overflow" ? (
+              <XStack
+                role="button"
+                tabIndex={0}
+                aria-label={withInterp(t("Show {{count}} more pages"), {
+                  count: slot.hidden.length,
+                })}
+                // interactiveCrumb is link-text styling (shared with the Anchor
+                // crumb below). Its hoverStyle underline is a text effect; on
+                // web this XStack is a div, so the hover text-decoration reaches
+                // the inner "…" Text via inheritance. The RN-flavored Stack type
+                // rejects the text hoverStyle, so route it through the house cast.
+                {...(interactiveCrumb as Record<string, unknown>)}
+                backgroundColor="transparent"
+                borderWidth={0}
+                paddingHorizontal={0}
+                onPress={() => setExpanded(true)}
+                onKeyDown={
+                  ((e: React.KeyboardEvent) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      setExpanded(true);
+                    }
+                  }) as unknown as () => void
+                }
+              >
+                <Text color={linkColor} fontSize={textSize} userSelect="none">
+                  …
+                </Text>
+              </XStack>
+            ) : slot.item.href && !slot.isCurrent ? (
+              <Anchor
+                {...interactiveCrumb}
+                href={slot.item.href}
+                onPress={(e) => navigate(slot.item.href, e)}
+                onKeyDown={
+                  ((e: React.KeyboardEvent) => {
+                    if (e.key === " ") navigate(slot.item.href, e);
+                  }) as unknown as () => void
+                }
+              >
+                {slot.item.label}
+              </Anchor>
+            ) : (
+              <Text
+                color={componentColors.text.muted}
+                fontSize={textSize}
+                fontWeight={slot.isCurrent ? "600" : "400"}
+                {...(slot.isCurrent ? { "aria-current": "page" as const } : null)}
+              >
+                {slot.item.label}
+              </Text>
+            )}
+            {!isLastSlot && (
+              <Text color={componentColors.text.subtle} fontSize={separatorSize} userSelect="none">
+                /
+              </Text>
+            )}
+          </XStack>
+        );
+      })}
+    </XStack>
+  );
 
+  // Intrinsic <nav> on web (Tamagui `tag` stays an attribute on RN-web).
+  // LC-71: the landmark is not a control — no tabIndex, no focusWithin ring.
+  if (isWeb) {
+    return (
+      <nav aria-label={landmark} data-testid="breadcrumbs">
+        {trail}
+      </nav>
+    );
+  }
   return (
-    // Wayfinding is chromeless flush text (DF-20 / Axiom 14 LAYER ROLE):
-    // no border/radius/panel padding — a bordered box would claim the
-    // surface tier of a card or input, which a trail has not earned. The
-    // page column owns the alignment line; the trail sits on it.
-    <XStack gap={trailGap} alignItems="center" flexWrap="wrap">
-      {items.map((item, i) => (
-        <React.Fragment key={`${item.label}-${i}`}>
-          {i > 0 && (
-            <Text color={componentColors.text.subtle} fontSize={separatorSize} userSelect="none">
-              /
-            </Text>
-          )}
-          {item.href && i < items.length - 1 ? (
-            <Anchor
-              color={linkColor}
-              cursor="pointer"
-              fontSize={textSize}
-              // Crumbs are R-SCALE (spec Breadcrumbs): the interactive
-              // crumb surface (focus ring / hover box) rounds with the
-              // radius knob. Chromeless trail keeps no border, so only the
-              // scale radius applies — not the bordered fragment.
-              borderRadius={knobProps.borderRadius.borderRadius}
-              paddingVertical={crumbPadY}
-              marginVertical={-crumbPadY}
-              // Short labels (e.g. "Home") need a width floor too; long crumbs
-              // already exceed 44. No extra horizontal padding — that would
-              // re-spread the trail (theme-propagation breadcrumbs invariant).
-              minWidth={MIN_PRESS_TARGET}
-              minHeight={MIN_PRESS_TARGET}
-              justifyContent="center"
-              hitSlop={pressTargetHitSlop(CRUMB_LINE_PX)}
-              href={item.href}
-              textDecorationLine="none"
-              hoverStyle={{ textDecorationLine: "underline" }}
-              focusVisibleStyle={{
-                outlineColor: "$outlineColor",
-                outlineWidth: 2,
-                outlineStyle: "solid",
-              }}
-              onPress={(e) => {
-                e.preventDefault();
-                if (item.href) onNavigate?.(item.href);
-              }}
-              onKeyDown={
-                ((e: React.KeyboardEvent) => {
-                  if (e.key === " ") {
-                    e.preventDefault();
-                    if (item.href) onNavigate?.(item.href);
-                  }
-                }) as unknown as () => void
-              }
-            >
-              {item.label}
-            </Anchor>
-          ) : (
-            <Text
-              color={componentColors.text.muted}
-              fontSize={textSize}
-              fontWeight={i === items.length - 1 ? "600" : "400"}
-            >
-              {item.label}
-            </Text>
-          )}
-        </React.Fragment>
-      ))}
+    <XStack
+      aria-label={landmark}
+      alignItems="center"
+      flexWrap="wrap"
+      outlineWidth={0}
+      data-testid="breadcrumbs"
+    >
+      {trail}
     </XStack>
   );
 }

package/src/layouts/layouts.spec.tsx

@@ -1,5 +1,6 @@
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Button } from "@multiplatform.one/forms";
 import {
   createThemesBuilder,
   defaultAccentTheme,
@@ -158,6 +159,37 @@ describe("Toolbar", () => {
     expect(screen.getByText("Delete")).toBeInTheDocument();
   });
 
+  it("LC-78: the Surface host clamps toolbar buttons to the small recipe", () => {
+    // jsdom cannot cascade Tamagui class CSS — measure via atomic classes
+    // (tags-trigger.spec idiom). The toolbar button's height class must
+    // match a bare size="$3" Button and differ from the ambient default.
+    const classesByPrefix = (el: Element, prefix: string) =>
+      String((el as HTMLElement).className || "")
+        .split(" ")
+        .filter((c) => c.startsWith(prefix))
+        .sort();
+    const frameOf = (label: HTMLElement) => {
+      let el: HTMLElement | null = label.parentElement;
+      for (let i = 0; i < 8 && el; i++) {
+        if (classesByPrefix(el, "_h-").length > 0) return el;
+        el = el.parentElement;
+      }
+      throw new Error("button frame not found");
+    };
+    renderWithProviders(
+      <>
+        <Toolbar primaryActions={[{ label: "Save", onPress: () => {} }]} />
+        <Button size="$3">Small</Button>
+        <Button size="$4">Medium</Button>
+      </>,
+    );
+    const toolbarBtn = frameOf(screen.getByText("Save"));
+    const small = frameOf(screen.getByText("Small"));
+    const medium = frameOf(screen.getByText("Medium"));
+    expect(classesByPrefix(toolbarBtn, "_h-")).toEqual(classesByPrefix(small, "_h-"));
+    expect(classesByPrefix(toolbarBtn, "_h-")).not.toEqual(classesByPrefix(medium, "_h-"));
+  });
+
   it("fuses consecutive fused actions into a segmented cluster", () => {
     const { container } = renderWithProviders(
       <Toolbar