zkit-ui 2.0.6 → 2.0.8

package/dist/ui/Button/index.d.ts

@@ -61,7 +61,7 @@ export type ButtonColors = {
     loading?: string;
     pressedOverlay?: string;
 };
-type NativePressableProps = Omit<React.ComponentPropsWithoutRef<typeof Pressable>, 'accessibilityRole' | 'accessibilityState' | 'children' | 'disabled' | 'style'>;
+type NativePressableProps = Omit<React.ComponentPropsWithoutRef<typeof Pressable>, 'accessibilityRole' | 'accessibilityState' | 'children' | 'disabled' | 'role' | 'style'>;
 export type ButtonRef = React.ComponentRef<typeof Pressable>;
 export interface ButtonProps extends NativePressableProps {
     variant?: ButtonVariant;

package/dist/ui/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/index.tsx"],"names":[],"mappings":"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"}

package/dist/ui/Button/index.js

@@ -189,6 +189,10 @@ function colorToRgba(color, alpha) {
     const a = Math.max(0, Math.min(1, alpha));
     return `rgba(${r},${g},${b},${a})`;
 }
+function resolveBoxShadowColor(color, opacity) {
+    var _a;
+    return (_a = colorToRgba(color, opacity)) !== null && _a !== void 0 ? _a : color;
+}
 function resolveColorToken(input, fallback, theme) {
     var _a;
     if (input == null)
@@ -305,13 +309,22 @@ function resolveShadowStyle(shadow, scheme, variant) {
         return undefined;
     if (typeof shadow === 'object') {
         const radius = Math.max(0, (_a = shadow.radius) !== null && _a !== void 0 ? _a : (0, zkit_tools_1.wp)(10));
+        const color = (_b = shadow.color) !== null && _b !== void 0 ? _b : '#000000';
+        const offsetX = (_c = shadow.offsetX) !== null && _c !== void 0 ? _c : 0;
+        const offsetY = (_d = shadow.offsetY) !== null && _d !== void 0 ? _d : (0, zkit_tools_1.wp)(3);
+        const opacity = (_e = shadow.opacity) !== null && _e !== void 0 ? _e : (scheme === 'dark' ? 0.28 : 0.14);
+        if (react_native_1.Platform.OS === 'web') {
+            return {
+                boxShadow: `${offsetX}px ${offsetY}px ${radius}px ${resolveBoxShadowColor(color, opacity)}`,
+            };
+        }
         return {
-            shadowColor: (_b = shadow.color) !== null && _b !== void 0 ? _b : '#000000',
+            shadowColor: color,
             shadowOffset: {
-                width: (_c = shadow.offsetX) !== null && _c !== void 0 ? _c : 0,
-                height: (_d = shadow.offsetY) !== null && _d !== void 0 ? _d : (0, zkit_tools_1.wp)(3),
+                width: offsetX,
+                height: offsetY,
             },
-            shadowOpacity: (_e = shadow.opacity) !== null && _e !== void 0 ? _e : (scheme === 'dark' ? 0.28 : 0.14),
+            shadowOpacity: opacity,
             shadowRadius: radius,
             elevation: (_f = shadow.elevation) !== null && _f !== void 0 ? _f : Math.max(0, Math.round(radius * 0.55)),
         };
@@ -320,10 +333,17 @@ function resolveShadowStyle(shadow, scheme, variant) {
     if (level <= 0)
         return undefined;
     const radius = (0, zkit_tools_1.wp)(level * 5 + 3);
+    const offsetY = (0, zkit_tools_1.wp)(level + 1);
+    const opacity = scheme === 'dark' ? 0.26 : 0.14;
+    if (react_native_1.Platform.OS === 'web') {
+        return {
+            boxShadow: `0px ${offsetY}px ${radius}px ${resolveBoxShadowColor('#000000', opacity)}`,
+        };
+    }
     return {
         shadowColor: '#000000',
-        shadowOffset: { width: 0, height: (0, zkit_tools_1.wp)(level + 1) },
-        shadowOpacity: scheme === 'dark' ? 0.26 : 0.14,
+        shadowOffset: { width: 0, height: offsetY },
+        shadowOpacity: opacity,
         shadowRadius: radius,
         elevation: Math.max(0, Math.round(radius * 0.55)),
     };
@@ -539,6 +559,17 @@ function resolveWebCursorStyle(disabled) {
         return undefined;
     return { cursor: disabled ? 'not-allowed' : 'pointer' };
 }
+const nativeNonePointerEvents = react_native_1.Platform.OS === 'web' ? undefined : 'none';
+const webNonePointerEventsStyle = react_native_1.Platform.OS === 'web' ? { pointerEvents: 'none' } : undefined;
+function resolveRootAccessibilityRole() {
+    return react_native_1.Platform.OS === 'web' ? undefined : 'button';
+}
+function resolveRootPressableProps(props) {
+    if (react_native_1.Platform.OS !== 'web')
+        return props;
+    const { accessibilityRole: _accessibilityRole, role: _role, ...rest } = props;
+    return rest;
+}
 function requiresAnimatedPressEffect(effect) {
     return (effect === 'scale' ||
         effect === 'scale-opacity' ||
@@ -707,6 +738,8 @@ function ButtonStaticImpl({ variant = 'solid', tone = 'primary', size = 'md', sh
             return;
         onPress === null || onPress === void 0 ? void 0 : onPress(event);
     }, [interactionDisabled, onPress]);
+    const rootAccessibilityRole = resolveRootAccessibilityRole();
+    const rootPressableProps = resolveRootPressableProps(pressableProps);
     const pressOpacityEnabled = !interactionDisabled && (pressEffect === 'auto' || pressEffect === 'opacity');
     const rootStyle = React.useCallback(({ pressed }) => [
         styles.root,
@@ -726,19 +759,20 @@ function ButtonStaticImpl({ variant = 'solid', tone = 'primary', size = 'md', sh
         visualDisabled,
         webCursorStyle,
     ]);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...pressableProps, ref: ref, accessibilityLabel: resolvedAccessibilityLabel, accessibilityRole: "button", accessibilityState: {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...rootPressableProps, ref: ref, accessibilityLabel: resolvedAccessibilityLabel, accessibilityRole: rootAccessibilityRole, accessibilityState: {
             ...accessibilityState,
             busy: Boolean(loading || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.busy)),
             disabled: Boolean(interactionDisabled || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.disabled)),
-        }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, style: rootStyle, testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: [
+        }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, style: rootStyle, testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: nativeNonePointerEvents, style: [
                 styles.content,
+                webNonePointerEventsStyle,
                 contentSizeStyle,
                 paddingStyle,
                 radiusStyle,
                 borderStyle,
                 { backgroundColor: visualColors.backgroundColor },
                 contentStyle,
-            ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: "none", colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, radiusStyle] })) : null, iconOnly ? ((icon !== null && icon !== void 0 ? icon : resolvedText)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && iconPlacement === 'start' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null, resolvedText, icon && iconPlacement === 'end' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null] }))] }) }));
+            ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: nativeNonePointerEvents, colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, webNonePointerEventsStyle, radiusStyle] })) : null, iconOnly ? ((icon !== null && icon !== void 0 ? icon : resolvedText)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && iconPlacement === 'start' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null, resolvedText, icon && iconPlacement === 'end' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null] }))] }) }));
 }
 function ButtonPressAnimatedImpl({ variant = 'solid', tone = 'primary', size = 'md', shape = 'rounded', block = false, disabled = false, loading = false, loadingMode: _loadingMode = 'inline', pressEffect = 'auto', icon, iconPlacement = 'start', iconOnly = false, color, colors, border, layout, gradient, shadow = 'none', children, style, contentStyle, textStyle, accessibilityLabel, accessibilityState, hitSlop, onPress, onPressIn, onPressOut, testID, ...pressableProps }, ref) {
     const frame = useButtonFrame({
@@ -816,20 +850,24 @@ function ButtonPressAnimatedImpl({ variant = 'solid', tone = 'primary', size = '
         }
         onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(event);
     }, [interactionDisabled, onPressOut, pressSv, resolvedPressEffect]);
-    return ((0, jsx_runtime_1.jsx)(AnimatedPressable, { ...pressableProps, ref: ref, accessibilityLabel: resolvedAccessibilityLabel, accessibilityRole: "button", accessibilityState: {
+    const rootAccessibilityRole = resolveRootAccessibilityRole();
+    const rootPressableProps = resolveRootPressableProps(pressableProps);
+    return ((0, jsx_runtime_1.jsx)(AnimatedPressable, { ...rootPressableProps, ref: ref, accessibilityLabel: resolvedAccessibilityLabel, accessibilityRole: rootAccessibilityRole, accessibilityState: {
             ...accessibilityState,
             busy: Boolean(loading || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.busy)),
             disabled: Boolean(interactionDisabled || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.disabled)),
-        }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [styles.root, rootSizeStyle, radiusStyle, shadowStyle, rootAnimatedStyle, webCursorStyle, style], testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: [
+        }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [styles.root, rootSizeStyle, radiusStyle, shadowStyle, rootAnimatedStyle, webCursorStyle, style], testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: nativeNonePointerEvents, style: [
                 styles.content,
+                webNonePointerEventsStyle,
                 contentSizeStyle,
                 paddingStyle,
                 radiusStyle,
                 borderStyle,
                 { backgroundColor: visualColors.backgroundColor },
                 contentStyle,
-            ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: "none", colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, radiusStyle] })) : null, pressHighlightEnabled ? ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
+            ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: nativeNonePointerEvents, colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, webNonePointerEventsStyle, radiusStyle] })) : null, pressHighlightEnabled ? ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: nativeNonePointerEvents, style: [
                         react_native_1.StyleSheet.absoluteFillObject,
+                        webNonePointerEventsStyle,
                         radiusStyle,
                         { backgroundColor: pressOverlay.color },
                         overlayAnimatedStyle,
@@ -997,20 +1035,24 @@ function ButtonAnimatedImpl({ variant = 'solid', tone = 'primary', size = 'md',
         }
         onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(event);
     }, [interactionDisabled, onPressOut, pressSv, resolvedPressEffect]);
