@seed-design/lynx-react 0.6.2 → 0.7.0

package/src/components/Menu/index.ts

@@ -0,0 +1,31 @@
+export {
+  MenuAnchor,
+  MenuContent,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuItemBody,
+  MenuItemDescription,
+  MenuItemLabel,
+  MenuPrefixIcon,
+  MenuRoot,
+  MenuScrollArea,
+  MenuSuffixIcon,
+  MenuTrigger,
+  type MenuAnchorProps,
+  type MenuContentProps,
+  type MenuGroupLabelProps,
+  type MenuGroupProps,
+  type MenuItemBodyProps,
+  type MenuItemDescriptionProps,
+  type MenuItemLabelProps,
+  type MenuItemProps,
+  type MenuOpenChangeDetails,
+  type MenuOpenChangeReason,
+  type MenuPlacement,
+  type MenuRootProps,
+  type MenuScrollAreaProps,
+  type MenuTriggerProps,
+} from "./Menu";
+
+export * as Menu from "./Menu.namespace";

package/src/components/NotificationBadge/NotificationBadge.tsx

@@ -9,11 +9,8 @@ import {
 import clsx from "clsx";
 import * as React from "@lynx-js/react";
 
-import type {
-  LynxAccessibilityProps,
-  LynxStyledElementProps,
-  LynxViewRef,
-} from "../../types";
+import type { LynxAccessibilityProps, LynxStyledElementProps, LynxViewRef } from "../../types";
+import { mergeProps } from "../../utils/merge-props";
 
 const NotificationBadgeContext = React.createContext<NotificationBadgeVariantProps | null>(null);
 
@@ -39,8 +36,7 @@ export const NotificationBadge = React.forwardRef<unknown, NotificationBadgeProp
 
     return (
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
-        {...nativeProps}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         className={clsx(classes.root, className)}
       >
         <text className={classes.label} text-single-line-vertical-align="center">
@@ -68,8 +64,7 @@ export const NotificationBadgePositioner = React.forwardRef<
   return (
     <NotificationBadgeContext.Provider value={contextValue}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
-        {...nativeProps}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         className={clsx(notificationBadgePositioner(variantProps), className)}
       >
         {children}

package/src/components/PageBanner/PageBanner.test.tsx

@@ -45,6 +45,9 @@ describe("PageBanner", () => {
     const root = getPageBannerRoot();
 
     expect(root).toHaveClass("seed-page-banner__root--tone_neutral-variant_weak");
+    const closeButton = root.querySelector(".seed-page-banner__closeButton");
+    expect(closeButton?.parentElement).toBe(root);
+    expect(closeButton).toHaveAttribute("flatten", "false");
     expect(root.querySelector(".seed-page-banner__content")?.tagName.toLowerCase()).toBe("view");
     expect(root.querySelector(".seed-page-banner__body")?.tagName.toLowerCase()).toBe("text");
     expect(root.querySelector(".seed-page-banner__title")).toHaveClass(

package/src/components/PageBanner/PageBanner.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,8 @@ import type {
 } from "../../types";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
 import { IconSlotProvider } from "../Icon/Icon";
+import { ScaleFeedback } from "../ScaleFeedback";
+import { mergeProps } from "../../utils/merge-props";
 
 const { ClassNamesProvider, PropsProvider, useClassNames, useProps } =
   createSlotRecipeContext(pageBanner);
@@ -42,12 +45,12 @@ function usePageBannerContext(consumer: string) {
 /**
  * @platform Lynx
  *
- * 웹 대비 차이:
- * - `asChild`와 DOM 이벤트 대신 Lynx native `<view>`와 `bindtap`을 사용합니다.
- * - 웹 focus ring과 동적 scale feedback은 지원하지 않습니다.
+ * Differences from React Web:
+ * - Uses Lynx native `<view>` and `bindtap` instead of `asChild` and DOM events.
+ * - Does not provide a web focus ring.
  */
 export interface PageBannerRootProps
-  extends Omit<PageBannerVariantProps, "pressed" | "closeButtonPressed">,
+  extends Omit<PageBannerVariantProps, "pressed" | "closeButtonPressed" | "interactive">,
     LynxStyledElementProps,
     LynxPressableProps,
     LynxAccessibilityProps {
@@ -91,7 +94,11 @@ export const PageBannerRoot = React.forwardRef<unknown, PageBannerRootProps>((pr
     onTap: bindtap,
     mainThreadOnTap: mainThreadBindtap,
   });
-  const classNames = pageBanner({ ...variantProps, pressed: pressTap.pressed });
+  const classNames = pageBanner({
+    ...variantProps,
+    pressed: pressTap.pressed,
+    interactive: isInteractive,
+  });
   const dismiss = useMemoizedFn(() => {
     if (!open) return;
 
@@ -124,9 +131,11 @@ export const PageBannerRoot = React.forwardRef<unknown, PageBannerRootProps>((pr
         <PropsProvider value={variantProps}>
           <IconSlotProvider value={iconSlotContextValue}>
             <view
-              {...(ref ? { ref: ref as LynxViewRef } : {})}
-              {...nativeProps}
-              {...(isInteractive ? pressTap : {})}
+              {...mergeProps(
+                ref ? { ref: ref as LynxViewRef } : {},
+                isInteractive ? pressTap : {},
+                nativeProps,
+              )}
               accessibility-element={accessibilityElement ?? (isInteractive ? true : undefined)}
               accessibility-traits={accessibilityTraits ?? (isInteractive ? "button" : undefined)}
               className={clsx(classNames.root, className)}
@@ -152,8 +161,7 @@ export const PageBannerContent = React.forwardRef<unknown, PageBannerContentProp
 
   return (
     <view
-      {...(ref ? { ref: ref as LynxViewRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
       className={clsx(classNames.content, className)}
       style={style}
     >
@@ -173,8 +181,7 @@ export const PageBannerBody = React.forwardRef<unknown, PageBannerBodyProps>((pr
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(classNames.body, className)}
       style={style}
     >
@@ -194,8 +201,7 @@ export const PageBannerTitle = React.forwardRef<unknown, PageBannerTitleProps>((
 
   return (
     <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
-      {...nativeProps}
+      {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
       className={clsx(classNames.title, className)}
       style={style}
     >
@@ -219,8 +225,7 @@ export const PageBannerDescription = React.forwardRef<unknown, PageBannerDescrip
 
     return (
       <text
-        {...(ref ? { ref: ref as LynxTextRef } : {})}
-        {...nativeProps}
+        {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
         className={clsx(classNames.description, className)}
         style={style}
       >
@@ -250,16 +255,17 @@ export const PageBannerButton = React.forwardRef<unknown, PageBannerButtonProps>
   const classNames = useClassNames();
 
   return (
-    <text
-      {...(ref ? { ref: ref as LynxTextRef } : {})}
-      {...nativeProps}
-      accessibility-element={accessibilityElement}
-      accessibility-traits={accessibilityTraits}
-      className={clsx(classNames.button, className)}
-      style={style}
-    >
-      {children}
-    </text>
+    <ScaleFeedback>
+      <text
+        {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
+        accessibility-element={accessibilityElement}
+        accessibility-traits={accessibilityTraits}
+        className={clsx(classNames.button, className)}
+        style={style}
+      >
+        {children}
+      </text>
+    </ScaleFeedback>
   );
 });
 PageBannerButton.displayName = "PageBannerButton";
@@ -267,7 +273,8 @@ PageBannerButton.displayName = "PageBannerButton";
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface PageBannerCloseButtonProps
-  extends LynxStyledElementProps,
+  // Keep the scale target's Android View even if shared props later expose flatten.
+  extends Omit<LynxStyledElementProps, "flatten">,
     LynxPressableProps,
     LynxAccessibilityProps {}
 
@@ -290,29 +297,26 @@ export const PageBannerCloseButton = React.forwardRef<unknown, PageBannerCloseBu
       bindtap?.(event);
       dismiss();
     });
-    const pressTap = usePressTap({
-      onTap: handleTap,
-      mainThreadOnTap: mainThreadBindtap,
+    const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressTapHandlers } =
+      usePressTap({
+        onTap: handleTap,
+        mainThreadOnTap: mainThreadBindtap,
+      });
+    const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+      onTouchStart: bindtouchstart,
+      onTouchEnd: bindtouchend,
+      onTouchCancel: bindtouchcancel,
     });
     const classNames = pageBanner({
       ...parentVariantProps,
-      closeButtonPressed: pressTap.pressed,
+      closeButtonPressed: pressed,
     });
     const iconSlotContextValue = React.useMemo(
       () => ({
         classNames: { suffixIcon: classNames.closeButtonIcon },
-        deps: [
-          parentVariantProps.tone ?? "neutral",
-          parentVariantProps.variant ?? "weak",
-          pressTap.pressed,
-        ],
+        deps: [parentVariantProps.tone ?? "neutral", parentVariantProps.variant ?? "weak", pressed],
       }),
-      [
-        classNames.closeButtonIcon,
-        parentVariantProps.tone,
-        parentVariantProps.variant,
-        pressTap.pressed,
-      ],
+      [classNames.closeButtonIcon, parentVariantProps.tone, parentVariantProps.variant, pressed],
     );
 
     if (process.env.NODE_ENV !== "production" && accessibilityElement && !accessibilityLabel) {
@@ -322,14 +326,19 @@ export const PageBannerCloseButton = React.forwardRef<unknown, PageBannerCloseBu
     return (
       <IconSlotProvider value={iconSlotContextValue}>
         <view
-          {...(ref ? { ref: ref as LynxViewRef } : {})}
-          {...nativeProps}
-          {...pressTap}
+          {...mergeProps(
+            ref ? { ref: ref as LynxViewRef } : {},
+            pressTapHandlers,
+            scaleFeedbackTriggerProps,
+            scaleFeedbackTargetProps,
+            nativeProps,
+          )}
           accessibility-element={accessibilityElement}
           accessibility-label={accessibilityLabel}
           accessibility-traits={accessibilityTraits}
           className={clsx(classNames.closeButton, className)}
           style={style}
+          flatten={false}
         >
           {children}
         </view>

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

@@ -23,7 +23,55 @@ function getRenderedRoot() {
   return root;
 }
 
+function getProgressCircleRoot() {
+  const progressCircleRoot = getRenderedRoot().firstElementChild;
+
+  if (!progressCircleRoot) {
+    throw new Error("Expected ProgressCircle to render a root element.");
+  }
+
+  return progressCircleRoot as HTMLElement;
+}
+
 describe("ProgressCircle", () => {
+  it("provides determinate progress accessibility values without rounding", () => {
+    render(<ProgressCircle.Root minValue={-0.25} maxValue={1.75} value={0.3333333333333333} />);
+
+    const root = getProgressCircleRoot();
+
+    expect(root).toHaveAttribute("accessibility-element", "true");
+    expect(root).toHaveAttribute("accessibility-role-description", "progressbar");
+    expect(root).toHaveAttribute(
+      "accessibility-value",
+      "minimum -0.25, maximum 1.75, current 0.3333333333333333",
+    );
+  });
+
+  it("describes indeterminate progress without a numeric value", () => {
+    render(<ProgressCircle.Root />);
+
+    expect(getProgressCircleRoot()).toHaveAttribute("accessibility-value", "indeterminate");
+  });
+
+  it("prefers explicit accessibility props over defaults", () => {
+    render(
+      <ProgressCircle.Root
+        minValue={0}
+        maxValue={100}
+        value={40}
+        accessibility-element={false}
+        accessibility-role-description="custom progress"
+        accessibility-value="40 percent complete"
+      />,
+    );
+
+    const root = getProgressCircleRoot();
+
+    expect(root).toHaveAttribute("accessibility-element", "false");
+    expect(root).toHaveAttribute("accessibility-role-description", "custom progress");
+    expect(root).toHaveAttribute("accessibility-value", "40 percent complete");
+  });
+
   it("renders a visible indeterminate range before the main-thread animation starts", () => {
     render(
       <ProgressCircle.Root>

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -12,7 +12,7 @@ import type { MainThread } from "@lynx-js/types";
 import clsx from "clsx";
 import { progressCircle } from "@seed-design/lynx-css/recipes/progress-circle";
 import type { ProgressCircleVariantProps } from "@seed-design/lynx-css/recipes/progress-circle";
-import type { LynxStyledElementProps, LynxViewRef } from "../../types";
+import type { LynxAccessibilityProps, LynxStyledElementProps, LynxViewRef } from "../../types";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -153,7 +153,8 @@ const TRANSITION_DURATION = 300;
 
 export interface ProgressCircleRootProps
   extends ProgressCircleVariantProps,
-    LynxStyledElementProps {
+    LynxStyledElementProps,
+    LynxAccessibilityProps {
   minValue?: number;
   maxValue?: number;
   value?: number;
@@ -175,7 +176,18 @@ export type RootProps = ProgressCircleRootProps;
  */
 export const ProgressCircleRoot = forwardRef<unknown, ProgressCircleRootProps>((props, ref) => {
   const [variantProps, otherProps] = progressCircle.splitVariantProps(props);
-  const { children, className, style, minValue, maxValue, value } = otherProps;
+  const {
+    children,
+    className,
+    style,
+    minValue,
+    maxValue,
+    value,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-role-description": accessibilityRoleDescription = "progressbar",
+    "accessibility-value": accessibilityValue,
+    ...nativeProps
+  } = otherProps;
   const size = variantProps.size ?? "40";
   const tone = variantProps.tone ?? "neutral";
   const numSize = Number(size);
@@ -184,6 +196,9 @@ export const ProgressCircleRoot = forwardRef<unknown, ProgressCircleRootProps>((
 
   const range = (maxValue ?? 1) - (minValue ?? 0);
   const progress = isDeterminate ? (range === 0 ? 0 : ((value ?? 0) - (minValue ?? 0)) / range) : 0;
+  const defaultAccessibilityValue = isDeterminate
+    ? `minimum ${minValue}, maximum ${maxValue}, current ${value}`
+    : "indeterminate";
 
   const classes = progressCircle({ tone, size });
 
@@ -195,9 +210,13 @@ export const ProgressCircleRoot = forwardRef<unknown, ProgressCircleRootProps>((
   return (
     <ProgressCircleContext.Provider value={ctx}>
       <view
+        {...nativeProps}
         {...(ref ? { ref: ref as LynxViewRef } : {})}
         className={clsx(classes.root, className)}
         style={{ ...style, width: `${numSize}px`, height: `${numSize}px` }}
+        accessibility-element={accessibilityElement}
+        accessibility-role-description={accessibilityRoleDescription}
+        accessibility-value={accessibilityValue ?? defaultAccessibilityValue}
       >
         {children}
       </view>

package/src/components/RadioGroup/RadioGroup.test.tsx

@@ -0,0 +1,87 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it, vi } from "vitest";
+
+import { RadioGroup } from "./index";
+
+function getItems(container: HTMLElement) {
+  return container.querySelectorAll<HTMLElement>(".seed-radio__root");
+}
+
+describe("RadioGroup", () => {
+  it("exposes group and item accessibility defaults while preserving selection", () => {
+    const onValueChange = vi.fn();
+    const { container } = render(
+      <RadioGroup.Root
+        accessibility-label="과일"
+        defaultValue="apple"
+        onValueChange={onValueChange}
+      >
+        <RadioGroup.Item value="apple" accessibility-label="사과" />
+        <RadioGroup.Item value="banana" accessibility-label="바나나" />
+      </RadioGroup.Root>,
+    );
+    const root = container.firstElementChild;
+    const [apple, banana] = getItems(container);
+
+    expect(root).toHaveAttribute("accessibility-element", "true");
+    expect(root).toHaveAttribute("accessibility-role-description", "radiogroup");
+    expect(root).toHaveAttribute("accessibility-label", "과일");
+    expect(apple).toHaveAttribute("accessibility-element", "true");
+    expect(apple).toHaveAttribute("accessibility-role-description", "radio");
+    expect(apple).toHaveAttribute("accessibility-label", "사과");
+    expect(apple).toHaveAttribute("accessibility-value", "selected");
+    expect(banana).toHaveAttribute("accessibility-value", "not selected");
+
+    fireEvent.tap(banana);
+
+    expect(onValueChange).toHaveBeenCalledWith("banana");
+    expect(apple).toHaveAttribute("accessibility-value", "not selected");
+    expect(banana).toHaveAttribute("accessibility-value", "selected");
+  });
+
+  it("exposes disabled state and allows accessibility overrides", () => {
+    const onValueChange = vi.fn();
+    const { container, rerender } = render(
+      <RadioGroup.Root disabled onValueChange={onValueChange}>
+        <RadioGroup.Item value="apple" />
+      </RadioGroup.Root>,
+    );
+    const root = container.firstElementChild;
+    const [disabledItem] = getItems(container);
+
+    expect(root).toHaveAttribute("accessibility-traits", "disabled");
+    expect(disabledItem).toHaveAttribute("accessibility-traits", "disabled");
+
+    fireEvent.tap(disabledItem);
+
+    expect(onValueChange).not.toHaveBeenCalled();
+
+    rerender(
+      <RadioGroup.Root
+        disabled
+        accessibility-element={false}
+        accessibility-role-description="custom group"
+        accessibility-traits="button"
+      >
+        <RadioGroup.Item
+          value="apple"
+          accessibility-element={false}
+          accessibility-role-description="custom radio"
+          accessibility-traits="button"
+          accessibility-value="custom selection"
+        />
+      </RadioGroup.Root>,
+    );
+    const overriddenRoot = container.firstElementChild;
+    const [overriddenItem] = getItems(container);
+
+    expect(overriddenRoot).toHaveAttribute("accessibility-element", "false");
+    expect(overriddenRoot).toHaveAttribute("accessibility-role-description", "custom group");
+    expect(overriddenRoot).toHaveAttribute("accessibility-traits", "button");
+    expect(overriddenItem).toHaveAttribute("accessibility-element", "false");
+    expect(overriddenItem).toHaveAttribute("accessibility-role-description", "custom radio");
+    expect(overriddenItem).toHaveAttribute("accessibility-traits", "button");
+    expect(overriddenItem).toHaveAttribute("accessibility-value", "custom selection");
+  });
+});

package/src/components/RadioGroup/RadioGroup.tsx

@@ -9,8 +9,11 @@ import type { RadiomarkVariantProps } from "@seed-design/lynx-css/recipes/radiom
 import { radioGroup } from "@seed-design/lynx-css/recipes/radio-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
@@ -56,6 +60,7 @@ interface RadioGroupItemContextValue {
   disabled: boolean;
   pressed: boolean;
   select: () => void;
+  scaleFeedbackTargetProps: ScaleFeedbackTargetProps;
 }
 
 const RadioGroupItemContext = React.createContext<RadioGroupItemContextValue | null>(null);
@@ -88,7 +93,8 @@ function useRadiomarkControlContext(consumer: string): RadiomarkControlContextVa
 export interface RadioGroupRootProps
   extends RadioVariantProps,
     Omit<RadiomarkVariantProps, "size" | "checked" | "disabled">,
-    LynxStyledElementProps {
+    LynxStyledElementProps,
+    LynxAccessibilityProps {
   value?: string;
   defaultValue?: string;
   disabled?: boolean;
@@ -105,8 +111,14 @@ export const RadioGroupRoot = React.forwardRef<unknown, RadioGroupRootProps>((pr
     onValueChange,
     ...restProps
   } = props;
-  const [{ radio: radioVariantProps, radiomark: radiomarkVariantProps }, nativeProps] =
+  const [{ radio: radioVariantProps, radiomark: radiomarkVariantProps }, restNativeProps] =
     splitMultipleVariantsProps(restProps, { radio, radiomark });
+  const {
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-role-description": accessibilityRoleDescription = "radiogroup",
+    "accessibility-traits": accessibilityTraits,
+    ...nativeProps
+  } = restNativeProps;
 
   const handleChange = React.useCallback(
     (next: string | null) => {
@@ -144,9 +156,11 @@ export const RadioGroupRoot = React.forwardRef<unknown, RadioGroupRootProps>((pr
   return (
     <RadioGroupContext.Provider value={contextValue}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
         className={clsx(rootClassName, className)}
-        {...nativeProps}
+        accessibility-element={accessibilityElement}
+        accessibility-role-description={accessibilityRoleDescription}
+        accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : undefined)}
       >
         {children}
       </view>
@@ -157,7 +171,7 @@ RadioGroupRoot.displayName = "RadioGroupRoot";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface RadioGroupItemProps extends LynxStyledElementProps {
+export interface RadioGroupItemProps extends LynxStyledElementProps, LynxAccessibilityProps {
   value: string;
   disabled?: boolean;
 }
@@ -168,6 +182,10 @@ export const RadioGroupItem = React.forwardRef<unknown, RadioGroupItemProps>((pr
     disabled: itemDisabled = false,
     children,
     className,
+    "accessibility-element": accessibilityElement = true,
+    "accessibility-role-description": accessibilityRoleDescription = "radio",
+    "accessibility-traits": accessibilityTraits,
+    "accessibility-value": accessibilityValue,
     ...nativeProps
   } = props;
   const groupContext = useRadioGroupContext("RadioGroupItem");
@@ -179,10 +197,16 @@ export const RadioGroupItem = React.forwardRef<unknown, RadioGroupItemProps>((pr
     groupContext.setValue(itemValue);
   }, [checked, groupContext, itemValue]);
 
-  const { pressed, ...pressHandlers } = usePressTap({
+  const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
     disabled,
     onTap: select,
   });
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+    disabled,
+    onTouchStart: bindtouchstart,
+    onTouchEnd: bindtouchend,
+    onTouchCancel: bindtouchcancel,
+  });
 
   const rootClassName = radio({ ...groupContext.radioVariantProps, disabled }).root;
 
@@ -193,17 +217,25 @@ export const RadioGroupItem = React.forwardRef<unknown, RadioGroupItemProps>((pr
       disabled,
       pressed,
       select,
+      scaleFeedbackTargetProps,
     }),
-    [itemValue, checked, disabled, pressed, select],
+    [itemValue, checked, disabled, pressed, select, scaleFeedbackTargetProps],
   );
 
   return (
     <RadioGroupItemContext.Provider value={itemContextValue}>
       <view
-        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        {...mergeProps(
+          ref ? { ref: ref as LynxViewRef } : {},
+          scaleFeedbackTriggerProps,
+          pressHandlers,
+          nativeProps,
+        )}
         className={clsx(rootClassName, className)}
-        {...pressHandlers}
-        {...nativeProps}
+        accessibility-element={accessibilityElement}
+        accessibility-role-description={accessibilityRoleDescription}
+        accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : undefined)}
+        accessibility-value={accessibilityValue ?? (checked ? "selected" : "not selected")}
       >
         {children}
       </view>
@@ -224,6 +256,7 @@ export const RadioGroupItemControl = React.forwardRef<unknown, RadioGroupItemCon
     const { children, className, ...nativeProps } = restProps;
     const groupContext = useRadioGroupContext("RadioGroupItemControl");
     const itemContext = useRadioGroupItemContext("RadioGroupItemControl");
+    const hasScaledContent = React.useContext(ScaleFeedbackContentContext);
     const radiomarkVariantProps: RadiomarkVariantProps = {
       ...groupContext.radiomarkVariantProps,
       ...variantProps,
@@ -239,9 +272,13 @@ export const RadioGroupItemControl = React.forwardRef<unknown, RadioGroupItemCon
         value={{ iconClassName: classes.icon, radiomarkVariantProps }}
       >
         <view
-          {...(ref ? { ref: ref as LynxViewRef } : {})}
+          {...mergeProps(
+            ref ? { ref: ref as LynxViewRef } : {},
+            !hasScaledContent ? itemContext.scaleFeedbackTargetProps : {},
+            nativeProps,
+          )}
           className={clsx(classes.root, controlClassName, className)}
-          {...nativeProps}
+          {...(!hasScaledContent ? { flatten: false } : {})}
         >
           {children}
         </view>
@@ -309,9 +346,8 @@ export const RadioGroupItemLabel = React.forwardRef<unknown, RadioGroupItemLabel
 
     return (
       <text
-        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        {...mergeProps(ref ? { ref: ref as LynxTextRef } : {}, nativeProps)}
         className={clsx(labelClassName, className)}
-        {...nativeProps}
       >
         {children}
       </text>