@seed-design/lynx-react 0.4.0 → 0.5.0

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,76 @@
+import * as React from "@lynx-js/react";
+
+import type { LynxAccessibilityProps, LynxStyledElementProps } from "../../types";
+import type { StyleProps } from "../../utils/styled";
+import { Box } from "../Box";
+
+export interface DividerProps
+  extends Omit<LynxStyledElementProps, "children">,
+    LynxAccessibilityProps {
+  /**
+   * @default "stroke.neutralMuted"
+   */
+  color?: StyleProps["borderColor"];
+
+  /**
+   * @default 1
+   */
+  thickness?: StyleProps["borderWidth"];
+
+  /**
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+
+  /**
+   * Adds 16px of spacing to both ends of the divider.
+   * @default false
+   */
+  inset?: boolean;
+}
+
+/**
+ * @platform Lynx
+ *
+ * 웹의 `<hr>` 대신 native `<view>`를 렌더링합니다. 구분선은 기본적으로 접근성
+ * 요소로 노출되며 `accessibility-role-description="separator"`를 사용합니다.
+ * 장식용 구분선은 `accessibility-element={false}`로 접근성 트리에서 제외하세요.
+ */
+export const Divider = React.forwardRef<unknown, DividerProps>((props, ref) => {
+  const {
+    color = "stroke.neutralMuted",
+    thickness = 1,
+    orientation = "horizontal",
+    inset = false,
+    style,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-role-description": accessibilityRoleDescription = "separator",
+    ...nativeProps
+  } = props;
+
+  const isHorizontal = orientation === "horizontal";
+
+  return (
+    <Box
+      {...nativeProps}
+      ref={ref}
+      borderColor={color}
+      borderWidth={0}
+      borderBottomWidth={isHorizontal ? thickness : 0}
+      borderRightWidth={isHorizontal ? 0 : thickness}
+      accessibility-element={accessibilityElement}
+      accessibility-role-description={accessibilityRoleDescription}
+      style={{
+        width: isHorizontal ? (inset ? "calc(100% - 32px)" : "100%") : undefined,
+        height: isHorizontal ? undefined : inset ? "calc(100% - 32px)" : "100%",
+        marginLeft: inset && isHorizontal ? "16px" : undefined,
+        marginRight: inset && isHorizontal ? "16px" : undefined,
+        marginTop: inset && !isHorizontal ? "16px" : undefined,
+        marginBottom: inset && !isHorizontal ? "16px" : undefined,
+        ...style,
+      }}
+    />
+  );
+});
+
+Divider.displayName = "Divider";

package/src/components/Divider/index.ts

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from "./Divider";

package/src/components/Icon/Icon.test.tsx