-    return ((0, jsx_runtime_1.jsx)(AnimatedPressable, { ...pressableProps, ref: ref, accessibilityLabel: resolvedAccessibilityLabel, accessibilityRole: "button", accessibilityState: {
+    const rootAccessibilityRole = resolveRootAccessibilityRole();
+    const rootPressableProps = resolveRootPressableProps(pressableProps);
+    return ((0, jsx_runtime_1.jsx)(AnimatedPressable, { ...rootPressableProps, ref: ref, accessibilityLabel: resolvedAccessibilityLabel, accessibilityRole: rootAccessibilityRole, accessibilityState: {
             ...accessibilityState,
             busy: Boolean(loading || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.busy)),
             disabled: Boolean(interactionDisabled || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.disabled)),
-        }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [styles.root, rootSizeStyle, radiusStyle, shadowStyle, rootAnimatedStyle, webCursorStyle, style], testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: [
+        }, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [styles.root, rootSizeStyle, radiusStyle, shadowStyle, rootAnimatedStyle, webCursorStyle, style], testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: nativeNonePointerEvents, style: [
                 styles.content,
+                webNonePointerEventsStyle,
                 contentSizeStyle,
                 paddingStyle,
                 radiusStyle,
                 borderStyle,
                 { backgroundColor: visualColors.backgroundColor },
                 contentStyle,
-            ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: "none", colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, radiusStyle] })) : null, (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
+            ], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: nativeNonePointerEvents, colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, webNonePointerEventsStyle, radiusStyle] })) : null, (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: nativeNonePointerEvents, style: [
                         react_native_1.StyleSheet.absoluteFillObject,
+                        webNonePointerEventsStyle,
                         radiusStyle,
                         { backgroundColor: pressOverlay.color },
                         overlayAnimatedStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zkit-ui",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/ui/Button/README.md

@@ -186,5 +186,5 @@ export function Demo() {
 
 - `disabled` 会禁用交互并进入禁用视觉；`loading` 只禁用交互，不强制置灰
 - 显式传入 `hitSlop` 时以调用侧为准；否则小尺寸和 `link` 会自动补足触控热区
-- `accessibilityRole` 固定为 `button`
+- Native 端 `accessibilityRole` 固定为 `button`；Web 端根节点不设置 `button` role，避免 RN Web 将 Button 渲染为真实 `<button>` 后产生嵌套按钮问题
 - `iconOnly` 必须提供可读的 `accessibilityLabel`，除非 children 是可作为标签的文本

package/src/ui/Button/index.tsx

@@ -108,7 +108,7 @@ export type ButtonColors = {
 
 type NativePressableProps = Omit<
   React.ComponentPropsWithoutRef<typeof Pressable>,
-  'accessibilityRole' | 'accessibilityState' | 'children' | 'disabled' | 'style'
+  'accessibilityRole' | 'accessibilityState' | 'children' | 'disabled' | 'role' | 'style'
 >;
 
 export type ButtonRef = React.ComponentRef<typeof Pressable>;
@@ -352,6 +352,10 @@ function colorToRgba(color: string, alpha: number) {
   return `rgba(${r},${g},${b},${a})`;
 }
 
+function resolveBoxShadowColor(color: string, opacity: number) {
+  return colorToRgba(color, opacity) ?? color;
+}
+
 function resolveColorToken(input: string | undefined, fallback: string, theme: Theme) {
   if (input == null) return fallback;
 
@@ -484,13 +488,24 @@ function resolveShadowStyle(
 
   if (typeof shadow === 'object') {
     const radius = Math.max(0, shadow.radius ?? wp(10));
+    const color = shadow.color ?? '#000000';
+    const offsetX = shadow.offsetX ?? 0;
+    const offsetY = shadow.offsetY ?? wp(3);
+    const opacity = shadow.opacity ?? (scheme === 'dark' ? 0.28 : 0.14);
+
+    if (Platform.OS === 'web') {
+      return {
+        boxShadow: `${offsetX}px ${offsetY}px ${radius}px ${resolveBoxShadowColor(color, opacity)}`,
+      } as ViewStyle;
+    }
+
     return {
-      shadowColor: shadow.color ?? '#000000',
+      shadowColor: color,
       shadowOffset: {
-        width: shadow.offsetX ?? 0,
-        height: shadow.offsetY ?? wp(3),
+        width: offsetX,
+        height: offsetY,
       },
-      shadowOpacity: shadow.opacity ?? (scheme === 'dark' ? 0.28 : 0.14),
+      shadowOpacity: opacity,
       shadowRadius: radius,
       elevation: shadow.elevation ?? Math.max(0, Math.round(radius * 0.55)),
     };
@@ -500,10 +515,19 @@ function resolveShadowStyle(
   if (level <= 0) return undefined;
 
   const radius = wp(level * 5 + 3);
+  const offsetY = wp(level + 1);
+  const opacity = scheme === 'dark' ? 0.26 : 0.14;
+
+  if (Platform.OS === 'web') {
+    return {
+      boxShadow: `0px ${offsetY}px ${radius}px ${resolveBoxShadowColor('#000000', opacity)}`,
+    } as ViewStyle;
+  }
+
   return {
     shadowColor: '#000000',
-    shadowOffset: { width: 0, height: wp(level + 1) },
-    shadowOpacity: scheme === 'dark' ? 0.26 : 0.14,
+    shadowOffset: { width: 0, height: offsetY },
+    shadowOpacity: opacity,
     shadowRadius: radius,
     elevation: Math.max(0, Math.round(radius * 0.55)),
   };
@@ -839,6 +863,24 @@ function resolveWebCursorStyle(disabled: boolean): ViewStyle | undefined {
   return { cursor: disabled ? 'not-allowed' : 'pointer' } as ViewStyle;
 }
 
+const nativeNonePointerEvents = Platform.OS === 'web' ? undefined : 'none';
+const webNonePointerEventsStyle =
+  Platform.OS === 'web' ? ({ pointerEvents: 'none' } as ViewStyle) : undefined;
+
+function resolveRootAccessibilityRole() {
+  return Platform.OS === 'web' ? undefined : 'button';
+}
+
+function resolveRootPressableProps<T extends object>(props: T): T {
+  if (Platform.OS !== 'web') return props;
+
+  const { accessibilityRole: _accessibilityRole, role: _role, ...rest } = props as T & {
+    accessibilityRole?: unknown;
+    role?: unknown;
+  };
+  return rest as T;
+}
+
 function requiresAnimatedPressEffect(effect: ButtonPressEffect | undefined) {
   return (
     effect === 'scale' ||
@@ -1161,6 +1203,8 @@ function ButtonStaticImpl(
     },
     [interactionDisabled, onPress]
   );
+  const rootAccessibilityRole = resolveRootAccessibilityRole();
+  const rootPressableProps = resolveRootPressableProps(pressableProps);
   const pressOpacityEnabled = !interactionDisabled && (pressEffect === 'auto' || pressEffect === 'opacity');
   const rootStyle = React.useCallback(
     ({ pressed }: PressableStateCallbackType) => [
@@ -1186,10 +1230,10 @@ function ButtonStaticImpl(
 
   return (
     <Pressable
-      {...pressableProps}
+      {...rootPressableProps}
       ref={ref}
       accessibilityLabel={resolvedAccessibilityLabel}
-      accessibilityRole="button"
+      accessibilityRole={rootAccessibilityRole}
       accessibilityState={{
         ...accessibilityState,
         busy: Boolean(loading || accessibilityState?.busy),
@@ -1202,9 +1246,10 @@ function ButtonStaticImpl(
       testID={testID}
     >
       <View
-        pointerEvents="none"
+        pointerEvents={nativeNonePointerEvents}
         style={[
           styles.content,
+          webNonePointerEventsStyle,
           contentSizeStyle,
           paddingStyle,
           radiusStyle,
@@ -1215,11 +1260,11 @@ function ButtonStaticImpl(
       >
         {LinearGradientComponent && gradientCfg ? (
           <LinearGradientComponent
-            pointerEvents="none"
+            pointerEvents={nativeNonePointerEvents}
             colors={gradientCfg.colors}
             start={gradientCfg.start}
             end={gradientCfg.end}
-            style={[StyleSheet.absoluteFillObject, radiusStyle]}
+            style={[StyleSheet.absoluteFillObject, webNonePointerEventsStyle, radiusStyle]}
           />
         ) : null}
 
@@ -1398,13 +1443,15 @@ function ButtonPressAnimatedImpl(
     },
     [interactionDisabled, onPressOut, pressSv, resolvedPressEffect]
   );
+  const rootAccessibilityRole = resolveRootAccessibilityRole();
+  const rootPressableProps = resolveRootPressableProps(pressableProps);
 
   return (
     <AnimatedPressable
-      {...pressableProps}
+      {...rootPressableProps}
       ref={ref}
       accessibilityLabel={resolvedAccessibilityLabel}
-      accessibilityRole="button"
+      accessibilityRole={rootAccessibilityRole}
       accessibilityState={{
         ...accessibilityState,
         busy: Boolean(loading || accessibilityState?.busy),
@@ -1419,9 +1466,10 @@ function ButtonPressAnimatedImpl(
       testID={testID}
     >
       <View
-        pointerEvents="none"
+        pointerEvents={nativeNonePointerEvents}
         style={[
           styles.content,
+          webNonePointerEventsStyle,
           contentSizeStyle,
           paddingStyle,
           radiusStyle,
@@ -1432,19 +1480,20 @@ function ButtonPressAnimatedImpl(
       >
         {LinearGradientComponent && gradientCfg ? (
           <LinearGradientComponent
-            pointerEvents="none"
+            pointerEvents={nativeNonePointerEvents}
             colors={gradientCfg.colors}
             start={gradientCfg.start}
             end={gradientCfg.end}
-            style={[StyleSheet.absoluteFillObject, radiusStyle]}
+            style={[StyleSheet.absoluteFillObject, webNonePointerEventsStyle, radiusStyle]}
           />
         ) : null}
 
         {pressHighlightEnabled ? (
           <Animated.View
-            pointerEvents="none"
+            pointerEvents={nativeNonePointerEvents}
             style={[
               StyleSheet.absoluteFillObject,
+              webNonePointerEventsStyle,
               radiusStyle,
               { backgroundColor: pressOverlay.color },
               overlayAnimatedStyle,
@@ -1736,13 +1785,15 @@ function ButtonAnimatedImpl(
     },
     [interactionDisabled, onPressOut, pressSv, resolvedPressEffect]
   );
+  const rootAccessibilityRole = resolveRootAccessibilityRole();
+  const rootPressableProps = resolveRootPressableProps(pressableProps);
 
   return (
     <AnimatedPressable
-      {...pressableProps}
+      {...rootPressableProps}
       ref={ref}
       accessibilityLabel={resolvedAccessibilityLabel}
-      accessibilityRole="button"
+      accessibilityRole={rootAccessibilityRole}
       accessibilityState={{
         ...accessibilityState,
         busy: Boolean(loading || accessibilityState?.busy),
@@ -1757,9 +1808,10 @@ function ButtonAnimatedImpl(
       testID={testID}
     >
       <View
-        pointerEvents="none"
+        pointerEvents={nativeNonePointerEvents}
         style={[
           styles.content,
+          webNonePointerEventsStyle,
           contentSizeStyle,
           paddingStyle,
           radiusStyle,
@@ -1770,18 +1822,19 @@ function ButtonAnimatedImpl(
       >
         {LinearGradientComponent && gradientCfg ? (
           <LinearGradientComponent
-            pointerEvents="none"
+            pointerEvents={nativeNonePointerEvents}
             colors={gradientCfg.colors}
             start={gradientCfg.start}
             end={gradientCfg.end}
-            style={[StyleSheet.absoluteFillObject, radiusStyle]}
+            style={[StyleSheet.absoluteFillObject, webNonePointerEventsStyle, radiusStyle]}
           />
         ) : null}
 
         <Animated.View
-          pointerEvents="none"
+          pointerEvents={nativeNonePointerEvents}
           style={[
             StyleSheet.absoluteFillObject,
+            webNonePointerEventsStyle,
             radiusStyle,
             { backgroundColor: pressOverlay.color },
             overlayAnimatedStyle,