@multiplatform.one/components 6.6.0 → 7.0.0

package/src/Carousel/Carousel.spec.tsx

@@ -7,6 +7,7 @@
  */
 
 import { act, fireEvent } from "@testing-library/react";
+import { Preset, isTouchSurface, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { Text, View, getTokens } from "tamagui";
@@ -269,3 +270,154 @@ describe("Carousel geometry (LC-62)", () => {
     expect(scrollCalls.at(-1)).toMatchObject({ left: 2 * 400, behavior: "auto" });
   });
 });
+
+// ── LC-68 MOTION-RIDES-KNOB ───────────────────────────────────
+// Slide snaps gate on knobProps.transition: undefined at animation "none"
+// (which also carries prefers-reduced-motion) means `scrollTo({ animated:
+// false })` — the track JUMPS (behavior "auto" on the captured DOM scroll).
+// With motion on the same snap smooth-scrolls (positive control proving the
+// probe measures). A hardcoded `animated: true` is the violation this locks
+// out.
+describe("Carousel snaps ride the animation knob (LC-68)", () => {
+  it("jumps (animated: false → behavior auto) on dot click at animation none", async () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ animation: "none" }}>
+        <Carousel gap={0}>
+          {[0, 1, 2].map((index) => (
+            <Slide key={index} index={index} />
+          ))}
+        </Carousel>
+      </Preset>,
+    );
+    await flushMeasure();
+    fireEvent.click(dots(container)[2]);
+    expect(scrollCalls.at(-1)).toMatchObject({ left: 800, behavior: "auto" });
+    fireEvent.click(dots(container)[1]);
+    expect(scrollCalls.at(-1)).toMatchObject({ left: 400, behavior: "auto" });
+  });
+
+  it("smooth-scrolls (animated: true) on dot click with motion on (positive control)", async () => {
+    const { container } = renderWithProviders(
+      // Default knobs: animation "quick" — knobProps.transition is defined.
+      <Carousel gap={0}>
+        {[0, 1, 2].map((index) => (
+          <Slide key={index} index={index} />
+        ))}
+      </Carousel>,
+    );
+    await flushMeasure();
+    fireEvent.click(dots(container)[2]);
+    expect(scrollCalls.at(-1)).toMatchObject({ left: 800, behavior: "smooth" });
+  });
+});
+
+// ── LC-71 RING-ANATOMY + size recipes + 44px floor ────────────
+// Rings live on arrows/dots (keyboard-only), never as a UA outline on the
+// scroll viewport. Painted arrow size follows sizeToken; the hit target is
+// floored at MIN_PRESS_TARGET (44). Embla/Polaris/Apple: halo on the control.
+
+function arrow(container: HTMLElement, side: "prev" | "next") {
+  return container.querySelector(`[data-carousel-arrow='${side}']`) as HTMLElement | null;
+}
+
+function arrowVisual(container: HTMLElement, side: "prev" | "next") {
+  return container.querySelector(`[data-carousel-arrow-visual='${side}']`) as HTMLElement | null;
+}
+
+describe("Carousel LC-71 ring anatomy, size recipes, 44px floor", () => {
+  it("keeps the viewport out of the tab order with no outline", async () => {
+    const { container } = renderWithProviders(
+      <Carousel gap={0}>
+        {[0, 1, 2].map((index) => (
+          <Slide key={index} index={index} />
+        ))}
+      </Carousel>,
+    );
+    await flushMeasure();
+    const track = container.querySelector("[data-carousel-track]") as HTMLElement;
+    expect(track).toBeTruthy();
+    expect(track.tabIndex).toBe(-1);
+    const style = track.getAttribute("style") ?? "";
+    expect(style).not.toMatch(/outline-width:\s*[1-9]/);
+  });
+
+  it("floors arrow press targets at 44px and paints the size-recipe visual", async () => {
+    const { container } = renderWithProviders(
+      <Carousel gap={0}>
+        {[0, 1, 2].map((index) => (
+          <Slide key={index} index={index} />
+        ))}
+      </Carousel>,
+    );
+    await flushMeasure();
+    const next = arrow(container, "next");
+    const visual = arrowVisual(container, "next");
+    expect(next).toBeTruthy();
+    expect(visual).toBeTruthy();
+    // LC-75: arrow chrome follows the size recipe (desktop $4 height 32),
+    // not the flat token ramp ($4 = 44). The press target keeps the 44 floor.
+    const recipe = sizeRecipeForToken("$4", { touch: isTouchSurface() });
+    expect(recipe.height).toBe(32);
+    expect(elementCarriesWidth(next!, 44)).toBe(true);
+    expect(elementCarriesWidth(visual!, recipe.height)).toBe(true);
+    expect(next!.className).toContain("mp-carousel-arrow");
+    expect(visual!.className).toContain("mp-carousel-arrow-visual");
+  });
+
+  it("keeps the 44px floor when the size knob paints a smaller arrow", async () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ size: "small" }}>
+        <Carousel gap={0}>
+          {[0, 1, 2].map((index) => (
+            <Slide key={index} index={index} />
+          ))}
+        </Carousel>
+      </Preset>,
+    );
+    await flushMeasure();
+    const next = arrow(container, "next");
+    const visual = arrowVisual(container, "next");
+    // LC-75 small recipe (desktop $3 height 28) paints the visual; the
+    // outer press target stays floored at 44 (LC-54/LC-77 channel).
+    const smallPx = sizeRecipeForToken("$3", { touch: isTouchSurface() }).height;
+    expect(smallPx).toBeLessThan(44);
+    expect(elementCarriesWidth(visual!, smallPx)).toBe(true);
+    expect(elementCarriesWidth(next!, 44)).toBe(true);
+  });
+
+  it("pages with ArrowRight / ArrowLeft on the carousel region (Embla/Polaris)", async () => {
+    const { container } = renderWithProviders(
+      <Carousel gap={0}>
+        {[0, 1, 2].map((index) => (
+          <Slide key={index} index={index} />
+        ))}
+      </Carousel>,
+    );
+    await flushMeasure();
+    const region = container.querySelector("[aria-roledescription='carousel']") as HTMLElement;
+    expect(region).toBeTruthy();
+    fireEvent.keyDown(region, { key: "ArrowRight" });
+    expect(scrollCalls.at(-1)).toMatchObject({ left: 400, behavior: "smooth" });
+    fireEvent.keyDown(region, { key: "ArrowRight" });
+    expect(scrollCalls.at(-1)).toMatchObject({ left: 800, behavior: "smooth" });
+    fireEvent.keyDown(region, { key: "Home" });
+    expect(scrollCalls.at(-1)).toMatchObject({ left: 0, behavior: "smooth" });
+    fireEvent.keyDown(region, { key: "End" });
+    expect(scrollCalls.at(-1)).toMatchObject({ left: 800, behavior: "smooth" });
+  });
+
+  it("installs the keyboard-only arrow ring stylesheet (not a viewport UA outline)", async () => {
+    renderWithProviders(
+      <Carousel gap={0}>
+        {[0, 1, 2].map((index) => (
+          <Slide key={index} index={index} />
+        ))}
+      </Carousel>,
+    );
+    await flushMeasure();
+    const sheet = document.getElementById("mp-carousel-arrow-ring");
+    expect(sheet?.textContent ?? "").toContain(".mp-carousel-arrow:focus-visible");
+    expect(sheet?.textContent ?? "").toContain(".mp-carousel-arrow-visual");
+    expect(sheet?.textContent ?? "").not.toContain("[data-carousel-track]");
+  });
+});

