@multiplatform.one/components 7.7.6 → 7.10.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, {
@@ -243,12 +283,14 @@ const ToastActionTarget = styled(View, {
   alignItems: "center",
   justifyContent: "center",
   flexShrink: 0,
-  opacity: 0.9,
+  // No REST dim. The label is $color11 — the lowest AA-safe step of the hue —
+  // sitting straight on the toast fill, so it carries no headroom for a
+  // multiplier: 0.9 composited every light intent under 4.5 (MPO-128). Hover
+  // and press read off the pill's own fill instead.
   outlineWidth: 0,
-  hoverStyle: { opacity: 1 },
   pressStyle: { opacity: 0.95 },
   focusStyle: { outlineWidth: 0 },
-  focusVisibleStyle: { opacity: 1, outlineWidth: 0 },
+  focusVisibleStyle: { outlineWidth: 0 },
 });
 
 const ToastActionPill = styled(View, {
@@ -423,7 +465,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 +562,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 +579,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 +609,7 @@ function ToastInner({
       />
       {action && (
         <ToastActionTarget
+          {...nativeToastControlA11y()}
           className="mp-chip-dismiss"
           {...toastActionPressProps(nestedPx)}
           aria-label={action.altText ?? action.label}
@@ -571,6 +631,7 @@ function ToastInner({
       )}
       {showClose && (
         <ToastCloseTarget
+          {...nativeToastControlA11y()}
           className="mp-chip-dismiss"
           aria-label={t("Dismiss notification")}
           alignSelf={description ? "flex-start" : "center"}
@@ -628,6 +689,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 +708,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 +733,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 +758,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/TreeSelect/index.tsx

@@ -66,6 +66,14 @@ export interface TreeSelectProps extends Omit<GetProps<typeof YStack>, "children
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   defaultExpandedIds?: string[];
+  /**
+   * MPO-283 — accessible name for the trigger. `GetProps<typeof YStack>`
+   * already admitted this prop, but it landed on the outer wrapper, which is
+   * not an accessibility element on iOS, so nothing read it. It is routed to
+   * the trigger now. `aria-label` is accepted as an alias.
+   */
+  accessibilityLabel?: string;
+  "aria-label"?: string;
 }
 
 function defaultNodeIcon(hasChildren: boolean, isExpanded: boolean, iconSize: number) {
@@ -134,6 +142,24 @@ function TreeSelectRows({
             aria-expanded={hasChildren ? isExpanded : undefined}
             aria-selected={isSelected}
             aria-level={depth + 1}
+            // MPO-283: the aria-* above are web-only. Without the RN spellings
+            // a row is not an accessibility element on iOS, so the whole tree
+            // came back as loose StaticText with no role and no selected state.
+            // `role` is overridden too: RN prefers it over accessibilityRole,
+            // and `treeitem` leaves the element out of the iOS tree the same
+            // way `radio` does (measured, iOS 26.2).
+            {...(!isWeb
+              ? {
+                  accessible: true,
+                  role: "button" as const,
+                  accessibilityRole: "button" as const,
+                  accessibilityLabel: node.label,
+                  accessibilityState: {
+                    selected: isSelected,
+                    ...(hasChildren ? { expanded: isExpanded } : undefined),
+                  },
+                }
+              : undefined)}
             data-treeselect-row={node.id}
             data-treeselect-index={String(index)}
             data-depth={String(depth)}
@@ -181,6 +207,16 @@ function TreeSelectRows({
                     ? t("Collapse {{label}}", { label: node.label })
                     : t("Expand {{label}}", { label: node.label })
                 }
+                // MPO-283: the aria-label above never reaches native.
+                {...(!isWeb
+                  ? {
+                      accessible: true,
+                      accessibilityRole: "button" as const,
+                      accessibilityLabel: isExpanded
+                        ? t("Collapse {{label}}", { label: node.label })
+                        : t("Expand {{label}}", { label: node.label }),
+                    }
+                  : undefined)}
                 width={expandIconSize}
                 height={expandIconSize}
                 alignItems="center"
@@ -321,6 +357,7 @@ function Trigger({
   triggerRef,
   sizeToken,
   borderRadius,
+  accessibilityLabel,
 }: {
   display?: string;
   placeholder: string;
@@ -328,6 +365,7 @@ function Trigger({
   disabled: boolean;
   id?: string;
   labelled: boolean;
+  accessibilityLabel?: string;
   onToggle: () => void;
   triggerRef: (node: HTMLElement | null) => void;
   sizeToken: string;
@@ -349,8 +387,21 @@ function Trigger({
         role="combobox"
         aria-haspopup="tree"
         aria-expanded={open}
-        aria-label={labelled ? undefined : placeholder}
+        aria-label={accessibilityLabel ?? (labelled ? undefined : placeholder)}
         id={id}
+        // MPO-283 (same family as ToggleGroup / RadioGroup): every semantic on
+        // this trigger above is a web attribute, and tamagui does not map any
+        // of them onto React Native, so on iOS the control reached the
+        // accessibility tree with no role, no name and no expanded state.
+        {...(!isWeb
+          ? {
+              accessible: true,
+              role: "button" as const,
+              accessibilityRole: "button" as const,
+              accessibilityLabel: accessibilityLabel ?? display ?? placeholder,
+              accessibilityState: { disabled, expanded: open },
+            }
+          : undefined)}
         tabIndex={disabled || open ? -1 : 0}
         disabled={disabled}
         cursor={disabled ? "not-allowed" : "pointer"}
@@ -582,6 +633,7 @@ function FloatingTreeSelect({
   sizeToken,
   borderRadius,
   loading,
+  accessibilityLabel,
 }: {
   nodes: TreeNode[];
   value?: string;
@@ -599,6 +651,7 @@ function FloatingTreeSelect({
   sizeToken: string;
   borderRadius: number | string;
   loading?: boolean;
+  accessibilityLabel?: string;
 }) {
   const treeId = useId();
   const searchRef = useRef<HTMLInputElement | null>(null);
@@ -695,6 +748,7 @@ function FloatingTreeSelect({
         triggerRef={panel.setReferenceRef}
         sizeToken={sizeToken}
         borderRadius={borderRadius}
+        accessibilityLabel={accessibilityLabel}
       />
       {panel.mounted && (
         <FloatingFocusManager context={panel.context} modal={false} initialFocus={-1}>
@@ -772,6 +826,7 @@ function SheetTreeSelect({
   sizeToken,
   borderRadius,
   loading,
+  accessibilityLabel,
 }: {
   nodes: TreeNode[];
   value?: string;
@@ -789,6 +844,7 @@ function SheetTreeSelect({
   sizeToken: string;
   borderRadius: number | string;
   loading?: boolean;
+  accessibilityLabel?: string;
 }) {
   const treeId = useId();
   const searchRef = useRef<HTMLInputElement | null>(null);
@@ -844,6 +900,7 @@ function SheetTreeSelect({
           }}
           sizeToken={sizeToken}
           borderRadius={borderRadius}
+          accessibilityLabel={accessibilityLabel}
         />
       }
       header={
@@ -902,6 +959,8 @@ export function TreeSelect({
   onOpenChange,
   defaultExpandedIds,
   id: idProp,
+  accessibilityLabel,
+  "aria-label": ariaLabel,
   ...stackProps
 }: TreeSelectProps) {
   if (isWeb) ensureKeyboardModalityTracking();
@@ -965,6 +1024,7 @@ export function TreeSelect({
     sizeToken: String(knobProps.sizeToken),
     borderRadius: knobProps.borderRadius.borderRadius,
     loading,
+    accessibilityLabel: accessibilityLabel ?? ariaLabel,
   };
 
   const core = shouldUseSheet ? (

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>
   );
 }