@@ -0,0 +1,129 @@
+import * as React from "@lynx-js/react";
+import { act, render, waitSchedule } from "@lynx-js/react/testing-library";
+import type { MainThread } from "@lynx-js/types";
+import { describe, expect, it } from "vitest";
+
+import type { LynxIconElementProps } from "../../types";
+import { InternalIcon } from "./Icon";
+
+const TestIcon = React.forwardRef<
+  MainThread.Element,
+  LynxIconElementProps & { children?: React.ReactNode }
+>((props, ref) => {
+  const { children, ...nativeProps } = props;
+
+  return (
+    <image {...nativeProps} {...(ref ? { "main-thread:ref": ref } : {})}>
+      {children}
+    </image>
+  );
+});
+TestIcon.displayName = "TestIcon";
+
+function getSourceAndImage() {
+  const source = elementTree.root?.querySelector<HTMLElement>("view");
+  const image = source?.querySelector<HTMLElement>("image");
+
+  if (!source || !image) {
+    throw new Error("Expected icon source and image elements to exist.");
+  }
+
+  return { source, image };
+}
+
+function installMainThreadStyleMocks(getComputedColor: () => string) {
+  let nextFrameId = 1;
+  const frames = new Map<number, FrameRequestCallback>();
+
+  lynxTestingEnv.mainThread.globalThis["SystemInfo"] = {
+    ...SystemInfo,
+    lynxSdkVersion: "3.5",
+  };
+  lynxTestingEnv.mainThread.globalThis["__GetComputedStyleByKey"] = getComputedColor;
+  lynxTestingEnv.mainThread.globalThis["requestAnimationFrame"] = (
+    callback: FrameRequestCallback,
+  ) => {
+    const frameId = nextFrameId;
+    nextFrameId += 1;
+    frames.set(frameId, callback);
+    return frameId;
+  };
+  lynxTestingEnv.mainThread.globalThis["cancelAnimationFrame"] = (frameId: number) => {
+    frames.delete(frameId);
+  };
+
+  const runNextFrame = (timestamp = 16) => {
+    const nextFrame = frames.entries().next().value;
+    if (!nextFrame) {
+      throw new Error("Expected a scheduled animation frame.");
+    }
+
+    const [frameId, callback] = nextFrame;
+    frames.delete(frameId);
+    lynxTestingEnv.switchToMainThread();
+    act(() => {
+      callback(timestamp);
+    });
+    lynxTestingEnv.switchToBackgroundThread();
+  };
+
+  return { frames, runNextFrame };
+}
+
+describe("InternalIcon", () => {
+  it("reads the updated computed color in the next frame", async () => {
+    let computedColor = "rgb(134, 139, 148)";
+    const { frames, runNextFrame } = installMainThreadStyleMocks(() => computedColor);
+
+    const renderIcon = (dependency: string) => (
+      <InternalIcon icon={<TestIcon />} className={dependency} deps={[dependency]} />
+    );
+    const { rerender } = render(renderIcon("unchecked"), {
+      enableMainThread: true,
+      enableBackgroundThread: true,
+    });
+    await waitSchedule();
+
+    const { image } = getSourceAndImage();
+    expect(frames.size).toBe(1);
+    runNextFrame();
+
+    expect(image.getAttribute("tint-color")).toBe("rgb(134, 139, 148)");
+
+    rerender(renderIcon("checked"));
+    await waitSchedule();
+
+    expect(frames.size).toBe(1);
+    expect(image.getAttribute("tint-color")).toBe("rgb(134, 139, 148)");
+
+    computedColor = "rgb(255, 102, 0)";
+    runNextFrame();
+
+    expect(image.getAttribute("tint-color")).toBe("rgb(255, 102, 0)");
+  });
+
+  it("coalesces pending frame syncs across rapid dependency changes", async () => {
+    let computedColor = "rgb(134, 139, 148)";
+    const { frames, runNextFrame } = installMainThreadStyleMocks(() => computedColor);
+    const renderIcon = (dependency: string) => (
+      <InternalIcon icon={<TestIcon />} className={dependency} deps={[dependency]} />
+    );
+    const { rerender } = render(renderIcon("unchecked"), {
+      enableMainThread: true,
+      enableBackgroundThread: true,
+    });
+    await waitSchedule();
+
+    rerender(renderIcon("checked"));
+    await waitSchedule();
+    rerender(renderIcon("unchecked-again"));
+    await waitSchedule();
+
+    expect(frames.size).toBe(1);
+
+    computedColor = "rgb(73, 80, 88)";
+    runNextFrame();
+
+    expect(getSourceAndImage().image.getAttribute("tint-color")).toBe("rgb(73, 80, 88)");
+  });
+});

package/src/components/ProgressCircle/ProgressCircle.test.tsx