package/src/Carousel/index.tsx

@@ -1,13 +1,21 @@
-import type { ReactNode } from "react";
+import type { KeyboardEvent, ReactNode } from "react";
 import { useState, useRef, useCallback, useEffect, Children } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
 import { zIndex } from "@multiplatform.one/forms";
-import { MIN_PRESS_TARGET, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  MIN_PRESS_TARGET,
+  isTouchSurface,
+  pressTargetHitSlop,
+  pressTargetStyle,
+  sizeRecipeForToken,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import type { GetProps, ScrollView as TamaguiScrollView } from "tamagui";
-import { View, XStack, ScrollView, getTokens, styled } from "tamagui";
+import { View, XStack, ScrollView, getTokens, isWeb, styled } from "tamagui";
 import { DotIndicator } from "../DotIndicator";
 import { useDirection } from "../hooks/useDirection";
+import { withInterp } from "../shared/t";
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -29,6 +37,36 @@ export interface CarouselProps {
   initialSlide?: number;
 }
 
+// ── LC-71: ring the painted arrow, never the viewport or the 44px hit box ─
+// Embla / Polaris / Apple: the halo follows the perceived control (the
+// circle), keyboard-only (`:focus-visible`). Chip dismiss uses the same
+// parent-focus → child-ring split; this sheet is local because the shared
+// composite CSS rings the node that carries the class, not its descendant.
+
+const ARROW_RING_STYLE_ID = "mp-carousel-arrow-ring";
+
+function ensureCarouselArrowRing() {
+  if (!isWeb || typeof document === "undefined") return;
+  if (document.getElementById(ARROW_RING_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = ARROW_RING_STYLE_ID;
+  tag.textContent = `.mp-carousel-arrow:focus,
+.mp-carousel-arrow:focus-visible {
+  outline: none !important;
+}
+.mp-carousel-arrow:focus-visible .mp-carousel-arrow-visual {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;
+  outline-offset: 2px !important;
+}`;
+  document.head.appendChild(tag);
+}
+
+function isTypingTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable;
+}
+
 // ── Styled components ─────────────────────────────────────────
 
 const CarouselContainer = styled(View, {
@@ -38,6 +76,12 @@ const CarouselContainer = styled(View, {
   overflow: "hidden",
 });
 
+const CarouselStage = styled(View, {
+  name: "CarouselStage",
+  position: "relative",
+  width: "100%",
+});
+
 const CarouselSlide = styled(View, {
   name: "CarouselSlide",
   flexShrink: 0,
@@ -47,7 +91,8 @@ const CarouselSlide = styled(View, {
 // absolute target floored at 44×44 (house pressTarget* channel); the painted
 // circle (ArrowVisual) keeps its knob-driven visual size centered inside.
 // Hover/press feedback (opacity/scale) lives on the target so the whole hit
-// area responds, but only the inner circle paints.
+// area responds, but only the inner circle paints. LC-71: this node never
+// paints a ring — `:focus-visible` forwards it to ArrowVisual.
 const ArrowButton = styled(View, {
   name: "CarouselArrow",
   position: "absolute",
@@ -60,6 +105,7 @@ const ArrowButton = styled(View, {
   backgroundColor: "transparent",
   cursor: "pointer",
   opacity: 0.9,
+  outlineWidth: 0,
   hoverStyle: {
     opacity: 1,
     scale: 1.05,
@@ -67,10 +113,15 @@ const ArrowButton = styled(View, {
   pressStyle: {
     scale: 0.95,
   },
+  focusStyle: {
+    outlineWidth: 0,
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0,
+  },
   variants: {
     disabled: {
       true: {
-        opacity: 0.3,
         cursor: "not-allowed",
       },
     },
@@ -79,12 +130,8 @@ const ArrowButton = styled(View, {
 
 const ArrowVisual = styled(View, {
   name: "CarouselArrowVisual",
-  backgroundColor: "$background",
   alignItems: "center",
   justifyContent: "center",
-  shadowColor: "$shadowColor",
-  shadowRadius: 8,
-  shadowOpacity: 0.15,
 });
 
 const DotsWrapper = styled(View, {
@@ -106,9 +153,11 @@ export function Carousel({
   initialSlide = 0,
 }: CarouselProps) {
   const { t } = useTranslation();
-  const { knobProps, control } = useResolvedKnobs();
-  // Inter-slide gap follows the space knob (SP-GAP); arrow geometry
-  // follows the size knob (spec Carousel arrows: sizeToken, SP-FIXED).
+  const { knobProps, disabledState } = useResolvedKnobs();
+  ensureCarouselArrowRing();
+  // Inter-slide gap follows the space knob (SP-GAP); arrow chrome follows
+  // the size recipe (LC-75) — visual height/icon, not the flat $4=44 ramp.
+  // Press target stays floored at 44 (MIN_PRESS_TARGET vs visual).
   // Explicit props eject.
   const gap = gapProp ?? knobProps.gap.gap;
   // Scroll-offset math needs the gap in px — the slide pitch is
@@ -117,8 +166,9 @@ export function Carousel({
     typeof gap === "number"
       ? gap
       : ((getTokens().space as Record<string, { val?: number } | undefined>)?.[gap]?.val ?? 0);
-  const arrowSize = (getTokens().size as any)?.[knobProps.sizeToken]?.val ?? 40;
-  const arrowGlyphSize = Math.round(arrowSize / 2);
+  const arrowRecipe = sizeRecipeForToken(knobProps.sizeToken, { touch: isTouchSurface() });
+  const arrowSize = arrowRecipe.height;
+  const arrowGlyphSize = arrowRecipe.iconSize;
   // Arrows are R-BINARY (spec Carousel anatomy): square in the radius `none`
   // world, a full circle at every other value. The fixed 1000 arc was
   // knob-dead — an undeclared knob-immune shape the old geometric sweep
@@ -126,11 +176,14 @@ export function Carousel({
   const arrowRadius = knobProps.pointy ? 0 : 1000;
   // Press-floor target around the painted circle; the edge inset shifts so
   // the circle still sits 8px from the container edge (clamped ≥0 so the
-  // container's overflow:hidden never clips the enlarged target).
+  // enlarged target never hangs off the stage).
   const arrowTargetSize = Math.max(arrowSize, MIN_PRESS_TARGET);
   const arrowEdgeInset = Math.max(0, 8 - Math.round((arrowTargetSize - arrowSize) / 2));
+  const arrowHitSlop = pressTargetHitSlop(arrowSize);
   const [activeIndex, setActiveIndex] = useState(initialSlide);
   const trackRef = useRef<TamaguiScrollView | null>(null);
+  const hoverPauseRef = useRef(false);
+  const rootRef = useRef<HTMLElement | null>(null);
   const slideCount = Children.count(children);
   // LC-62 SLIDE-VIEWPORT-WIDTH: slides size from the MEASURED scroll viewport,
   // so the measurement is state (slides re-render on measure/resize). On web a
@@ -140,14 +193,19 @@ export function Carousel({
   const [slideWidth, setSlideWidth] = useState(0);
   const autoPlayRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
+  // knobProps.transition resolves to undefined at animation "none" (incl.
+  // prefers-reduced-motion) — slide snaps must jump instead of smooth-scroll.
+  // GOV.UK / WCAG C39: programmatic paging uses behavior auto; no momentum
+  // coast. Do not re-read the media query here — the knob already carries it.
+  const animateSnaps = Boolean(knobProps.transition);
   const scrollToSlide = useCallback(
     (index: number) => {
       if (!trackRef.current) return;
       if (index < 0 || index >= slideCount) return;
       const offset = index * (slideWidth + gapPx);
-      trackRef.current.scrollTo({ x: offset, animated: true });
+      trackRef.current.scrollTo({ x: offset, animated: animateSnaps });
     },
-    [slideCount, slideWidth, gapPx],
+    [slideCount, slideWidth, gapPx, animateSnaps],
   );
 
   const goToSlide = useCallback(
@@ -183,10 +241,18 @@ export function Carousel({
     [activeIndex, slideCount, onSlideChange, slideWidth, gapPx],
   );
 
-  // Auto-play
+  // Auto-play is A-CONTINUOUS: stop at animation none / PRM (Carousel
+  // invariant). Manual paging still works; it just jumps. Embla Autoplay +
+  // W3C APG: pause while hovered or while focus is inside the carousel.
   useEffect(() => {
-    if (autoPlay > 0) {
+    if (autoPlay > 0 && animateSnaps) {
       autoPlayRef.current = setInterval(() => {
+        if (hoverPauseRef.current) return;
+        const root = rootRef.current;
+        if (isWeb && typeof document !== "undefined" && root) {
+          const active = document.activeElement;
+          if (active && root.contains(active)) return;
+        }
         goNext();
       }, autoPlay);
       return () => {
@@ -195,7 +261,7 @@ export function Carousel({
         }
       };
     }
-  }, [autoPlay, goNext]);
+  }, [autoPlay, goNext, animateSnaps]);
 
   // Anchor the active slide whenever geometry changes: the first measure
   // (which also lands `initialSlide` — activeIndex starts there), a resize
@@ -224,96 +290,167 @@ export function Carousel({
   const PrevGlyph = isRTL ? CaretRightIcon : CaretLeftIcon;
   const NextGlyph = isRTL ? CaretLeftIcon : CaretRightIcon;
 
+  // Embla keyboard plugin / Polaris Pagination previousKeys+nextKeys / APG:
+  // arrows page the strip; Home/End jump the ends. Logical (RTL swaps the
+  // painted sides, not the keys).
+  const handleRegionKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (isTypingTarget(e.target)) return;
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        goPrev();
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        goNext();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        goToSlide(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        goToSlide(slideCount - 1);
+      }
+    },
+    [goPrev, goNext, goToSlide, slideCount],
+  );
+
+  const renderArrow = (
+    side: "prev" | "next",
+    physicalSide: "left" | "right",
+    enabled: boolean,
+    label: string,
+    Glyph: typeof CaretLeftIcon,
+    onPress: () => void,
+  ) => (
+    <ArrowButton
+      {...{ [physicalSide]: arrowEdgeInset }}
+      className="mp-carousel-arrow"
+      disabled={!enabled}
+      {...pressTargetStyle()}
+      width={arrowTargetSize}
+      height={arrowTargetSize}
+      hitSlop={arrowHitSlop}
+      {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+      {...(!enabled ? disabledState.chromeKnobProps : undefined)}
+      onPress={enabled ? onPress : undefined}
+      role="button"
+      aria-label={label}
+      aria-disabled={!enabled || undefined}
+      // Keyboard floor (Axiom 12): div[role=button] gets no native
+      // focus or Enter/Space activation — supply both. Ring is CSS on
+      // the visual (LC-71), not this hit box and not the viewport.
+      tabIndex={enabled ? 0 : -1}
+      onKeyDown={
+        ((e: KeyboardEvent) => {
+          if ((e.key === "Enter" || e.key === " ") && enabled) {
+            e.preventDefault();
+            onPress();
+          }
+        }) as unknown as () => void
+      }
+      {...({ "data-carousel-arrow": side } as Record<string, unknown>)}
+    >
+      <ArrowVisual
+        className="mp-carousel-arrow-visual"
+        width={arrowSize}
+        height={arrowSize}
+        {...knobProps.surface}
+        // ArrowVisual (styled View) omits `elevation` from its prop type;
+        // Tamagui forwards it at runtime (house Record cast).
+        {...({ elevation: knobProps.elevation } as Record<string, unknown>)}
+        // Surface is SF-CONTROL; radius stays R-BINARY (after the spread).
+        borderRadius={arrowRadius}
+        {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+        {...({ "data-carousel-arrow-visual": side } as Record<string, unknown>)}
+      >
+        <Glyph size={arrowGlyphSize} />
+      </ArrowVisual>
+    </ArrowButton>
+  );
+
   return (
-    <View>
-      <CarouselContainer {...knobProps.containerRadius}>
-        <ScrollView
-          ref={trackRef}
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          style={{ scrollSnapType: "x mandatory" } as any}
-          onScroll={handleScroll}
-          scrollEventThrottle={16}
-          onLayout={(e) => setSlideWidth(e.nativeEvent.layout.width)}
-          {...({ dataSet: { carouselTrack: "true" } } as Record<string, unknown>)}
-        >
-          <XStack gap={gap}>
-            {Children.map(children, (child, index) => (
-              <CarouselSlide
-                key={index}
-                // Measured-viewport width (LC-62), never a percentage; slides
-                // stay content-sized only for the pre-measure frame.
-                width={slideWidth > 0 ? slideWidth : undefined}
-                style={{ scrollSnapAlign: "start" } as any}
-                {...({ "data-carousel-slide": index } as Record<string, unknown>)}
-              >
-                {child}
-              </CarouselSlide>
-            ))}
-          </XStack>
-        </ScrollView>
+    <View
+      ref={rootRef as never}
+      role="region"
+      aria-roledescription="carousel"
+      aria-label={t("Carousel")}
+      onKeyDown={handleRegionKeyDown as unknown as () => void}
+      // Tamagui forwards onHoverIn/onHoverOut at runtime; the RN-flavored View
+      // prop type omits them (house Record cast).
+      {...({
+        onHoverIn: () => {
+          hoverPauseRef.current = true;
+        },
+        onHoverOut: () => {
+          hoverPauseRef.current = false;
+        },
+      } as Record<string, unknown>)}
+    >
+      {/* Embla: arrows are siblings of the clipping viewport so the LC-71
+          halo is not severed by overflow:hidden (Apple focus-halo on the
+          control, not the scroller). */}
+      <CarouselStage>
+        <CarouselContainer {...knobProps.containerRadius}>
+          <ScrollView
+            ref={trackRef}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            style={
+              {
+                scrollSnapType: "x mandatory",
+                // Defeat inherited `scroll-behavior: smooth` when the knob is off.
+                ...(!animateSnaps ? { scrollBehavior: "auto" } : {}),
+              } as any
+            }
+            onScroll={handleScroll}
+            scrollEventThrottle={16}
+            onLayout={(e) => setSlideWidth(e.nativeEvent.layout.width)}
+            tabIndex={-1}
+            // LC-71: the viewport is not a control. Never a keyboard stop,
+            // never a UA outline — rings live on arrows and dots.
+            outlineWidth={0}
+            outlineStyle={"none" as any}
+            focusStyle={{ outlineWidth: 0, outlineStyle: "none" as any }}
+            focusVisibleStyle={{ outlineWidth: 0, outlineStyle: "none" as any }}
+            {...({ dataSet: { carouselTrack: "true" } } as Record<string, unknown>)}
+          >
+            <XStack gap={gap}>
+              {Children.map(children, (child, index) => (
+                <CarouselSlide
+                  key={index}
+                  // Measured-viewport width (LC-62), never a percentage; slides
+                  // stay content-sized only for the pre-measure frame.
+                  width={slideWidth > 0 ? slideWidth : undefined}
+                  style={{ scrollSnapAlign: "start" } as any}
+                  aria-roledescription="slide"
+                  aria-label={withInterp(t("Slide {{number}} of {{total}}"), {
+                    number: index + 1,
+                    total: slideCount,
+                  })}
+                  {...({ "data-carousel-slide": index } as Record<string, unknown>)}
+                >
+                  {child}
+                </CarouselSlide>
+              ))}
+            </XStack>
+          </ScrollView>
+        </CarouselContainer>
 
         {showArrows && slideCount > 1 && (
           <>
-            <ArrowButton
-              {...{ [prevSide]: arrowEdgeInset }}
-              disabled={!canGoPrev}
-              width={arrowTargetSize}
-              height={arrowTargetSize}
-              {...(knobProps.transition ? { transition: knobProps.transition } : {})}
-              onPress={canGoPrev ? goPrev : undefined}
-              role="button"
-              aria-label={t("Previous slide")}
-              aria-disabled={!canGoPrev || undefined}
-              // Keyboard floor (Axiom 12): div[role=button] gets no native
-              // focus or Enter/Space activation — supply both + house ring.
-              tabIndex={canGoPrev ? 0 : -1}
-              focusVisibleStyle={{ ...control.focusVisibleKnobProps }}
-              onKeyDown={
-                ((e: KeyboardEvent) => {
-                  if ((e.key === "Enter" || e.key === " ") && canGoPrev) {
-                    e.preventDefault();
-                    goPrev();
-                  }
-                }) as unknown as () => void
-              }
-            >
-              <ArrowVisual width={arrowSize} height={arrowSize} borderRadius={arrowRadius}>
-                <PrevGlyph size={arrowGlyphSize} />
-              </ArrowVisual>
-            </ArrowButton>
-            <ArrowButton
-              {...{ [nextSide]: arrowEdgeInset }}
-              disabled={!canGoNext}
-              width={arrowTargetSize}
-              height={arrowTargetSize}
-              {...(knobProps.transition ? { transition: knobProps.transition } : {})}
-              onPress={canGoNext ? goNext : undefined}
-              role="button"
-              aria-label={t("Next slide")}
-              aria-disabled={!canGoNext || undefined}
-              tabIndex={canGoNext ? 0 : -1}
-              focusVisibleStyle={{ ...control.focusVisibleKnobProps }}
-              onKeyDown={
-                ((e: KeyboardEvent) => {
-                  if ((e.key === "Enter" || e.key === " ") && canGoNext) {
-                    e.preventDefault();
-                    goNext();
-                  }
-                }) as unknown as () => void
-              }
-            >
-              <ArrowVisual width={arrowSize} height={arrowSize} borderRadius={arrowRadius}>
-                <NextGlyph size={arrowGlyphSize} />
-              </ArrowVisual>
-            </ArrowButton>
+            {renderArrow("prev", prevSide, canGoPrev, t("Previous slide"), PrevGlyph, goPrev)}
+            {renderArrow("next", nextSide, canGoNext, t("Next slide"), NextGlyph, goNext)}
           </>
         )}
-      </CarouselContainer>
+      </CarouselStage>
 
       {showDots && slideCount > 1 && (
         <DotsWrapper>
-          <DotIndicator total={slideCount} activeIndex={activeIndex} onChange={goToSlide} />
+          <DotIndicator
+            total={slideCount}
+            activeIndex={activeIndex}
+            onChange={goToSlide}
+            transition={knobProps.transition as string | undefined}
+          />
         </DotsWrapper>
       )}
     </View>