@seed-design/lynx-react 0.6.3 → 0.7.0

package/src/components/BottomSheet/BottomSheet.tsx

@@ -20,7 +20,6 @@ import {
 import {
   createContext,
   forwardRef,
-  useCallback,
   useContext,
   useMemo,
   useRef,
@@ -40,6 +39,7 @@ import type {
   LynxViewRef,
 } from "../../types";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { mergeProps } from "../../utils/merge-props";
 
 type BottomSheetClassNames = ReturnType<typeof bottomSheet>;
 type LynxForwardRefComponent<T, P> = ForwardRefExoticComponent<
@@ -153,15 +153,8 @@ export const BottomSheetRoot: LynxForwardRefComponent<SheetRootRef, BottomSheetR
 
     // `SheetRoot`에 직접 ref를 넘겨 Trigger 컨텍스트와 외부 ref에 같은 인스턴스를 동기화한다.
     // `useImperativeHandle([])`은 마운트 시점 값(null)을 고정시키는 함정이 있어 사용하지 않는다.
-    const mergedRef = useCallback(
-      (value: SheetRootRef | null) => {
-        internalRef.current = value;
-        if (typeof forwardedRef === "function") {
-          forwardedRef(value);
-        } else if (forwardedRef) {
-          forwardedRef.current = value;
-        }
-      },
+    const mergedRef = useMemo(
+      () => mergeProps({ ref: internalRef }, { ref: forwardedRef }).ref,
       [forwardedRef],
     );
 
@@ -185,12 +178,10 @@ export const BottomSheetRoot: LynxForwardRefComponent<SheetRootRef, BottomSheetR
       <BottomSheetContext.Provider value={context}>
         <ClassNamesProvider value={classNames}>
           <SheetRoot
-            ref={mergedRef}
+            {...mergeProps({ ref: mergedRef, onShowChange: onOpenChange }, nativeProps)}
             show={open}
             defaultShow={defaultOpen}
-            onShowChange={onOpenChange}
             snapPoints={snapPoints ?? DEFAULT_SNAP_POINTS}
-            {...nativeProps}
           >
             {children}
           </SheetRoot>
@@ -229,8 +220,10 @@ export const BottomSheetTrigger: LynxForwardRefComponent<unknown, BottomSheetTri
 
     return (
       <view
-        {...(ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {})}
-        {...handlers}
+        {...mergeProps(
+          ref ? ({ ref: ref as LynxViewRef } as Record<string, unknown>) : {},
+          handlers,
+        )}
         className={className}
         style={style as never}
       >
@@ -296,8 +289,7 @@ export const BottomSheetContent: LynxForwardRefComponent<unknown, BottomSheetCon
 
     return (
       <SheetContent
-        {...(ref ? { ref } : {})}
-        {...restProps}
+        {...mergeProps(ref ? { ref } : {}, restProps)}
         className={clsx(classNames.content, className)}
         // `SheetContent` pins its outer view with an inline `left: 0`, which a recipe class
         // cannot outrank. Releasing it lets the positioner's `justify-content: center` place

package/src/components/Box/Box.tsx

@@ -3,6 +3,7 @@ import * as React from "@lynx-js/react";
 
 import type { LynxPressableProps, LynxStyledElementProps, LynxViewRef } from "../../types";
 import { useStyleProps, type StyleProps } from "../../utils/styled";
+import { mergeProps } from "../../utils/merge-props";
 
 /**
  * @platform Lynx
@@ -26,8 +27,7 @@ export const Box = React.forwardRef<unknown, BoxProps>((props, ref) => {
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(className)}
       style={style}
     >

package/src/components/Callout/Callout.tsx

@@ -5,6 +5,7 @@ import clsx from "clsx";
 
 import { useControllableState } from "../../hooks/useControllableState";
 import { usePressTap } from "../../hooks/usePressTap";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
 import type {
   LynxAccessibilityProps,
   LynxPressableProps,
@@ -15,6 +16,7 @@ import type {
 } from "../../types";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
 import { IconSlotProvider } from "../Icon/Icon";
+import { mergeProps } from "../../utils/merge-props";
 
 const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(callout);
 
@@ -46,7 +48,7 @@ function useCalloutContext(consumer: string) {
  * - 웹 focus ring은 지원하지 않습니다.
  */
 export interface CalloutRootProps
-  extends Omit<CalloutVariantProps, "pressed">,
+  extends Omit<CalloutVariantProps, "pressed" | "interactive">,
     LynxStyledElementProps,
     LynxPressableProps,
     LynxAccessibilityProps {
@@ -75,12 +77,19 @@ export const CalloutRoot = React.forwardRef<unknown, CalloutRootProps>((props, r
     defaultValue: defaultOpen,
   });
   const isInteractive = bindtap != null || mainThreadBindtap != null;
-  const pressTap = usePressTap({
+  const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressTapHandlers } =
+    usePressTap({
+      disabled: !isInteractive,
+      onTap: bindtap,
+      mainThreadOnTap: mainThreadBindtap,
+    });
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
     disabled: !isInteractive,
-    onTap: bindtap,
-    mainThreadOnTap: mainThreadBindtap,
+    onTouchStart: bindtouchstart,
+    onTouchEnd: bindtouchend,
+    onTouchCancel: bindtouchcancel,
   });
-  const classNames = callout({ ...variantProps, pressed: pressTap.pressed });
+  const classNames = callout({ ...variantProps, pressed, interactive: isInteractive });
   const dismiss = useMemoizedFn(() => {
     if (!open) return;
 
@@ -94,9 +103,9 @@ export const CalloutRoot = React.forwardRef<unknown, CalloutRootProps>((props, r
         prefixIcon: classNames.prefixIcon,
         suffixIcon: classNames.suffixIcon,
       },
-      deps: [variantProps.tone ?? "neutral", pressTap.pressed],
+      deps: [variantProps.tone ?? "neutral", pressed],
     }),
-    [classNames.prefixIcon, classNames.suffixIcon, pressTap.pressed, variantProps.tone],
+    [classNames.prefixIcon, classNames.suffixIcon, pressed, variantProps.tone],
   );
 
   if (!open) return null;
@@ -106,13 +115,18 @@ export const CalloutRoot = React.forwardRef<unknown, CalloutRootProps>((props, r
       <ClassNamesProvider value={classNames}>
         <IconSlotProvider value={iconSlotContextValue}>
           <view
-            {...(ref ? { ref: ref as LynxViewRef } : {})}
-            {...nativeProps}
-            {...(isInteractive ? pressTap : {})}
+            {...mergeProps(
+              ref ? { ref: ref as LynxViewRef } : {},
+              isInteractive ? pressTapHandlers : {},
+              isInteractive ? scaleFeedbackTargetProps : {},
+              isInteractive ? scaleFeedbackTriggerProps : {},
+              nativeProps,
+            )}
             accessibility-element={accessibilityElement ?? (isInteractive ? true : undefined)}
             accessibility-traits={accessibilityTraits ?? (isInteractive ? "button" : undefined)}
             className={clsx(classNames.root, className)}
             style={style}
+            {...(isInteractive ? { flatten: false } : {})}
           >
             {children}
           </view>
@@ -133,8 +147,7 @@ export const CalloutContent = React.forwardRef<unknown, CalloutContentProps>((pr
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(classNames.content, className)}
       style={style}
     >
@@ -154,8 +167,7 @@ export const CalloutTitle = React.forwardRef<unknown, CalloutTitleProps>((props,
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(classNames.title, className)}
       style={style}
     >
@@ -177,8 +189,7 @@ export const CalloutDescription = React.forwardRef<unknown, CalloutDescriptionPr
 
     return (
       <text
-        {...(ref ? { ref: ref as LynxTextRef } : {})}
-        {...nativeProps}
+        {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
         className={clsx(classNames.description, className)}
         style={style}
       >
@@ -210,8 +221,7 @@ export const CalloutLink = React.forwardRef<unknown, CalloutLinkProps>((props, r
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       accessibility-element={accessibilityElement}
       accessibility-traits={accessibilityTraits}
       className={clsx(classNames.link, className)}
@@ -226,7 +236,8 @@ CalloutLink.displayName = "CalloutLink";
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface CalloutCloseButtonProps
-  extends LynxStyledElementProps,
+  // Keep the scale target's Android View even if shared props later expose flatten.
+  extends Omit<LynxStyledElementProps, "flatten">,
     LynxPressableProps,
     LynxAccessibilityProps {}
 
@@ -248,6 +259,7 @@ export const CalloutCloseButton = React.forwardRef<unknown, CalloutCloseButtonPr
       bindtap?.(event);
       dismiss();
     });
+    const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback();
 
     if (process.env.NODE_ENV !== "production" && accessibilityElement && !accessibilityLabel) {
       console.warn("CalloutCloseButton requires `accessibility-label` for accessibility.");
@@ -255,14 +267,19 @@ export const CalloutCloseButton = React.forwardRef<unknown, CalloutCloseButtonPr
 
     return (
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
-        {...nativeProps}
-        bindtap={handleTap}
+        {...mergeProps(
+          { bindtap: handleTap },
+          ref ? { ref: ref as LynxViewRef } : {},
+          scaleFeedbackTargetProps,
+          scaleFeedbackTriggerProps,
+          nativeProps,
+        )}
         accessibility-element={accessibilityElement}
         accessibility-label={accessibilityLabel}
         accessibility-traits={accessibilityTraits}
         className={clsx(classNames.closeButton, className)}
         style={style}
+        flatten={false}
       >
         {children}
       </view>

package/src/components/Checkbox/Checkbox.test.tsx

@@ -79,6 +79,50 @@ function getCheckboxBackground() {
 }
 
 describe("Checkbox", () => {
+  it("exposes checkbox accessibility state", () => {
+    const { rerender } = render(<Checkbox.Root />);
+
+    expect(getCheckboxRoot()).toHaveAttribute("accessibility-element", "true");
+    expect(getCheckboxRoot()).toHaveAttribute("accessibility-role-description", "checkbox");
+    expect(getCheckboxRoot()).toHaveAttribute("accessibility-value", "not checked");
+    expect(getCheckboxRoot()).not.toHaveAttribute("accessibility-traits");
+
+    rerender(<Checkbox.Root checked disabled />);
+
+    expect(getCheckboxRoot()).toHaveAttribute("accessibility-value", "checked");
+    expect(getCheckboxRoot()).toHaveAttribute("accessibility-traits", "disabled");
+  });
+
+  it("prefers explicit accessibility props over defaults", () => {
+    render(
+      <Checkbox.Root
+        checked
+        disabled
+        accessibility-element={false}
+        accessibility-role-description="custom checkbox"
+        accessibility-value="custom value"
+        accessibility-traits="button"
+      />,
+    );
+
+    const root = getCheckboxRoot();
+
+    expect(root).toHaveAttribute("accessibility-element", "false");
+    expect(root).toHaveAttribute("accessibility-role-description", "custom checkbox");
+    expect(root).toHaveAttribute("accessibility-value", "custom value");
+    expect(root).toHaveAttribute("accessibility-traits", "button");
+  });
+
+  it("applies the checkbox size class to the control", () => {
+    render(
+      <Checkbox.Root size="large">
+        <Checkbox.Control />
+      </Checkbox.Root>,
+    );
+
+    expect(getCheckboxControl()).toHaveClass("seed-checkbox__control--size_large");
+  });
+
   it("keeps each ghost press color stable through release in both toggle directions", () => {
     const onCheckedChange = vi.fn();
 

package/src/components/Checkbox/Checkbox.tsx

@@ -9,8 +9,11 @@ import type { CheckmarkVariantProps } from "@seed-design/lynx-css/recipes/checkm
 import { checkboxGroup } from "@seed-design/lynx-css/recipes/checkbox-group";
 
 import { useControllableState } from "../../hooks/useControllableState";
+import { ScaleFeedbackContentContext } from "../../contexts";
 import { usePressTap } from "../../hooks/usePressTap";
+import { useScaleFeedback, type ScaleFeedbackTargetProps } from "../../hooks/useScaleFeedback";
 import type {
+  LynxAccessibilityProps,
   LynxIconElementProps,
   LynxStyledElementProps,
   LynxTextRef,
@@ -18,6 +21,7 @@ import type {
 } from "../../types";
 import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
 import { InternalIcon } from "../Icon/Icon";
+import { mergeProps } from "../../utils/merge-props";
 
 /**
  * @platform Lynx
@@ -43,6 +47,7 @@ interface CheckboxContextValue {
   checkboxVariantProps: CheckboxVariantProps;
   checkmarkVariantProps: CheckmarkVariantProps;
   toggle: () => void;
+  scaleFeedbackTargetProps: ScaleFeedbackTargetProps;
 }
 
 const CheckboxContext = React.createContext<CheckboxContextValue | null>(null);
@@ -75,7 +80,8 @@ function useCheckmarkControlContext(consumer: string): CheckmarkControlContextVa
 export interface CheckboxRootProps
   extends CheckboxVariantProps,
     Omit<CheckmarkVariantProps, "size" | "checked" | "disabled" | "indeterminate">,
-    LynxStyledElementProps {
+    LynxStyledElementProps,
+    LynxAccessibilityProps {
   checked?: boolean;
   defaultChecked?: boolean;
   indeterminate?: boolean;
@@ -94,8 +100,15 @@ export const CheckboxRoot = React.forwardRef<unknown, CheckboxRootProps>((props,
     onCheckedChange,
     ...restProps
   } = props;
-  const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, nativeProps] =
+  const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, restNativeProps] =
     splitMultipleVariantsProps(restProps, { checkbox, checkmark });
+  const {
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-role-description": accessibilityRoleDescription = "checkbox",
+    "accessibility-traits": accessibilityTraits,
+    "accessibility-value": accessibilityValue,
+    ...nativeProps
+  } = restNativeProps;
 
   const [checked, setChecked] = useControllableState({
     value: checkedProp,
@@ -106,17 +119,20 @@ export const CheckboxRoot = React.forwardRef<unknown, CheckboxRootProps>((props,
   const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
 
   const pressSelectionRef = React.useRef({ checked, indeterminate });
-  const { pressed, bindtouchstart, ...pressHandlers } = usePressTap({
+  const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
     disabled,
     onTap: toggle,
   });
-  const handleTouchStart = React.useCallback(
-    (...args: Parameters<typeof bindtouchstart>) => {
-      pressSelectionRef.current = { checked, indeterminate };
-      bindtouchstart(...args);
-    },
-    [bindtouchstart, checked, indeterminate],
-  );
+  const handlePressStart = React.useCallback(() => {
+    pressSelectionRef.current = { checked, indeterminate };
+    bindtouchstart();
+  }, [bindtouchstart, checked, indeterminate]);
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+    disabled,
+    onTouchStart: handlePressStart,
+    onTouchEnd: bindtouchend,
+    onTouchCancel: bindtouchcancel,
+  });
 
   const rootClassName = checkbox({ ...checkboxVariantProps, disabled }).root;
 
@@ -131,6 +147,7 @@ export const CheckboxRoot = React.forwardRef<unknown, CheckboxRootProps>((props,
       checkboxVariantProps,
       checkmarkVariantProps,
       toggle,
+      scaleFeedbackTargetProps,
     }),
     [
       checked,
@@ -140,17 +157,24 @@ export const CheckboxRoot = React.forwardRef<unknown, CheckboxRootProps>((props,
       checkboxVariantProps,
       checkmarkVariantProps,
       toggle,
+      scaleFeedbackTargetProps,
     ],
   );
 
   return (
     <CheckboxContext.Provider value={contextValue}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(
+          ref ? { ref: ref as LynxViewRef } : {},
+          scaleFeedbackTriggerProps,
+          pressHandlers,
+          nativeProps,
+        )}
         className={clsx(rootClassName, className)}
-        bindtouchstart={handleTouchStart}
-        {...pressHandlers}
-        {...nativeProps}
+        accessibility-element={accessibilityElement}
+        accessibility-role-description={accessibilityRoleDescription}
+        accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : undefined)}
+        accessibility-value={accessibilityValue ?? (checked ? "checked" : "not checked")}
       >
         {children}
       </view>
@@ -169,6 +193,7 @@ export const CheckboxControl = React.forwardRef<unknown, CheckboxControlProps>((
   const [variantProps, restProps] = checkmark.splitVariantProps(props);
   const { children, className, ...nativeProps } = restProps;
   const context = useCheckboxContext("CheckboxControl");
+  const hasScaledContent = React.useContext(ScaleFeedbackContentContext);
   const checkmarkVariantProps: CheckmarkVariantProps = {
     ...context.checkmarkVariantProps,
     ...variantProps,
@@ -178,6 +203,10 @@ export const CheckboxControl = React.forwardRef<unknown, CheckboxControlProps>((
     pressed: context.pressed,
   };
   const classes = checkmark(checkmarkVariantProps);
+  const checkboxControlClassName = checkbox({
+    ...context.checkboxVariantProps,
+    disabled: context.disabled,
+  }).control;
 
   // Lynx는 opaque color와 transparent black 사이의 background-color를 보간할 때
   // 중간 RGB가 검게 탁해진다. ghost root는 투명 상태로 고정하고 별도 배경의
@@ -204,9 +233,13 @@ export const CheckboxControl = React.forwardRef<unknown, CheckboxControlProps>((
       value={{ iconClassName: classes.icon, checkmarkVariantProps }}
     >
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
-        className={clsx(rootClassName, className)}
-        {...nativeProps}
+        {...mergeProps(
+          ref ? { ref: ref as LynxViewRef } : {},
+          !hasScaledContent ? context.scaleFeedbackTargetProps : {},
+          nativeProps,
+        )}
+        className={clsx(checkboxControlClassName, rootClassName, className)}
+        {...(!hasScaledContent ? { flatten: false } : {})}
       >
         {isGhost ? <view className={pressStartClasses.background} /> : null}
         {children}
@@ -285,9 +318,8 @@ export const CheckboxLabel = React.forwardRef<unknown, CheckboxLabelProps>((prop
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(labelClassName, className)}
-      {...nativeProps}
     >
       {children}
     </text>
@@ -305,9 +337,8 @@ export const CheckboxGroup = React.forwardRef<unknown, CheckboxGroupProps>((prop
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(classes.root, className)}
-      {...nativeProps}
     >
       {children}
     </view>

package/src/components/Chip/Chip.test.tsx

@@ -38,6 +38,7 @@ describe("Chip", () => {
 
     expect(root).toHaveClass("seed-chip__root--size_large");
     expect(root).toHaveClass("seed-chip__root--variant_outlineStrong");
+    expect(root).toHaveAttribute("accessibility-role-description", "button");
     expect(label).toHaveTextContent("버튼 칩");
     expect(label).toHaveClass("seed-chip__label--size_large");
   });
@@ -52,12 +53,15 @@ describe("Chip", () => {
 
     const root = getChipRoot();
     expect(root).toHaveClass("seed-chip__root--selected_false");
+    expect(root).toHaveAttribute("accessibility-role-description", "toggle");
+    expect(root).toHaveAttribute("accessibility-value", "not checked");
 
     fireEvent.tap(root);
 
     expect(onCheckedChange).toHaveBeenCalledWith(true);
     expect(getChipRoot()).toHaveClass("seed-chip__root--selected_true");
-    expect(getChipRoot()).toHaveAttribute("accessibility-traits", "selected");
+    expect(getChipRoot()).toHaveAttribute("accessibility-role-description", "toggle");
+    expect(getChipRoot()).toHaveAttribute("accessibility-value", "checked");
   });
 
   it("does not toggle when disabled", () => {
@@ -92,6 +96,10 @@ describe("Chip", () => {
     const roots = getRenderedRoot().querySelectorAll(".seed-chip__root");
     expect(roots[0]).toHaveClass("seed-chip__root--selected_true");
     expect(roots[1]).toHaveClass("seed-chip__root--selected_false");
+    expect(roots[0]).toHaveAttribute("accessibility-role-description", "radio");
+    expect(roots[0]).toHaveAttribute("accessibility-value", "selected");
+    expect(roots[1]).toHaveAttribute("accessibility-role-description", "radio");
+    expect(roots[1]).toHaveAttribute("accessibility-value", "not selected");
 
     fireEvent.tap(roots[1] as HTMLElement);
 
@@ -99,6 +107,47 @@ describe("Chip", () => {
     const updatedRoots = getRenderedRoot().querySelectorAll(".seed-chip__root");
     expect(updatedRoots[0]).toHaveClass("seed-chip__root--selected_false");
     expect(updatedRoots[1]).toHaveClass("seed-chip__root--selected_true");
+    expect(updatedRoots[0]).toHaveAttribute("accessibility-role-description", "radio");
+    expect(updatedRoots[0]).toHaveAttribute("accessibility-value", "not selected");
+    expect(updatedRoots[1]).toHaveAttribute("accessibility-role-description", "radio");
+    expect(updatedRoots[1]).toHaveAttribute("accessibility-value", "selected");
+  });
+
+  it("prefers custom accessibility props to defaults", () => {
+    render(
+      <view>
+        <Chip.Button
+          disabled
+          accessibility-role-description="custom button"
+          accessibility-traits="link"
+        />
+        <Chip.Toggle
+          disabled
+          defaultChecked
+          accessibility-role-description="custom toggle"
+          accessibility-traits="link"
+          accessibility-value="custom checked"
+        />
+        <Chip.RadioRoot defaultValue="selected" disabled>
+          <Chip.RadioItem
+            value="selected"
+            accessibility-role-description="custom radio"
+            accessibility-traits="link"
+            accessibility-value="custom selected"
+          />
+        </Chip.RadioRoot>
+      </view>,
+    );
+
+    const roots = getRenderedRoot().querySelectorAll(".seed-chip__root");
+    expect(roots[0]).toHaveAttribute("accessibility-role-description", "custom button");
+    expect(roots[0]).toHaveAttribute("accessibility-traits", "link");
+    expect(roots[1]).toHaveAttribute("accessibility-role-description", "custom toggle");
+    expect(roots[1]).toHaveAttribute("accessibility-traits", "link");
+    expect(roots[1]).toHaveAttribute("accessibility-value", "custom checked");
+    expect(roots[2]).toHaveAttribute("accessibility-role-description", "custom radio");
+    expect(roots[2]).toHaveAttribute("accessibility-traits", "link");
+    expect(roots[2]).toHaveAttribute("accessibility-value", "custom selected");
   });
 
   it("requires radio items to be rendered inside a radio root", () => {