@multiplatform.one/components 7.7.4 → 7.8.0

package/src/Toast/index.tsx

@@ -52,6 +52,7 @@ import {
 } from "@tamagui/toast";
 import { useEffect, useId, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from "react";
 import type { CSSProperties, ReactNode } from "react";
+import { AccessibilityInfo } from "react-native";
 import { useTranslation } from "../shared/i18n";
 import {
   SizableText,
@@ -221,6 +222,9 @@ function paintToastFrame(
   attrs: { size: string; density: string; nestedPx: number; edgeColor?: string },
 ) {
   if (!node) return;
+  // Native host refs are not HTMLElements. Native already binds testID /
+  // data-* via dataAttrs and the intent edge via borderStartWidth.
+  if (typeof node.setAttribute !== "function") return;
   node.setAttribute("data-testid", "toast");
   node.setAttribute("data-size", attrs.size);
   node.setAttribute("data-density", attrs.density);
@@ -230,6 +234,42 @@ function paintToastFrame(
   if (attrs.edgeColor) node.style.borderInlineStartColor = attrs.edgeColor;
 }
 
+/**
+ * Spoken confirm. Tamagui's ToastAnnounce portal is web-only
+ * (`announceTextContent` is null off-web in ToastImpl), so native VoiceOver
+ * never heard CopyField's "Copied to clipboard." Put the title on the
+ * frame and announce it the same way field errors do.
+ */
+function spokenToastText(title: ReactNode, description?: ReactNode): string | undefined {
+  const chunks: string[] = [];
+  if (typeof title === "string" && title.trim()) chunks.push(title.trim());
+  if (typeof description === "string" && description.trim()) chunks.push(description.trim());
+  return chunks.length ? chunks.join(". ") : undefined;
+}
+
+function useAnnounceToast(text: string | undefined) {
+  useEffect(() => {
+    if (isWeb || !text) return;
+    AccessibilityInfo.announceForAccessibility(text);
+  }, [text]);
+}
+
+export function nativeToastA11y(text: string | undefined, hasControls: boolean, web = isWeb) {
+  if (web) return {};
+  // ToastImplFrame defaults to tabIndex:0, which Tamagui maps to accessible.
+  // Explicit false keeps native controls from disappearing inside that group.
+  if (!text || hasControls) return { accessible: false as const };
+  return {
+    accessible: true as const,
+    accessibilityLabel: text,
+  };
+}
+
+/** Native View controls need accessible as well as their button role and label. */
+export function nativeToastControlA11y(web = isWeb) {
+  return web ? {} : { accessible: true as const };
+}
+
 // Grown transparent press target. Stays UNPAINTED — LC-71 ring lives on the
 // inner pill via `.mp-chip-dismiss:focus-visible .mp-chip-dismiss-ring`.
 const ToastActionTarget = styled(View, {
@@ -423,7 +463,15 @@ function ToastBody({
   }
   return (
     <>
-      <View flexShrink={0} height={iconPx} justifyContent="center" marginTop={1}>
+      <View
+        flexShrink={0}
+        height={iconPx}
+        justifyContent="center"
+        marginTop={1}
+        accessible={false}
+        accessibilityElementsHidden
+        importantForAccessibility="no"
+      >
         <Icon size={iconPx} weight="fill" color={iconColor} />
       </View>
       <YStack flexGrow={1} flexShrink={1} gap="$1" minWidth={0} justifyContent="center">
@@ -512,6 +560,8 @@ function ToastInner({
     edgeColor,
   } = useToastVisuals(intent, compact);
   const showClose = dismissible ?? onDismiss != null;
+  const spoken = spokenToastText(title, description);
+  useAnnounceToast(spoken);
   const frameRef = useRef<HTMLElement | null>(null);
   useLayoutEffect(() => {
     paintToastFrame(frameRef.current, {
@@ -527,8 +577,15 @@ function ToastInner({
       : undefined;
   return (
     <XStack
-      role="status"
-      aria-live="polite"
+      {...(isWeb
+        ? {
+            role: "status" as const,
+            "aria-live": "polite" as const,
+            "aria-atomic": true,
+            "aria-label": spoken,
+          }
+        : {})}
+      {...nativeToastA11y(spoken, action != null || showClose)}
       className="mp-toast"
       transition={knobProps.transition}
       {...frameProps}
@@ -550,6 +607,7 @@ function ToastInner({
       />
       {action && (
         <ToastActionTarget
+          {...nativeToastControlA11y()}
           className="mp-chip-dismiss"
           {...toastActionPressProps(nestedPx)}
           aria-label={action.altText ?? action.label}
@@ -571,6 +629,7 @@ function ToastInner({
       )}
       {showClose && (
         <ToastCloseTarget
+          {...nativeToastControlA11y()}
           className="mp-chip-dismiss"
           aria-label={t("Dismiss notification")}
           alignSelf={description ? "flex-start" : "center"}
@@ -628,6 +687,8 @@ function ToastItemInner({ entry, isTop, compact }: ToastItemProps) {
   // Store-resolved policy: 0 = sticky/persistent (never auto-expires).
   const duration = entry.duration === 0 ? Number.POSITIVE_INFINITY : entry.duration;
   const assertive = entry.intent === "error" || entry.intent === "warning";
+  const spoken = spokenToastText(entry.title, entry.description);
+  useAnnounceToast(entry.open ? spoken : undefined);
   const frameRef = useRef<HTMLElement | null>(null);
   useLayoutEffect(() => {
     paintToastFrame(frameRef.current, {
@@ -645,6 +706,8 @@ function ToastItemInner({ entry, isTop, compact }: ToastItemProps) {
       }}
       duration={duration}
       type={assertive ? "foreground" : "background"}
+      {...(isWeb ? { "aria-label": spoken } : {})}
+      {...nativeToastA11y(spoken, entry.action != null || entry.dismissible)}
       className="mp-toast"
       transition={knobProps.transition}
       enterStyle={enterExit}
@@ -668,6 +731,7 @@ function ToastItemInner({ entry, isTop, compact }: ToastItemProps) {
       {entry.action && (
         <TamaguiToast.Action altText={entry.action.altText ?? entry.action.label} asChild>
           <ToastActionTarget
+            {...nativeToastControlA11y()}
             className="mp-chip-dismiss"
             {...toastActionPressProps(nestedPx)}
             // Toast.Action defaults to aria-label "Close"; announce the action.
@@ -692,6 +756,7 @@ function ToastItemInner({ entry, isTop, compact }: ToastItemProps) {
       {entry.dismissible && (
         <TamaguiToast.Close asChild>
           <ToastCloseTarget
+            {...nativeToastControlA11y()}
             className="mp-chip-dismiss"
             aria-label={t("Dismiss notification")}
             {...toastClosePressProps(entry.action != null, closeVisual)}

package/src/Unspaced.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Text, YStack } from "tamagui";
-import { Unspaced } from "./tamagui";
+import { Text } from "./Text";
+import { Unspaced, YStack } from "./tamagui";
 
 const meta: Meta<typeof Unspaced> = {
   title: "Components/Unspaced",

package/src/VisuallyHidden.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Text, YStack } from "tamagui";
-import { VisuallyHidden } from "./tamagui";
+import { Text } from "./Text";
+import { VisuallyHidden, YStack } from "./tamagui";
 
 const meta: Meta<typeof VisuallyHidden> = {
   title: "Components/VisuallyHidden",

package/src/actions/DestructiveAction.spec.tsx

@@ -2,6 +2,8 @@
  * @vitest-environment jsdom
  */
 
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
 import { fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -252,7 +254,7 @@ describe("DestructiveAction", () => {
     await waitFor(() => expect(onAction).toHaveBeenCalledTimes(1));
   });
 
-  it("typed-confirm input border uses theme tokens, not #ccc", async () => {
+  it("typed-confirm field is a Tamagui Input (native-safe), not a raw HTML input with #ccc", async () => {
     renderWithProviders(
       <DestructiveAction
         severity="high"
@@ -264,8 +266,22 @@ describe("DestructiveAction", () => {
     );
     fireEvent.click(screen.getByText("Delete project"));
     await waitFor(() => expect(alertdialog()).toBeTruthy());
-    const input = alertdialog()?.querySelector("input") as HTMLInputElement;
+    const marked = alertdialog()?.querySelector("[data-mp-confirm-expected]");
+    expect(marked).toBeTruthy();
+    const input =
+      marked instanceof HTMLInputElement
+        ? marked
+        : (marked?.querySelector("input") as HTMLInputElement | null);
     expect(input).toBeTruthy();
-    expect(input.getAttribute("style") ?? input.style.cssText).not.toMatch(/#ccc/i);
+    expect(input!.getAttribute("style") ?? input!.style.cssText).not.toMatch(/#ccc/i);
+    expect(alertdialog()?.querySelector("[data-mp-confirm-prompt]")?.textContent).toContain(
+      'Type "my-project" to confirm.',
+    );
+  });
+
+  it("typed-confirm TSX has no HTML span/input hosts (MPO-165)", () => {
+    const src = readFileSync(resolve(process.cwd(), "src/actions/DestructiveAction.tsx"), "utf8");
+    expect(src).not.toMatch(/<span[\s>]/);
+    expect(src).not.toMatch(/<input[\s>]/);
   });
 });

package/src/actions/DestructiveAction.tsx

@@ -8,7 +8,7 @@
 import { Button, formatActionLabel, type ButtonProps } from "@multiplatform.one/forms";
 import { useCallback, useState, type ReactNode } from "react";
 import { useTranslation } from "../shared/i18n";
-import { Paragraph, YStack } from "tamagui";
+import { Input, Paragraph, YStack } from "tamagui";
 import { ConfirmDialog } from "../feedback/ConfirmDialog";
 import { withInterp } from "../shared/t";
 import {
@@ -211,24 +211,19 @@ export function DestructiveAction({
     dialogCtx.expectedText != null ? (
       <YStack gap="$3">
         {consequence ? <Paragraph size="$3">{consequence}</Paragraph> : null}
-        <span data-mp-confirm-prompt="">{typedPrompt}</span>
-        <input
+        <Paragraph size="$3" data-mp-confirm-prompt="">
+          {typedPrompt}
+        </Paragraph>
+        <Input
           value={typedText}
-          onChange={(e) => setTypedText(e.target.value)}
+          onChangeText={setTypedText}
           placeholder={dialogCtx.expectedText}
           autoCapitalize="none"
-          autoCorrect="off"
+          autoCorrect={false}
           spellCheck={false}
           data-mp-confirm-expected=""
-          style={{
-            width: "100%",
-            padding: "8px 12px",
-            borderRadius: 8,
-            border: "1px solid var(--borderColor, var(--c-color6, currentColor))",
-            background: "var(--background, transparent)",
-            color: "inherit",
-            font: "inherit",
-          }}
+          accessibilityLabel={typedPrompt ?? undefined}
+          width="100%"
         />
       </YStack>
     ) : (

package/src/charts/Axis.tsx

@@ -1,6 +1,6 @@
 import type { ScaleBand, ScaleLinear, ScalePoint } from "d3-scale";
 import { formatAxisTick, getLinearTicks, truncateLabel } from "./math";
-import { G, Line, SvgText } from "./svg";
+import { G, Line, SvgText, chartChromeProps } from "./svg";
 import type { PlotArea } from "./types";
 import { useChartTheme } from "./useChartTheme";
 
@@ -47,6 +47,7 @@ export function XAxis({
     <G>
       {showLine ? (
         <Line
+          {...chartChromeProps("axis")}
           x1={plot.x}
           y1={y}
           x2={plot.x + plot.width}
@@ -64,6 +65,7 @@ export function XAxis({
           <G key={`${value}-${index}`}>
             {showTicks ? (
               <Line
+                {...chartChromeProps("axis")}
                 x1={center}
                 y1={y}
                 x2={center}
@@ -130,6 +132,7 @@ export function YAxis({
     <G>
       {showLine ? (
         <Line
+          {...chartChromeProps("axis")}
           x1={plot.x}
           y1={plot.y}
           x2={plot.x}
@@ -144,6 +147,7 @@ export function YAxis({
           <G key={`${value}-${index}`}>
             {showGrid ? (
               <Line
+                {...chartChromeProps("grid")}
                 x1={plot.x}
                 y1={y}
                 x2={plot.x + plot.width}
@@ -154,6 +158,7 @@ export function YAxis({
             ) : null}
             {showTicks ? (
               <Line
+                {...chartChromeProps("axis")}
                 x1={plot.x - TICK_LENGTH}
                 y1={y}
                 x2={plot.x}

package/src/charts/BarChart.tsx

@@ -1,8 +1,9 @@
 import { useTranslation } from "../shared/i18n";
 import type { YStackProps } from "tamagui";
 import { XAxis, YAxis } from "./Axis";
+import { ChartDataFrame } from "./ChartDataView";
 import { ChartSurface } from "./ChartSurface";
-import { describeChart, describeDatum } from "./accessibility";
+import { chartDatumText, describeChart, describeDatum } from "./accessibility";
 import { computeCartesianPlot, resolveSeriesFills, thinCategories } from "./composeChart";
 import {
   createBandScale,
@@ -83,73 +84,87 @@ export function BarChart({
   const interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
 
   return (
-    <ChartSurface label={ariaLabel} height={height} width={width} {...stackProps}>
-      {(size) => {
-        const domain = domainProp ?? valueDomain(data.map((datum) => datum.value));
-        // Explicit domains stay literal (nice: false) so a shared 0–255
-        // scale does not drift to 0–260. Auto domains still nice for ticks.
-        const nice = domainProp ? false : undefined;
-        // Ticks come from the domain alone, so the margin scale needs no
-        // meaningful range yet — the plot rectangle depends on label widths.
-        const marginScale = createLinearScale({ domain, range: [0, 1], nice });
-        const tickValues = getLinearTicks(marginScale, yTicks);
-        const plot = computeCartesianPlot(size, {
-          showXAxis,
-          showYAxis,
-          yTickLabels: tickValues.map((value) => format(value)),
-          fontSize: labelFontSize,
-        });
-        if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
-        const xScale = createBandScale({
-          domain: data.map((datum) => datum.label),
-          range: [plot.x, plot.x + plot.width],
-        });
-        const yScale = createLinearScale({
-          domain,
-          range: [plot.y + plot.height, plot.y],
-          nice,
-        });
-        return (
-          <>
-            {showYAxis || showGrid ? (
-              <YAxis
+    <ChartDataFrame data={data} title={title} valueFormatter={valueFormatter} width={width}>
+      <ChartSurface
+        label={ariaLabel}
+        proof={{
+          kind: "bar",
+          separated: true,
+          datumText: false,
+          datumValues: chartDatumText(data, valueFormatter),
+          datumCount: data.length,
+        }}
+        height={height}
+        width={width}
+        {...stackProps}
+      >
+        {(size) => {
+          const domain = domainProp ?? valueDomain(data.map((datum) => datum.value));
+          // Explicit domains stay literal (nice: false) so a shared 0–255
+          // scale does not drift to 0–260. Auto domains still nice for ticks.
+          const nice = domainProp ? false : undefined;
+          // Ticks come from the domain alone, so the margin scale needs no
+          // meaningful range yet — the plot rectangle depends on label widths.
+          const marginScale = createLinearScale({ domain, range: [0, 1], nice });
+          const tickValues = getLinearTicks(marginScale, yTicks);
+          const plot = computeCartesianPlot(size, {
+            showXAxis,
+            showYAxis,
+            yTickLabels: tickValues.map((value) => format(value)),
+            fontSize: labelFontSize,
+          });
+          if (plot.width <= 0 || plot.height <= 0 || data.length === 0) return null;
+          const xScale = createBandScale({
+            domain: data.map((datum) => datum.label),
+            range: [plot.x, plot.x + plot.width],
+          });
+          const yScale = createLinearScale({
+            domain,
+            range: [plot.y + plot.height, plot.y],
+            nice,
+          });
+          return (
+            <>
+              {showYAxis || showGrid ? (
+                <YAxis
+                  plot={plot}
+                  scale={yScale}
+                  ticks={yTicks}
+                  tickFormat={(value) => format(value)}
+                  showLabels={showYAxis}
+                  showGrid={showGrid}
+                />
+              ) : null}
+              <BarSeries
+                data={data}
+                xScale={xScale}
+                yScale={yScale}
                 plot={plot}
-                scale={yScale}
-                ticks={yTicks}
-                tickFormat={(value) => format(value)}
-                showLabels={showYAxis}
-                showGrid={showGrid}
+                fills={fills}
+                onDatumPress={onDatumPress}
+                onDatumHoverIn={onDatumHoverIn}
+                onDatumHoverOut={onDatumHoverOut}
+                datumLabel={
+                  interactive
+                    ? (datum) => describeDatum({ datum, formatValue: valueFormatter })
+                    : undefined
+                }
               />
-            ) : null}
-            <BarSeries
-              data={data}
-              xScale={xScale}
-              yScale={yScale}
-              plot={plot}
-              fills={fills}
-              onDatumPress={onDatumPress}
-              onDatumHoverIn={onDatumHoverIn}
-              onDatumHoverOut={onDatumHoverOut}
-              datumLabel={
-                interactive
-                  ? (datum) => describeDatum({ datum, formatValue: valueFormatter })
-                  : undefined
-              }
-            />
-            {showXAxis ? (
-              <XAxis
-                plot={plot}
-                scale={xScale}
-                tickValues={thinCategories(
-                  data.map((datum) => datum.label),
-                  plot.width,
-                  labelFontSize,
-                )}
-              />
-            ) : null}
-          </>
-        );
-      }}
-    </ChartSurface>
+              {showXAxis ? (
+                <XAxis
+                  plot={plot}
+                  scale={xScale}
+                  tickValues={thinCategories(
+                    data.map((datum) => datum.label),
+                    plot.width,
+                    labelFontSize,
+                  )}
+                />
+              ) : null}
+            </>
+          );
+        }}
+      </ChartSurface>
+    </ChartDataFrame>
   );
 }

package/src/charts/ChartDataView.spec.tsx

@@ -0,0 +1,104 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { XStack, YStack } from "tamagui";
+import { ChartDataView } from "./ChartDataView";
+import { Sparkline } from "./Sparkline";
+import { PieChart } from "./PieChart";
+import { ChartCard, KPICard } from "../views/Dashboard";
+
+const data = Array.from({ length: 13 }, (_, index) => ({
+  label: `Region ${index + 1}`,
+  value: index + 1,
+}));
+afterEach(cleanup);
+
+it("opens the complete formatted dataset without expanding the concise chart name", async () => {
+  renderWithProviders(
+    <ChartDataView data={data} title="Revenue" valueFormatter={(value) => `USD ${value}`}>
+      {({ action, data: series, valueFormatter }) => (
+        <YStack>
+          <XStack>{action}</XStack>
+          <Sparkline
+            data={series}
+            label="Revenue trend"
+            width={300}
+            valueFormatter={valueFormatter}
+          />
+        </YStack>
+      )}
+    </ChartDataView>,
+  );
+  const image = document.querySelector("svg")!;
+  expect(image.getAttribute("aria-label")).toBe("Revenue trend");
+  expect(image.getAttribute("height")).toBe("36");
+  expect(image.querySelector("button")).toBeNull();
+  expect(screen.queryByText("USD 13")).toBeNull();
+  fireEvent.click(screen.getByRole("button", { name: "View data for Revenue" }));
+  expect(await screen.findByText("USD 13")).toBeInTheDocument();
+  expect(document.querySelectorAll("[data-mpo-chart-data-row]")).toHaveLength(13);
+  expect(screen.getByText("Region 13")).toBeInTheDocument();
+  fireEvent.click(screen.getByRole("button", { name: "Close" }));
+  await waitFor(() => expect(screen.queryAllByRole("dialog")).toHaveLength(0));
+});
+
+it("normalizes bare sparkline values through the same complete channel", async () => {
+  renderWithProviders(
+    <ChartDataView data={[40, 50, 60]} title="Activity">
+      {({ action, data: series, valueFormatter }) => (
+        <YStack>
+          {action}
+          <Sparkline data={series} width={300} />
+        </YStack>
+      )}
+    </ChartDataView>,
+  );
+  fireEvent.click(screen.getByRole("button", { name: "View data for Activity" }));
+  expect(await screen.findByText("60")).toBeInTheDocument();
+  expect(document.querySelectorAll("[data-mpo-chart-data-row]")).toHaveLength(3);
+});
+
+it("supplies a complete data action when the pie legend is hidden", async () => {
+  renderWithProviders(<PieChart data={data} title="Revenue" showLegend={false} />);
+  fireEvent.click(screen.getByRole("button", { name: "View data for Revenue" }));
+  expect(await screen.findByText("Region 13")).toBeInTheDocument();
+  expect(document.querySelectorAll("[data-mpo-chart-data-row]")).toHaveLength(13);
+});
+
+it("keeps a visible pie legend complete without a dangling data-action association", () => {
+  renderWithProviders(
+    <ChartCard config={{ id: "revenue", type: "pie", title: "Revenue", data }} />,
+  );
+  expect(screen.getByText("Region 13")).toBeInTheDocument();
+  expect(screen.queryByRole("button", { name: "View data for Revenue" })).toBeNull();
+  expect(document.querySelector("svg")!.getAttribute("aria-describedby")).toBeNull();
+});
+
+it("keeps a consumer metric press override separate from the data action", async () => {
+  const configured = vi.fn();
+  const consumer = vi.fn();
+  renderWithProviders(
+    <KPICard
+      config={{
+        id: "metric",
+        title: "Revenue",
+        value: 20,
+        sparkline: [10, 20],
+        onClick: configured,
+      }}
+      onPress={consumer}
+    />,
+  );
+  fireEvent.click(screen.getByRole("button", { name: "View data for Revenue" }));
+  expect(consumer).not.toHaveBeenCalled();
+  expect(configured).not.toHaveBeenCalled();
+  expect(await screen.findByText("Revenue: data")).toBeInTheDocument();
+  fireEvent.click(screen.getByRole("button", { name: "Close" }));
+  await waitFor(() => expect(screen.queryAllByRole("dialog")).toHaveLength(0));
+  const navigation = document.querySelector('[data-mpo-kpi-navigation="metric"]')!;
+  fireEvent.click(navigation);
+  fireEvent.keyDown(navigation, { key: "Enter" });
+  fireEvent.keyDown(navigation, { key: " ", repeat: true });
+  expect(consumer).toHaveBeenCalledTimes(2);
+  expect(configured).not.toHaveBeenCalled();
+});