@multiplatform.one/components 7.7.4 → 7.8.0

package/src/Tabs/index.tsx

@@ -59,7 +59,7 @@ import { componentColors } from "../componentColors";
 
 // ── Types ─────────────────────────────────────────────────────
 
-export type TabsVariant = "underline" | "contained";
+export type TabsVariant = "underline" | "contained" | "band";
 export type TabsSize = "$2" | "$3" | "$4" | "$5";
 export type TabsDirection = "ltr" | "rtl";
 
@@ -68,6 +68,8 @@ export interface TabsItem {
   value: string;
   /** Tab label */
   label: ReactNode;
+  /** Spoken name when the label contains more than plain text. */
+  accessibilityLabel?: string;
   /** Optional leading icon */
   icon?: ReactNode;
   /** Optional trailing adornment (e.g. a Badge/count pill) */
@@ -89,6 +91,8 @@ export interface TabsProps {
   onChange?: (value: string) => void;
   /** underline (desk-style, default) or contained (segmented track) */
   variant?: TabsVariant;
+  /** Equal tabs share a bounded row. Band always uses equal distribution. */
+  distribution?: "content" | "equal";
   /** Accent intent for the active indicator (default) */
   accent?: boolean;
   /** Error intent */
@@ -218,7 +222,8 @@ const fillProps = { flex: 1, minHeight: 0 } as const;
 
 const StripWrapper = styled(View, {
   name: "MpTabsStrip",
-  width: "100%",
+  alignSelf: "stretch",
+  minWidth: 0,
   position: "relative",
 });
 
@@ -297,6 +302,7 @@ function TabsRoot({
   defaultValue,
   onChange,
   variant = "underline",
+  distribution = "content",
   accent,
   error,
   warning,
@@ -395,6 +401,27 @@ function TabsRoot({
   }, [activeLayout, direction]);
 
   const isUnderline = variant === "underline";
+  const isBand = variant === "band";
+  const equalDistribution = isBand || distribution === "equal";
+  const tabRefs = React.useRef(new Map<string, HTMLElement>());
+  const onTabKeyDown = (event: React.KeyboardEvent, value: string) => {
+    if (!["Home", "End", "ArrowLeft", "ArrowRight"].includes(event.key)) return;
+    const enabled = items.filter((item) => !disabled && !item.disabled);
+    if (!enabled.length) return;
+    const current = enabled.findIndex((item) => item.value === value);
+    const step = (event.key === "ArrowRight" ? 1 : -1) * (direction === "rtl" ? -1 : 1);
+    const next =
+      event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? enabled.length - 1
+          : loop
+            ? (current + step + enabled.length) % enabled.length
+            : Math.max(0, Math.min(enabled.length - 1, current + step));
+    event.preventDefault();
+    event.stopPropagation();
+    tabRefs.current.get(enabled[next]!.value)?.focus();
+  };
   const indicatorTheme = (intent ?? "accent") as ThemeName;
   // Size recipe owns chrome (LC-75). Explicit `size` already flowed into
   // knobProps via useResolvedKnobs. Compact tightens gaps only (LC-76).
@@ -426,36 +453,215 @@ function TabsRoot({
         })()
       : undefined;
 
-  const indicator = activeLayout ? (
-    isUnderline ? (
-      <Theme name={indicatorTheme}>
-        <UnderlineIndicator
-          x={activeLayout.x}
-          width={activeLayout.width}
-          data-tabs-indicator="underline"
-          {...(transition ? { transition } : undefined)}
-        />
-      </Theme>
-    ) : (
-      <Theme name={indicatorTheme}>
-        <ThumbIndicator
-          x={activeLayout.x}
-          y={activeLayout.y}
-          width={activeLayout.width}
-          height={activeLayout.height}
-          backgroundColor={selectedTint ?? "$color4"}
-          data-tabs-indicator="thumb"
-          {...thumbRadius}
-          {...(knobProps.elevation !== undefined ? { elevation: knobProps.elevation } : undefined)}
-          {...(transition ? { transition } : undefined)}
-        />
-      </Theme>
-    )
-  ) : null;
+  const indicator =
+    activeLayout && !isBand ? (
+      isUnderline ? (
+        <Theme name={indicatorTheme}>
+          <UnderlineIndicator
+            x={activeLayout.x}
+            width={activeLayout.width}
+            data-tabs-indicator="underline"
+            {...(transition ? { transition } : undefined)}
+          />
+        </Theme>
+      ) : (
+        <Theme name={indicatorTheme}>
+          <ThumbIndicator
+            x={activeLayout.x}
+            y={activeLayout.y}
+            width={activeLayout.width}
+            height={activeLayout.height}
+            backgroundColor={selectedTint ?? "$color4"}
+            data-tabs-indicator="thumb"
+            {...thumbRadius}
+            {...(knobProps.elevation !== undefined
+              ? { elevation: knobProps.elevation }
+              : undefined)}
+            {...(transition ? { transition } : undefined)}
+          />
+        </Theme>
+      )
+    ) : null;
 
   if (items.length === 0) return null;
 
   const tabListLabel = ariaLabel ?? t("Tabs");
+  const tabList = (
+    <TabsList
+      loop={loop}
+      aria-label={tabListLabel}
+      data-tabs-list={variant}
+      data-size-token={visualSizeToken}
+      data-density={knobProps.density}
+      data-visual-px={sizePx}
+      {...(!isWeb ? { role: "tablist" as const } : undefined)}
+      alignSelf={equalDistribution ? "stretch" : "flex-start"}
+      minWidth={0}
+      contained={!isUnderline && !isBand}
+      {...(isUnderline || isBand
+        ? { gap: 0 }
+        : {
+            backgroundColor: componentColors.interactive.background,
+            gap: 0,
+            // Full fragment spread (AGENTS.md knob rule) so the
+            // cornerSmoothing class rides along with the radius.
+            ...knobProps.borderRadiusNested,
+          })}
+    >
+      {indicator}
+      {items.map((item, itemIndex) => {
+        const isActive = item.value === currentValue;
+        const isDisabled = disabled || item.disabled;
+        const position = getGroupPosition(itemIndex, enabledCount);
+        const cornerProps = isUnderline
+          ? underlineStackRadius(position, radiusToken)
+          : stackRadiusProps(position, outerRadiusToken, "horizontal");
+        // Roving tabindex (single tab stop): tamagui's vendored
+        // roving-focus item hardcodes tabIndex=0 on every tab, making
+        // each tab its own Tab stop. Exactly one tab stays in the page
+        // tab order — the focused one while focus is in the tablist,
+        // else the active one (or the first, when value matches
+        // nothing); ArrowLeft/Right move within the tablist.
+        const anchorValue =
+          (focusValue !== null &&
+          items.some((i) => i.value === focusValue && !(disabled || i.disabled))
+            ? focusValue
+            : undefined) ??
+          (items.some((i) => i.value === currentValue && !(disabled || i.disabled))
+            ? currentValue
+            : items.find((i) => !(disabled || i.disabled))?.value);
+        const isTabStop =
+          item.value === anchorValue &&
+          itemIndex === items.findIndex((i) => i.value === anchorValue);
+        const kbRing = kbFocusValue === item.value;
+        const feedbackBackground =
+          pressValue === item.value
+            ? componentColors.interactive.hover
+            : hoverValue === item.value
+              ? componentColors.interactive.background
+              : "transparent";
+        return (
+          <Trigger
+            key={item.value}
+            value={item.value}
+            ref={(node) => {
+              if (!isWeb) return;
+              if (node) tabRefs.current.set(item.value, node as unknown as HTMLElement);
+              else tabRefs.current.delete(item.value);
+            }}
+            flex={equalDistribution ? 1 : undefined}
+            minWidth={0}
+            minHeight={equalDistribution ? MIN_PRESS_TARGET : undefined}
+            borderEndWidth={isBand && itemIndex < items.length - 1 ? 1 : 0}
+            borderColor={isBand ? componentColors.surface.border : undefined}
+            disabled={isDisabled}
+            {...(item.content === undefined ? { "aria-controls": undefined } : undefined)}
+            data-tab-position={position}
+            data-kb-ring={kbRing ? "true" : undefined}
+            {...(isWeb
+              ? {
+                  tabIndex: isDisabled ? -1 : isTabStop ? 0 : -1,
+                  "aria-label": item.accessibilityLabel,
+                  onKeyDownCapture: (event: React.KeyboardEvent) => onTabKeyDown(event, item.value),
+                }
+              : {
+                  accessible: true,
+                  role: "button" as const,
+                  accessibilityRole: "button" as const,
+                  accessibilityLabel:
+                    item.accessibilityLabel ??
+                    (typeof item.label === "string" || typeof item.label === "number"
+                      ? String(item.label)
+                      : undefined),
+                  accessibilityState: { selected: isActive, disabled: Boolean(isDisabled) },
+                })}
+            hitSlop={tabHitSlop}
+            onInteraction={handleInteraction}
+            cursor={isDisabled ? "not-allowed" : "pointer"}
+            backgroundColor={
+              isBand
+                ? isActive
+                  ? componentColors.surface.background
+                  : isDisabled
+                    ? "transparent"
+                    : feedbackBackground
+                : "transparent"
+            }
+            borderRadius={0}
+            {...(isDisabled
+              ? isActive
+                ? disabledState.chromeKnobProps
+                : { ...disabledState.chromeKnobProps, ...disabledState.textKnobProps }
+              : undefined)}
+            {...(isWeb
+              ? {
+                  onFocusCapture: () => {
+                    setFocusValue(item.value);
+                    if (wasKeyboardFocus()) setKbFocusValue(item.value);
+                  },
+                  onBlurCapture: () => {
+                    setFocusValue((prev) => (prev === item.value ? null : prev));
+                    setKbFocusValue((prev) => (prev === item.value ? null : prev));
+                  },
+                  onPointerEnter: () => setHoverValue(item.value),
+                  onPointerLeave: () =>
+                    setHoverValue((prev) => (prev === item.value ? null : prev)),
+                  onPointerDown: () => setPressValue(item.value),
+                  onPointerUp: () => setPressValue((prev) => (prev === item.value ? null : prev)),
+                }
+              : undefined)}
+          >
+            <View
+              {...(isBand ? undefined : cornerProps)}
+              // ONE chrome owner (LC-75/LC-79): the full control recipe
+              // (height/paddingHorizontal/gap) lives on this inner row —
+              // it also paints hover/press fill, so the pill covers the
+              // padded box. The Trigger stays an unpainted hit target
+              // (spreading the recipe there too doubled the horizontal
+              // padding).
+              {...knobProps.control}
+              // Band columns share width; a minimal inset keeps labels off the edges.
+              paddingHorizontal={isBand ? "$1" : knobProps.control.paddingHorizontal}
+              alignSelf="stretch"
+              flexGrow={equalDistribution ? 1 : undefined}
+              flexShrink={equalDistribution ? 1 : undefined}
+              flexBasis={equalDistribution ? 0 : undefined}
+              minWidth={0}
+              flexDirection="row"
+              alignItems="center"
+              justifyContent="center"
+              backgroundColor={
+                isBand || isActive || isDisabled ? "transparent" : feedbackBackground
+              }
+              {...(kbRing ? keyboardFocusRingProps : undefined)}
+            >
+              {item.icon}
+              <TabLabel
+                active={isActive}
+                flexShrink={1}
+                minWidth={0}
+                {...knobProps.controlType}
+                fontFamily={knobProps.label.fontFamily}
+                fontWeight={!isBand && isActive ? "700" : knobProps.label.fontWeight}
+                color={
+                  isDisabled
+                    ? componentColors.text.muted
+                    : isActive
+                      ? variant === "contained" && onSelectedTint
+                        ? onSelectedTint
+                        : componentColors.text.primary
+                      : componentColors.text.secondary
+                }
+              >
+                {wrapBareTextChildren(item.label, (label) => label)}
+              </TabLabel>
+              {item.badge}
+            </View>
+          </Trigger>
+        );
+      })}
+    </TabsList>
+  );
 
   return (
     <TamaguiTabs
@@ -463,13 +669,16 @@ function TabsRoot({
       onValueChange={handleChange}
       orientation="horizontal"
       activationMode={activationMode}
-      width="100%"
+      width={equalDistribution ? "100%" : undefined}
+      alignSelf="stretch"
+      minWidth={0}
       flexDirection="column"
       // The root is the first link in the chain a filling panel needs.
       // `flex: 1` alone is not enough — without `minHeight: 0` the column
       // refuses to shrink below its content and the panel never gets a box.
       {...(fill ? fillProps : undefined)}
       data-tabs-variant={variant}
+      data-tabs-distribution={equalDistribution ? "equal" : "content"}
       data-tabs-fill={fill ? "true" : undefined}
       data-tabs-dir={direction}
       data-size-token={visualSizeToken}
@@ -477,171 +686,47 @@ function TabsRoot({
       data-visual-px={sizePx}
     >
       <StripWrapper
+        backgroundColor={isBand ? "$color2" : undefined}
+        borderBottomWidth={isBand ? 1 : undefined}
+        borderBottomColor={isBand ? componentColors.surface.border : undefined}
         {...(isUnderline
           ? { ...hairline.bottom, borderColor: componentColors.surface.border }
           : undefined)}
         data-fade-left={fades.left ? "true" : undefined}
         data-fade-right={fades.right ? "true" : undefined}
       >
-        <ScrollView
-          ref={scrollRef}
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          scrollEventThrottle={16}
-          style={maskStyle as never}
-          // Slop padding keeps the 44px press floor from being clipped when
-          // the painted tab is smaller than the floor (LC-54 / nested scale).
-          contentContainerStyle={{ paddingVertical: slop }}
-          marginVertical={-slop}
-          onScroll={(e) => {
-            scrollMetrics.current.offset = e.nativeEvent.contentOffset.x;
-            updateFades();
-          }}
-          onLayout={(e) => {
-            scrollMetrics.current.viewport = e.nativeEvent.layout.width;
-            updateFades();
-          }}
-          onContentSizeChange={(w) => {
-            scrollMetrics.current.content = w;
-            updateFades();
-          }}
-        >
-          <TabsList
-            loop={loop}
-            aria-label={tabListLabel}
-            data-tabs-list={variant}
-            data-size-token={visualSizeToken}
-            data-density={knobProps.density}
-            data-visual-px={sizePx}
-            {...(!isWeb ? { role: "tablist" as const } : undefined)}
-            contained={!isUnderline}
-            {...(isUnderline
-              ? { gap: 0 }
-              : {
-                  backgroundColor: componentColors.interactive.background,
-                  gap: 0,
-                  // Full fragment spread (AGENTS.md knob rule) so the
-                  // cornerSmoothing class rides along with the radius.
-                  ...knobProps.borderRadiusNested,
-                })}
+        {equalDistribution ? (
+          <View alignSelf="stretch" minWidth={0}>
+            {tabList}
+          </View>
+        ) : (
+          <ScrollView
+            ref={scrollRef}
+            data-tabs-scroll="true"
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            scrollEventThrottle={16}
+            style={maskStyle as never}
+            // Slop padding keeps the 44px press floor from being clipped when
+            // the painted tab is smaller than the floor (LC-54 / nested scale).
+            contentContainerStyle={{ paddingVertical: slop }}
+            marginVertical={-slop}
+            onScroll={(e) => {
+              scrollMetrics.current.offset = e.nativeEvent.contentOffset.x;
+              updateFades();
+            }}
+            onLayout={(e) => {
+              scrollMetrics.current.viewport = e.nativeEvent.layout.width;
+              updateFades();
+            }}
+            onContentSizeChange={(w) => {
+              scrollMetrics.current.content = w;
+              updateFades();
+            }}
           >
-            {indicator}
-            {items.map((item, itemIndex) => {
-              const isActive = item.value === currentValue;
-              const isDisabled = disabled || item.disabled;
-              const position = getGroupPosition(itemIndex, enabledCount);
-              const cornerProps = isUnderline
-                ? underlineStackRadius(position, radiusToken)
-                : stackRadiusProps(position, outerRadiusToken, "horizontal");
-              // Roving tabindex (single tab stop): tamagui's vendored
-              // roving-focus item hardcodes tabIndex=0 on every tab, making
-              // each tab its own Tab stop. Exactly one tab stays in the page
-              // tab order — the focused one while focus is in the tablist,
-              // else the active one (or the first, when value matches
-              // nothing); ArrowLeft/Right move within the tablist.
-              const anchorValue =
-                (focusValue !== null &&
-                items.some((i) => i.value === focusValue && !(disabled || i.disabled))
-                  ? focusValue
-                  : undefined) ??
-                (items.some((i) => i.value === currentValue) ? currentValue : items[0]?.value);
-              const isTabStop =
-                item.value === anchorValue &&
-                itemIndex === items.findIndex((i) => i.value === anchorValue);
-              const kbRing = kbFocusValue === item.value;
-              return (
-                <Trigger
-                  key={item.value}
-                  value={item.value}
-                  disabled={isDisabled}
-                  data-tab-position={position}
-                  data-kb-ring={kbRing ? "true" : undefined}
-                  {...(isWeb
-                    ? { tabIndex: isDisabled ? -1 : isTabStop ? 0 : -1 }
-                    : {
-                        accessible: true,
-                        role: "tab" as const,
-                        "aria-selected": isActive,
-                        ...(isDisabled ? { "aria-disabled": true } : undefined),
-                      })}
-                  hitSlop={tabHitSlop}
-                  onInteraction={handleInteraction}
-                  cursor={isDisabled ? "not-allowed" : "pointer"}
-                  backgroundColor="transparent"
-                  borderRadius={0}
-                  {...(isDisabled
-                    ? isActive
-                      ? disabledState.chromeKnobProps
-                      : { ...disabledState.chromeKnobProps, ...disabledState.textKnobProps }
-                    : undefined)}
-                  {...(isWeb
-                    ? {
-                        onFocusCapture: () => {
-                          setFocusValue(item.value);
-                          if (wasKeyboardFocus()) setKbFocusValue(item.value);
-                        },
-                        onBlurCapture: () => {
-                          setFocusValue((prev) => (prev === item.value ? null : prev));
-                          setKbFocusValue((prev) => (prev === item.value ? null : prev));
-                        },
-                        onPointerEnter: () => setHoverValue(item.value),
-                        onPointerLeave: () =>
-                          setHoverValue((prev) => (prev === item.value ? null : prev)),
-                        onPointerDown: () => setPressValue(item.value),
-                        onPointerUp: () =>
-                          setPressValue((prev) => (prev === item.value ? null : prev)),
-                      }
-                    : undefined)}
-                >
-                  <View
-                    {...cornerProps}
-                    // ONE chrome owner (LC-75/LC-79): the full control recipe
-                    // (height/paddingHorizontal/gap) lives on this inner row —
-                    // it also paints hover/press fill, so the pill covers the
-                    // padded box. The Trigger stays an unpainted hit target
-                    // (spreading the recipe there too doubled the horizontal
-                    // padding).
-                    {...knobProps.control}
-                    width="100%"
-                    flexDirection="row"
-                    alignItems="center"
-                    justifyContent="center"
-                    backgroundColor={
-                      isActive || isDisabled
-                        ? "transparent"
-                        : pressValue === item.value
-                          ? componentColors.interactive.hover
-                          : hoverValue === item.value
-                            ? componentColors.interactive.background
-                            : "transparent"
-                    }
-                    {...(kbRing ? keyboardFocusRingProps : undefined)}
-                  >
-                    {item.icon}
-                    <TabLabel
-                      active={isActive}
-                      {...knobProps.controlType}
-                      fontFamily={knobProps.label.fontFamily}
-                      fontWeight={isActive ? "700" : knobProps.label.fontWeight}
-                      color={
-                        isDisabled
-                          ? componentColors.text.muted
-                          : isActive
-                            ? !isUnderline && onSelectedTint
-                              ? onSelectedTint
-                              : componentColors.text.primary
-                            : componentColors.text.secondary
-                      }
-                    >
-                      {wrapBareTextChildren(item.label, (label) => label)}
-                    </TabLabel>
-                    {item.badge}
-                  </View>
-                </Trigger>
-              );
-            })}
-          </TabsList>
-        </ScrollView>
+            {tabList}
+          </ScrollView>
+        )}
       </StripWrapper>
 
       {/*

package/src/Toast/Toast.spec.tsx

@@ -12,7 +12,7 @@ import {
   relativeLuminance,
   useAccentOnSurface,
 } from "@multiplatform.one/theme";
-import { Toast, ToastViewport, useToast } from "./index";
+import { Toast, ToastViewport, useToast, nativeToastA11y, nativeToastControlA11y } from "./index";
 import {
   __resetToastViewportRegistry,
   dismissToast,
@@ -39,6 +39,40 @@ function Trigger(props: Parameters<ReturnType<typeof useToast>["show"]>[0]) {
   return <Button onPress={() => toast.show(props)}>fire</Button>;
 }
 
+describe("native toast accessibility", () => {
+  it("groups text-only content while leaving action and dismiss controls reachable", () => {
+    expect(nativeToastA11y("Saved", false, false)).toEqual({
+      accessible: true,
+      accessibilityLabel: "Saved",
+    });
+    expect(nativeToastA11y("Saved", true, false)).toEqual({ accessible: false });
+  });
+
+  it("does not wire a second native announcement channel or web grouping", () => {
+    expect(nativeToastA11y("Saved", false, false)).not.toHaveProperty("accessibilityLiveRegion");
+    expect(nativeToastA11y("Saved", false, false)).not.toHaveProperty("aria-live");
+    expect(nativeToastA11y("Saved", false, true)).toEqual({});
+    expect(nativeToastA11y(undefined, false, false)).toEqual({ accessible: false });
+  });
+
+  it("makes native action and dismiss controls accessibility elements without leaking to web", () => {
+    expect(nativeToastControlA11y(false)).toEqual({ accessible: true });
+    expect(nativeToastControlA11y(true)).toEqual({});
+  });
+
+  it("records the library grouping default and keeps native control props off the DOM", () => {
+    renderWithProviders(
+      <>
+        <Trigger title="Saved" dismissible />
+        <ToastViewport />
+      </>,
+    );
+    fireEvent.click(screen.getByText("fire"));
+    expect(screen.getByTestId("toast")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByLabelText("Dismiss notification")).not.toHaveAttribute("accessible");
+  });
+});
+
 describe("Toast (standalone)", () => {
   it("renders title, description and role=status", () => {
     renderWithProviders(
@@ -49,6 +83,15 @@ describe("Toast (standalone)", () => {
     expect(screen.getByRole("status")).toBeInTheDocument();
   });
 
+  it("names CopyField confirm for assistive tech (DG-FB-03)", () => {
+    renderWithProviders(<Toast title="Copied to clipboard." intent="success" />);
+    const status = screen.getByRole("status");
+    expect(status).toHaveAttribute("aria-live", "polite");
+    expect(status).toHaveAttribute("aria-label", "Copied to clipboard.");
+    expect(status).toHaveTextContent("Copied to clipboard.");
+    expect(status).toHaveAttribute("aria-atomic");
+  });
+
   it("fires onDismiss from the close button", () => {
     const onDismiss = vi.fn();
     renderWithProviders(<Toast title="Saved" onDismiss={onDismiss} />);
@@ -198,6 +241,18 @@ describe("useToast + ToastViewport (imperative)", () => {
     expect(getToasts()).toHaveLength(2);
   });
 
+  it("viewport announce region carries Copied to clipboard.", async () => {
+    renderWithProviders(<ToastViewport />);
+    act(() => {
+      showToast({ title: "Copied to clipboard.", intent: "success" });
+    });
+    expect(await screen.findByText("Copied to clipboard.")).toBeInTheDocument();
+    await vi.waitFor(() => {
+      const live = document.querySelector("[aria-live]:not([aria-live='off'])");
+      expect(live?.textContent ?? "").toMatch(/Copied to clipboard/);
+    });
+  });
+
   it("dismisses via the close button", async () => {
     vi.useFakeTimers();
     try {