@@ -0,0 +1,58 @@
+import "@testing-library/jest-dom";
+import { render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import { ProgressCircle } from "./index";
+
+vi.mock("@lynx-js/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@lynx-js/react")>();
+
+  return {
+    ...actual,
+    runOnMainThread: () => () => undefined,
+  };
+});
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+describe("ProgressCircle", () => {
+  it("renders a visible indeterminate range before the main-thread animation starts", () => {
+    render(
+      <ProgressCircle.Root>
+        <ProgressCircle.Range />
+      </ProgressCircle.Root>,
+    );
+
+    const root = getRenderedRoot();
+    const range = root.querySelector<HTMLElement>(".seed-progress-circle__range");
+    const caps = root.querySelectorAll<HTMLElement>(".seed-progress-circle__cap");
+    const animationContainer = range?.parentElement;
+
+    expect(range).toBeInTheDocument();
+    expect(animationContainer?.style.transform).not.toBe("rotate(0deg)");
+    expect(range?.style.clipPath).toMatch(/^path\("M 20 20 L 20 -1 A 21 21/);
+    expect(caps).toHaveLength(2);
+    expect(caps[1]?.style.left).not.toBe(caps[0]?.style.left);
+    expect(caps[1]?.style.top).not.toBe(caps[0]?.style.top);
+  });
+
+  it("keeps the determinate range at the requested initial value", () => {
+    render(
+      <ProgressCircle.Root minValue={0} maxValue={100} value={40}>
+        <ProgressCircle.Range />
+      </ProgressCircle.Root>,
+    );
+
+    const range = getRenderedRoot().querySelector<HTMLElement>(".seed-progress-circle__range");
+
+    expect(range?.style.clipPath).toMatch(/^path\("M 20 20 L 20 -1 A 21 21/);
+  });
+});

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -45,6 +45,37 @@ function computeRingGeometry(numSize: number) {
   return { halfSize, innerR, ringCenterR, capSize };
 }
 
+function bgCubicBezier(rawT: number, x1: number, y1: number, x2: number, y2: number): number {
+  const t = Math.max(0, Math.min(1, rawT));
+  const cx = 3 * x1;
+  const bx = 3 * (x2 - x1) - cx;
+  const ax = 1 - cx - bx;
+  let currentT = t;
+  for (let i = 0; i < 8; i++) {
+    const currentX = ((ax * currentT + bx) * currentT + cx) * currentT - t;
+    const currentDx = (3 * ax * currentT + 2 * bx) * currentT + cx;
+    if (Math.abs(currentDx) < 1e-6) break;
+    currentT = currentT - currentX / currentDx;
+  }
+  const cy = 3 * y1;
+  const by = 3 * (y2 - y1) - cy;
+  const ay = 1 - cy - by;
+  return ((ay * currentT + by) * currentT + cy) * currentT;
+}
+
+function bgSampleIndeterminate(t: number) {
+  const containerEased = bgCubicBezier(t, 0.35, 0.25, 0.65, 0.75);
+  const headEased = bgCubicBezier(t, 0.35, 0, 0.65, 1);
+  const tailEased = bgCubicBezier(t, 0.35, 0, 0.65, 0.6);
+
+  const headLength = headEased <= 0.75 ? (headEased / 0.75) * 360 : 360;
+  const tailOffset = tailEased <= 1 / 3 ? 0 : ((tailEased - 1 / 3) / (2 / 3)) * 360;
+  const arcLength = Math.max(0, headLength - tailOffset);
+  const containerDeg = containerEased * 360 + tailOffset;
+
+  return { containerDeg, arcLength };
+}
+
 function bgPieClipPath(size: number, angleDeg: number): string | undefined {
   if (angleDeg >= 360) return undefined;
   if (angleDeg <= 0) return 'path("M 0 0 Z")';
@@ -113,6 +144,7 @@ function sampleIndeterminate(t: number) {
 // --- Animation constants ---
 
 const INDETERMINATE_DURATION = 1200;
+const INDETERMINATE_INITIAL_PHASE = 1 / 6;
 const TRANSITION_DURATION = 300;
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -335,7 +367,10 @@ function IndeterminateRange({ numSize, classes }: { numSize: number; classes: Cl
       if (!startTs) startTs = Number(ts);
 
       const elapsed = ts - startTs;
-      const t = (elapsed % INDETERMINATE_DURATION) / INDETERMINATE_DURATION;
+      const t =
+        ((elapsed + INDETERMINATE_DURATION * INDETERMINATE_INITIAL_PHASE) %
+          INDETERMINATE_DURATION) /
+        INDETERMINATE_DURATION;
       const state = sampleIndeterminate(t);
 
       containerEl?.setStyleProperty("transform", `rotate(${state.containerDeg}deg)`);
@@ -373,7 +408,9 @@ function IndeterminateRange({ numSize, classes }: { numSize: number; classes: Cl
     };
   }, [numSize]);
 
-  const initialClipPath = 'path("M 0 0 Z")';
+  const initialState = bgSampleIndeterminate(INDETERMINATE_INITIAL_PHASE);
+  const initialClipPath = bgPieClipPath(numSize, initialState.arcLength);
+  const initialHeadRad = (initialState.arcLength * Math.PI) / 180;
 
   return (
     <view
@@ -382,7 +419,7 @@ function IndeterminateRange({ numSize, classes }: { numSize: number; classes: Cl
         position: "absolute",
         width: `${numSize}px`,
         height: `${numSize}px`,
-        transform: "rotate(0deg)",
+        transform: `rotate(${initialState.containerDeg}deg)`,
       }}
     >
       <view
@@ -412,8 +449,8 @@ function IndeterminateRange({ numSize, classes }: { numSize: number; classes: Cl
         style={{
           width: `${capSize}px`,
           height: `${capSize}px`,
-          left: `${halfSize - capSize / 2}px`,
-          top: `${halfSize - ringCenterR - capSize / 2}px`,
+          left: `${halfSize + ringCenterR * Math.sin(initialHeadRad) - capSize / 2}px`,
+          top: `${halfSize - ringCenterR * Math.cos(initialHeadRad) - capSize / 2}px`,
         }}
       />
     </view>

package/src/components/Stack/Stack.test.tsx

@@ -0,0 +1,67 @@
+import "@testing-library/jest-dom";
+import { render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { HStack, VStack } from "./Stack";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  const stack = root.querySelector<HTMLElement>("view");
+
+  if (!stack) {
+    throw new Error("Expected Stack root view to exist.");
+  }
+
+  return stack;
+}
+
+describe("Stack", () => {
+  it("maps a VStack gap token to row-gap", () => {
+    render(<VStack gap="x3" />);
+
+    expect(getRenderedRoot()).toHaveStyle({
+      rowGap: "var(--seed-dimension-x3)",
+    });
+    expect(getRenderedRoot().style.getPropertyValue("gap")).toBe("");
+    expect(getRenderedRoot().style.getPropertyValue("column-gap")).toBe("");
+  });
+
+  it("maps an HStack gap token to column-gap", () => {
+    render(<HStack gap="x4" />);
+
+    expect(getRenderedRoot()).toHaveStyle({
+      columnGap: "var(--seed-dimension-x4)",
+    });
+    expect(getRenderedRoot().style.getPropertyValue("gap")).toBe("");
+    expect(getRenderedRoot().style.getPropertyValue("row-gap")).toBe("");
+  });
+
+  it("keeps a numeric zero gap value", () => {
+    render(<VStack gap={0} />);
+
+    expect(getRenderedRoot()).toHaveStyle({ rowGap: "0px" });
+  });
+
+  it("keeps an arbitrary string gap value", () => {
+    render(<HStack gap="1.5rem" />);
+
+    expect(getRenderedRoot()).toHaveStyle({ columnGap: "1.5rem" });
+  });
+
+  it("keeps style gap precedence over the gap prop", () => {
+    render(<VStack gap="x3" style={{ gap: "20px" }} />);
+
+    expect(getRenderedRoot()).toHaveStyle({ rowGap: "20px" });
+  });
+
+  it("keeps an axis longhand in style above the gap prop", () => {
+    render(<VStack gap="x3" style={{ rowGap: "24px" }} />);
+
+    expect(getRenderedRoot()).toHaveStyle({ rowGap: "24px" });
+  });
+});

package/src/components/Stack/Stack.tsx

@@ -54,11 +54,25 @@ function getStackProps(props: StackProps) {
 }
 
 function useStackStyleProps(props: StackProps, flexDirection: "column" | "row") {
-  return useStyleProps({
+  const stackStyleProps = useStyleProps({
     display: "flex",
     flexDirection,
     ...getStackProps(props),
   });
+  // Lynx의 gap 단축 속성 파서는 var(...)를 0px로 확정하므로 축별 longhand를 사용합니다.
+  const { gap, ...style } = stackStyleProps.style;
+
+  if (gap == null) {
+    return stackStyleProps;
+  }
+
+  return {
+    ...stackStyleProps,
+    style: {
+      [flexDirection === "column" ? "rowGap" : "columnGap"]: gap,
+      ...style,
+    },
+  };
 }
 
 function renderStackView(

package/src/components/Tabs/Tabs.namespace.ts

@@ -0,0 +1,16 @@
+export {
+  TabsCarousel as Carousel,
+  TabsCarouselCamera as CarouselCamera,
+  TabsContent as Content,
+  TabsIndicator as Indicator,
+  TabsList as List,
+  TabsRoot as Root,
+  TabsTrigger as Trigger,
+  type TabsCarouselCameraProps as CarouselCameraProps,
+  type TabsCarouselProps as CarouselProps,
+  type TabsContentProps as ContentProps,
+  type TabsIndicatorProps as IndicatorProps,
+  type TabsListProps as ListProps,
+  type TabsRootProps as RootProps,
+  type TabsTriggerProps as TriggerProps,
+} from "./Tabs";

package/src/components/Tabs/Tabs.test.tsx

@@ -0,0 +1,181 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import * as Tabs from "./Tabs.namespace";
+
+function BasicTabs(props: {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}) {
+  return (
+    <Tabs.Root {...props}>
+      <Tabs.List>
+        <Tabs.Trigger value="one">첫 번째</Tabs.Trigger>
+        <Tabs.Trigger value="two">두 번째</Tabs.Trigger>
+        <Tabs.Indicator />
+      </Tabs.List>
+      <Tabs.Content value="one">첫 번째 콘텐츠</Tabs.Content>
+      <Tabs.Content value="two">두 번째 콘텐츠</Tabs.Content>
+    </Tabs.Root>
+  );
+}
+
+function getTrigger(container: HTMLElement, label: string) {
+  const trigger = Array.from(container.querySelectorAll<HTMLElement>(".seed-tabs__trigger")).find(
+    (element) => element.textContent === label,
+  );
+  if (!trigger) throw new Error(`Expected trigger for ${label} to exist.`);
+  return trigger;
+}
+
+describe("Tabs", () => {
+  it("renders triggers inside the list content layout container", () => {
+    const { container } = render(<BasicTabs defaultValue="one" />);
+    const list = container.querySelector(".seed-tabs__list");
+    const listContent = list?.querySelector(":scope > .seed-tabs__listContent");
+
+    expect(listContent).not.toBeNull();
+    expect(listContent?.querySelectorAll(".seed-tabs__trigger")).toHaveLength(2);
+  });
+
+  it("changes an uncontrolled value when a trigger is tapped", () => {
+    const onValueChange = vi.fn();
+    const { container } = render(<BasicTabs defaultValue="one" onValueChange={onValueChange} />);
+
+    const first = getTrigger(container, "첫 번째");
+    const second = getTrigger(container, "두 번째");
+
+    expect(first).toHaveAttribute("accessibility-value", "selected");
+    expect(second).toHaveAttribute("accessibility-value", "not selected");
+
+    fireEvent.tap(second);
+
+    expect(onValueChange).toHaveBeenCalledWith("two");
+    expect(second).toHaveAttribute("accessibility-value", "selected");
+  });
+
+  it("does not select a disabled trigger", () => {
+    const onValueChange = vi.fn();
+    const { container } = render(
+      <Tabs.Root defaultValue="one" onValueChange={onValueChange}>
+        <Tabs.List>
+          <Tabs.Trigger value="one">첫 번째</Tabs.Trigger>
+          <Tabs.Trigger value="two" disabled>
+            두 번째
+          </Tabs.Trigger>
+        </Tabs.List>
+      </Tabs.Root>,
+    );
+
+    const disabled = getTrigger(container, "두 번째");
+    fireEvent.tap(disabled);
+
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(disabled).toHaveAttribute("accessibility-traits", "disabled");
+  });
+
+  it("keeps controlled selection until the value prop changes", () => {
+    const onValueChange = vi.fn();
+    const { container, rerender } = render(<BasicTabs value="one" onValueChange={onValueChange} />);
+
+    const second = getTrigger(container, "두 번째");
+    fireEvent.tap(second);
+
+    expect(onValueChange).toHaveBeenCalledWith("two");
+    expect(second).toHaveAttribute("accessibility-value", "not selected");
+
+    rerender(<BasicTabs value="two" onValueChange={onValueChange} />);
+    expect(second).toHaveAttribute("accessibility-value", "selected");
+  });
+
+  it("keeps carousel contents as views without a carousel camera", () => {
+    const { container } = render(
+      <Tabs.Root defaultValue="one">
+        <Tabs.List>
+          <Tabs.Trigger value="one">첫 번째</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Carousel>
+          <Tabs.Content value="one">첫 번째 콘텐츠</Tabs.Content>
+        </Tabs.Carousel>
+      </Tabs.Root>,
+    );
+
+    expect(container.querySelector("viewpager-item")).toBeNull();
+    expect(container.querySelector(".seed-tabs__content")).not.toBeNull();
+  });
+
+  it("renders carousel camera contents as native viewpager items", () => {
+    const { container } = render(
+      <Tabs.Root defaultValue="one">
+        <Tabs.List>
+          <Tabs.Trigger value="one">첫 번째</Tabs.Trigger>
+          <Tabs.Trigger value="two">두 번째</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Carousel swipeable>
+          <Tabs.CarouselCamera>
+            <Tabs.Content value="one">첫 번째 콘텐츠</Tabs.Content>
+            <Tabs.Content value="two">두 번째 콘텐츠</Tabs.Content>
+          </Tabs.CarouselCamera>
+        </Tabs.Carousel>
+      </Tabs.Root>,
+    );
+
+    const pager = container.querySelector("viewpager");
+    expect(pager).not.toBeNull();
+    expect(pager?.querySelectorAll("viewpager-item")).toHaveLength(2);
+    expect(pager).toHaveAttribute("enable-scroll");
+    expect(pager).toHaveAttribute("ios-gesture-offset", "32");
+  });
+
+  it("supports a custom iOS back gesture edge width", () => {
+    const { container } = render(
+      <Tabs.Root defaultValue="one">
+        <Tabs.List>
+          <Tabs.Trigger value="one">첫 번째</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Carousel swipeable iosBackGestureEdgeWidth={48}>
+          <Tabs.CarouselCamera>
+            <Tabs.Content value="one">첫 번째 콘텐츠</Tabs.Content>
+          </Tabs.CarouselCamera>
+        </Tabs.Carousel>
+      </Tabs.Root>,
+    );
+
+    expect(container.querySelector("viewpager")).toHaveAttribute("ios-gesture-offset", "48");
+  });
+
+  it("maps pager indexes from content order when a disabled trigger has no content", () => {
+    const { container } = render(
+      <Tabs.Root defaultValue="two">
+        <Tabs.List>
+          <Tabs.Trigger value="one">첫 번째</Tabs.Trigger>
+          <Tabs.Trigger value="disabled" disabled>
+            비활성
+          </Tabs.Trigger>
+          <Tabs.Trigger value="two">두 번째</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Carousel swipeable>
+          <Tabs.CarouselCamera>
+            <Tabs.Content value="one">첫 번째 콘텐츠</Tabs.Content>
+            <Tabs.Content value="two">두 번째 콘텐츠</Tabs.Content>
+          </Tabs.CarouselCamera>
+        </Tabs.Carousel>
+      </Tabs.Root>,
+    );
+
+    const pager = container.querySelector("viewpager");
+    expect(pager).toHaveAttribute("initial-select-index", "1");
+    expect(getTrigger(container, "두 번째")).toHaveAttribute("accessibility-value", "selected");
+  });
+
+  it("exposes tab semantics through Lynx accessibility attributes", () => {
+    const { container } = render(<BasicTabs defaultValue="one" />);
+    const first = getTrigger(container, "첫 번째");
+
+    expect(first).toHaveAttribute("accessibility-role-description", "tab");
+    expect(first).toHaveAttribute("accessibility-label", "첫 번째");
+    expect(first).toHaveAttribute("accessibility-traits", "selected");
+  });
+});