@unif/react-native-design 0.20.0 → 0.21.0

package/src/components/ui/Button/ButtonBase.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import {
   ActivityIndicator,
   type AccessibilityRole,
+  type AccessibilityState,
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
@@ -20,7 +21,7 @@ import type {
 } from './types';
 
 export type ButtonBaseProps = {
-  onPress?: () => void;
+  onPress: () => void;
   size?: ButtonSize;
   variant?: ButtonVariant;
   disabled?: boolean;
@@ -32,6 +33,8 @@ export type ButtonBaseProps = {
   accessibilityRole?: AccessibilityRole;
   /** SR 朗读 label 后的行为说明 hint。仅在"行为不显然"时加。 */
   accessibilityHint?: string;
+  /** 调用方附加状态；disabled / busy 由内部状态机控制，不能被覆盖。 */
+  accessibilityState?: Omit<AccessibilityState, 'disabled' | 'busy'>;
   style?: StyleProp<ViewStyle>;
   testID?: string;
   /** 强制函数形态 — 消费者通过 ctx.sizing / ctx.palette 渲染内容,
@@ -53,6 +56,7 @@ export function ButtonBase({
   accessibilityLabel,
   accessibilityRole = 'button',
   accessibilityHint,
+  accessibilityState,
   style,
   testID,
   children,
@@ -64,7 +68,8 @@ export function ButtonBase({
   const palette = useMemo(() => paletteFor(variant, c), [variant, c]);
 
   const isText = variant === 'text';
-  const isInteractive = !disabled && !loading;
+  const unavailable = disabled === true || loading === true;
+  const hasAccessibleName = accessibilityLabel !== undefined;
 
   // [M-7] 触控目标补偿:hitSlop 向外扩展命中区域到 fixed.hitTarget(44pt)。
   // 公式:vertical slop = max(0, (hitTarget - h) / 2);square 时同补 horizontal。
@@ -86,12 +91,21 @@ export function ButtonBase({
 
   return (
     <Pressable
-      accessibilityRole={accessibilityRole}
-      accessibilityState={{ disabled: !isInteractive }}
+      accessible={hasAccessibleName}
+      accessibilityRole={hasAccessibleName ? accessibilityRole : undefined}
+      accessibilityState={
+        hasAccessibleName
+          ? {
+              ...accessibilityState,
+              disabled: unavailable,
+              busy: loading === true,
+            }
+          : undefined
+      }
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
-      disabled={!isInteractive}
-      onPress={onPress}
+      disabled={unavailable}
+      onPress={unavailable ? undefined : onPress}
       hitSlop={hitSlop}
       testID={testID}
       style={({ pressed }) => [
@@ -106,13 +120,8 @@ export function ButtonBase({
           backgroundColor: palette.bg,
           borderColor: palette.border ?? 'transparent',
           borderWidth: palette.border ? 1 : 0,
-          opacity: disabled ? 0.5 : pressed ? pressedOpacity : 1,
+          opacity: unavailable ? 0.5 : pressed ? pressedOpacity : 1,
           alignSelf: block ? 'stretch' : 'flex-start',
-          // 非 block 用 undefined 而非硬编码 0:Yoga 的 resolveFlexGrow 里显式 flexGrow
-          // 优先级高于 flex 简写,写死 0 会让调用方 style={{ flex: 1 }} 失效(按钮撑不开 /
-          // 并排塌成 padding 宽裁掉 label)。undefined → 仍走 Yoga 默认 0(普通态零变化),
-          // 但把 flex / flexGrow 的控制权交还给末尾 merge 的 style。撑满优先仍推荐用 block。
-          flexGrow: block ? 1 : undefined,
           gap: sizing.gap,
         },
         style,

package/src/components/ui/Button/types.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { AccessibilityState, StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 
 /** Button 尺寸：sm=28 / md=36 / lg=44（对应 control.sm/md/lg） */
@@ -28,12 +28,12 @@ export type ButtonProps = {
   /** 按钮文案；icon-only 场景请用 IconButton */
   label: string;
   /** 点击回调；disabled / loading 时不触发 */
-  onPress?: () => void;
+  onPress: () => void;
   /** 尺寸，默认 'md' */
   size?: ButtonSize;
   /** 视觉变体，默认 'primary' */
   variant?: ButtonVariant;
-  /** 撑满父容器宽度（alignSelf: stretch + flexGrow: 1） */
+  /** 撑满父容器交叉轴宽度（alignSelf: stretch） */
   block?: boolean;
   /** 整体禁用：透明度 0.5 + 不响应 onPress */
   disabled?: boolean;
@@ -49,6 +49,8 @@ export type ButtonProps = {
   testID?: string;
   /** SR 朗读 label 后的行为说明 hint。仅在"行为不显然"时加(如 "切换主题")。 */
   accessibilityHint?: string;
+  /** 额外 a11y 状态；disabled / busy 由组件根据 disabled / loading 统一上报。 */
+  accessibilityState?: Omit<AccessibilityState, 'disabled' | 'busy'>;
 };
 
 /** ButtonBase 内部根据 size 算出的视觉参数集合,通过 render prop 暴露给消费者。 */

package/src/components/ui/Carousel/Carousel.tsx

@@ -1,14 +1,28 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Pressable, useWindowDimensions, View } from 'react-native';
 import {
   Carousel as ReanimatedCarousel,
   Pagination,
 } from 'react-native-reanimated-carousel';
 import { useSharedValue } from 'react-native-reanimated';
-import { space, useThemedStyles } from '../../../theme';
+import {
+  space,
+  usePrefersReducedMotion,
+  useThemedStyles,
+} from '../../../theme';
+import { createLogger } from '../../../utils/logger';
+import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
+import {
+  effectiveCarouselAutoplay,
+  normalizeCarouselAction,
+  resolveCarouselItemAccessibility,
+  shouldRenderCarouselPagination,
+} from './behavior';
 import { makeCarouselStyles } from './styles';
 import type { CarouselProps, CarouselRef } from './types';
 
+const log = createLogger('Carousel');
+
 /** Carousel —— 包装 `react-native-reanimated-carousel@5.0.0`。
  *
  *  dot indicator 走 `c.primary` token,使用库内置 `Pagination`
@@ -39,6 +53,48 @@ function CarouselInner<T>(
   const { width: screenWidth } = useWindowDimensions();
   const width = itemSize ?? screenWidth;
   const styles = useThemedStyles(makeCarouselStyles);
+  const reducedMotion = usePrefersReducedMotion();
+  const effectiveAutoplay = effectiveCarouselAutoplay(autoplay, reducedMotion);
+  const shouldRenderPagination = shouldRenderCarouselPagination(
+    showIndicator,
+    data.length
+  );
+  const action = normalizeCarouselAction<T>(onPressItem, getAccessibilityLabel);
+  const itemAccessibility =
+    action.kind === 'action'
+      ? data.map((item, index) =>
+          resolveCarouselItemAccessibility(
+            action.getAccessibilityLabel,
+            item,
+            index,
+            data.length
+          )
+        )
+      : [];
+  const actionDiagnosticKey = action.diagnostics.join(',');
+  const itemDiagnosticKey = itemAccessibility
+    .map((result, index) =>
+      result.diagnostics.length > 0
+        ? `${index}:${result.diagnostics.join('+')}`
+        : ''
+    )
+    .filter(Boolean)
+    .join(',');
+
+  useEffect(() => {
+    if (actionDiagnosticKey.length > 0) {
+      log.warn(
+        'Carousel action 必须同时提供 onPressItem 与 getAccessibilityLabel 函数，已按 display-only 渲染。'
+      );
+    }
+  }, [actionDiagnosticKey]);
+  useEffect(() => {
+    if (itemDiagnosticKey.length > 0) {
+      log.warn(
+        `Carousel item 名称无效(${itemDiagnosticKey})，对应 slide 已按 display-only 渲染。`
+      );
+    }
+  }, [itemDiagnosticKey]);
   // Carousel 把逻辑页进度写进 shared value,Pagination 自动跟随。
   const progress = useSharedValue<number>(0);
 
@@ -46,7 +102,7 @@ function CarouselInner<T>(
   // 与 dotsWrapBottom 的 paddingTop=space[3]+dot height space[1] 一起跟 r() 同步缩放。
   // 'overlay-bottom-right' 不占额外高度。
   const indicatorReservedHeight =
-    showIndicator && indicatorPosition === 'bottom' ? space['7'] : 0;
+    shouldRenderPagination && indicatorPosition === 'bottom' ? space['7'] : 0;
 
   return (
     <View
@@ -60,51 +116,57 @@ function CarouselInner<T>(
         data={data}
         keyExtractor={keyExtractor}
         loop={loop}
-        autoplay={autoplay}
+        autoplay={effectiveAutoplay}
         autoplayInterval={autoplayInterval}
         progress={progress}
         ref={ref}
-        renderItem={({ item, index, relativeProgress }) => (
-          // RN Pressable 而非 RNGH Pressable:Carousel 的 GestureDetector 已挂在
-          // ReanimatedCarousel 内部,外层再套 RNGH Pressable 会产生手势冲突;
-          // 用 RN 原生 Pressable 让库自己的拖拽手势优先,tap 仍正常触发。
-          <Pressable
-            onPress={() => onPressItem?.(item, index)}
-            style={{ width, height }}
-            // [L-92] 恒产出兜底:testID 缺失时用 'carousel' 前缀而非 undefined。
-            // 与 childTestID「父缺失返 undefined」语义不同,不替换为 childTestID。
-            // 原因:renderItem 须向 ReanimatedCarousel 提供稳定可预期的子项 testID
-            // 用于 E2E 定位,哪怕调用方未传 testID 也能用 carousel-item-0 等定位;
-            // 副作用:同屏两个未传 testID 的 Carousel 会碰撞 carousel-item-N。
-            // 建议:多 Carousel 场景请务必传 testID 以避免碰撞。
-            testID={`${testID ?? 'carousel'}-item-${index}`}
-            // 只在真正可点时声明 button 语义,纯展示型不标 button 避免读屏器误导
-            {...(onPressItem
-              ? {
-                  accessibilityRole: 'button' as const,
-                  accessibilityLabel:
-                    getAccessibilityLabel?.(item, index) ??
-                    `第 ${index + 1} 项`,
-                }
-              : null)}
-          >
-            {renderItem({ item, index, relativeProgress })}
-          </Pressable>
-        )}
+        renderItem={({ item, index, relativeProgress }) => {
+          const content = renderItem({ item, index, relativeProgress });
+          const itemTestID = `${testID ?? 'carousel'}-item-${index}`;
+          const itemLabel = itemAccessibility[index]?.label;
+
+          if (action.kind === 'action' && itemLabel !== undefined) {
+            // RN Pressable 而非 RNGH Pressable:Carousel 的 GestureDetector 已挂在
+            // ReanimatedCarousel 内部,外层再套 RNGH Pressable 会产生手势冲突;
+            // 用 RN 原生 Pressable 让库自己的拖拽手势优先,tap 仍正常触发。
+            return (
+              <Pressable
+                onPress={() => action.onPressItem(item, index)}
+                style={{ width, height }}
+                testID={itemTestID}
+                accessibilityRole="button"
+                accessibilityLabel={itemLabel}
+              >
+                {content}
+              </Pressable>
+            );
+          }
+
+          return (
+            <View style={{ width, height }} testID={itemTestID}>
+              {content}
+            </View>
+          );
+        }}
       />
-      {showIndicator && data.length > 1 ? (
-        // 未传 onPress 时,正式版 Pagination 会把 dots 作为纯视觉辅助从 a11y 树隐藏。
-        <Pagination
-          progress={progress}
-          count={data.length}
-          dotStyle={styles.dot}
-          activeDotStyle={styles.dotActive}
-          containerStyle={
+      {shouldRenderPagination ? (
+        // Pagination 是第三方组件，隐藏 props 必须落在本地 View，不能向其透传。
+        <View
+          {...A11Y_HIDDEN_PROPS}
+          style={
             indicatorPosition === 'overlay-bottom-right'
               ? styles.dotsWrapOverlay
               : styles.dotsWrapBottom
           }
-        />
+        >
+          <Pagination
+            progress={progress}
+            count={data.length}
+            dotStyle={styles.dot}
+            activeDotStyle={styles.dotActive}
+            containerStyle={styles.dots}
+          />
+        </View>
       ) : null}
     </View>
   );

package/src/components/ui/Carousel/behavior.ts

@@ -0,0 +1,78 @@
+import { normalizeNonBlankText } from '../shared/accessibilityName';
+
+/** 系统请求减弱动效时，Carousel 不得启动计时 autoplay。 */
+export const effectiveCarouselAutoplay = (
+  autoplay: boolean | undefined,
+  reducedMotion: boolean
+): boolean => autoplay === true && !reducedMotion;
+
+/** 单页不需要视觉页码，也不应为其保留布局高度。 */
+export const shouldRenderCarouselPagination = (
+  showIndicator: boolean,
+  itemCount: number
+): boolean => showIndicator && itemCount > 1;
+
+type CarouselPressHandler<T> = (item: T, index: number) => void;
+type CarouselLabelGetter<T> = (item: T, index: number) => unknown;
+
+export type NormalizedCarouselAction<T> =
+  | { kind: 'display'; diagnostics: readonly string[] }
+  | {
+      kind: 'action';
+      onPressItem: CarouselPressHandler<T>;
+      getAccessibilityLabel: CarouselLabelGetter<T>;
+      diagnostics: readonly string[];
+    };
+
+/** 只有两个函数同时存在才形成 action；任何半配置/未类型化值都失败关闭为展示。 */
+export function normalizeCarouselAction<T>(
+  onPressItem: unknown,
+  getAccessibilityLabel: unknown
+): NormalizedCarouselAction<T> {
+  if (onPressItem === undefined && getAccessibilityLabel === undefined) {
+    return { kind: 'display', diagnostics: [] };
+  }
+  if (
+    typeof onPressItem !== 'function' ||
+    typeof getAccessibilityLabel !== 'function'
+  ) {
+    return { kind: 'display', diagnostics: ['action'] };
+  }
+  return {
+    kind: 'action',
+    onPressItem: onPressItem as CarouselPressHandler<T>,
+    getAccessibilityLabel: getAccessibilityLabel as CarouselLabelGetter<T>,
+    diagnostics: [],
+  };
+}
+
+export type CarouselItemAccessibility = {
+  label: string | undefined;
+  diagnostics: readonly string[];
+};
+
+/** getter 的异常和非法返回值都只影响当前 item，不能让整个 Carousel render 崩溃。 */
+export function resolveCarouselItemAccessibility<T>(
+  getAccessibilityLabel: CarouselLabelGetter<T>,
+  item: T,
+  index: number,
+  itemCount: number
+): CarouselItemAccessibility {
+  let rawLabel: unknown;
+  try {
+    rawLabel = getAccessibilityLabel(item, index);
+  } catch {
+    return { label: undefined, diagnostics: ['threw'] };
+  }
+  if (typeof rawLabel !== 'string') {
+    return { label: undefined, diagnostics: ['invalid'] };
+  }
+  const label = normalizeNonBlankText(rawLabel);
+  if (label === undefined) {
+    return { label: undefined, diagnostics: ['blank'] };
+  }
+  return {
+    label: `${label}，第 ${index + 1} 项，共 ${itemCount} 项`,
+    diagnostics: [],
+  };
+}

package/src/components/ui/Carousel/styles.ts

@@ -5,20 +5,18 @@ export const makeCarouselStyles = (c: ColorTokens) =>
   StyleSheet.create({
     /** 'bottom' 模式:独立行容器,让 dot 居中紧贴。 */
     dotsWrapBottom: {
-      justifyContent: 'center',
       alignItems: 'center',
-      // 正式版按 active 最大宽度为每个 dot 预留 12pt,额外保留 3pt 间距。
-      gap: r(3),
       paddingTop: space['3'],
     },
-    /** 'overlay-bottom-right' 模式:absolute 浮在 Carousel 右下角,
-     *  override `justifyContent` → 'flex-end' 让 dot 群靠右。 */
+    /** 'overlay-bottom-right' 模式：用 absolute bottom/right 固定在右下角。 */
     dotsWrapOverlay: {
       position: 'absolute',
       bottom: space['3'],
       right: space['5'],
-      justifyContent: 'flex-end',
-      alignItems: 'center',
+    },
+    /** Pagination 本体保持第三方所需的横向 layout，只承载视觉 dot。 */
+    dots: {
+      // 正式版按 active 最大宽度为每个 dot 预留 12pt,额外保留 3pt 间距。
       gap: r(3),
     },
     dot: {

package/src/components/ui/Carousel/types.ts

@@ -11,7 +11,7 @@ export type { CarouselRef };
  *  - 'overlay-bottom-right':指示器 absolute 浮在 Carousel 右下角,不占额外高度 */
 export type CarouselIndicatorPosition = 'bottom' | 'overlay-bottom-right';
 
-export type CarouselProps<T> = {
+type CarouselBaseProps<T> = {
   /** 数组数据 */
   data: T[];
   /** 单项渲染 */
@@ -34,13 +34,25 @@ export type CarouselProps<T> = {
   showIndicator?: boolean;
   /** indicator 位置策略,默认 'bottom' */
   indicatorPosition?: CarouselIndicatorPosition;
-  /** 单项点击 */
-  onPressItem?: (item: T, index: number) => void;
-  /** 单项 a11y label 解析器。仅 `onPressItem` 存在时启用 —— Pressable 拿来作
-   *  `accessibilityLabel`(role 自动设 button)。不传则 fallback `第 N 项`。 */
-  getAccessibilityLabel?: (item: T, index: number) => string;
   /** 外层 View 附加样式 */
   style?: StyleProp<ViewStyle>;
   /** E2E / 测试定位 */
   testID?: string;
 };
+
+type CarouselAction<T> = {
+  /** 单项点击。action slide 必须同时声明业务名称。 */
+  onPressItem: (item: T, index: number) => void;
+  /** 单项业务名称，供读屏器区分每个可操作 slide。 */
+  getAccessibilityLabel: (item: T, index: number) => string;
+};
+
+type CarouselDisplay = {
+  /** 纯展示 slide 不创建可点击节点。 */
+  onPressItem?: never;
+  getAccessibilityLabel?: never;
+};
+
+/** 轮播只有纯展示或可操作两种 slide，不能只提供其中一个 action 字段。 */
+export type CarouselProps<T> = CarouselBaseProps<T> &
+  (CarouselAction<T> | CarouselDisplay);

package/src/components/ui/Cell/Cell.tsx

@@ -1,36 +1,41 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { type StyleProp, Text, type TextStyle, View } from 'react-native';
 import { Pressable } from 'react-native-gesture-handler';
 import { pressedOpacity, r, useColors, useThemedStyles } from '../../../theme';
+import { createLogger } from '../../../utils/logger';
 import { Icon } from '../Icon';
+import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
+import {
+  resolveCellActionAccessibilityLabel,
+  stringifyCellText,
+} from './content';
 import { useListVariant } from './context';
 import { Leading } from './Leading';
 import { makeStyles } from './styles';
-import type { CellProps } from './types';
+import type { CellExtra, CellProps } from './types';
 
-/** extra 是否包含可交互控件(Switch/Stepper/Checkbox 等 ReactNode)。
- *  用于决定 Pressable 外壳是否关闭 accessible —— 若外壳 accessible=true 且 extra 也是
- *  独立 accessible 控件,SR 会产生「双播报 + 控件被遮挡无法直接激活」的体验缺陷。
- *  规则:extra 是 ReactNode(非 string / null / undefined)时判定为「可能含控件」。
- *  使用方若明确 extra 是纯展示 ReactNode,可通过 accessibilityHint='none' 绕过(暂不加 prop)。*/
-function extraHasInteractiveNode(extra: CellProps['extra']): boolean {
-  return extra != null && typeof extra !== 'string';
-}
+const log = createLogger('Cell');
 
-function renderSlot(
-  value: React.ReactNode,
-  textStyle: StyleProp<TextStyle>,
-  numberOfLines: number
-): React.ReactNode {
-  if (value == null) return null;
-  if (typeof value === 'string') {
-    return (
-      <Text style={textStyle} numberOfLines={numberOfLines}>
-        {value}
-      </Text>
-    );
+function CellExtraContent({
+  extra,
+  textStyle,
+}: {
+  extra: CellExtra | undefined;
+  textStyle: StyleProp<TextStyle>;
+}): React.JSX.Element | null {
+  if (!extra) return null;
+  switch (extra.kind) {
+    case 'text':
+      return (
+        <Text style={textStyle} numberOfLines={1}>
+          {stringifyCellText(extra.value)}
+        </Text>
+      );
+    case 'display':
+      return <View {...A11Y_HIDDEN_PROPS}>{extra.node}</View>;
+    case 'control':
+      return extra.node;
   }
-  return value;
 }
 
 /**
@@ -40,34 +45,38 @@ function renderSlot(
  * - `grouped`(默认):独立白卡片 + 8px 间距
  * - `flush`(嵌在 Card 内):紧凑列表,28×28 橙色 icon 盒子,行间 inset hairline 分隔
  */
-export function Cell({
-  title,
-  titleLines,
-  desc,
-  extra,
-  arrow,
-  leading,
-  onPress,
-  disabled,
-  danger,
-  style,
-  testID,
-  accessibilityLabel,
-  accessibilityHint,
-}: CellProps): React.JSX.Element {
+export function Cell(props: CellProps): React.JSX.Element {
   const c = useColors();
   const styles = useThemedStyles(makeStyles);
   const variant = useListVariant();
   const flush = variant === 'flush';
+  const requestedAction = typeof props.onPress === 'function';
+  const accessibilityLabel = requestedAction
+    ? resolveCellActionAccessibilityLabel({
+        accessibilityLabel: props.accessibilityLabel,
+        title: props.title,
+        desc: props.desc,
+        extra: props.extra,
+      })
+    : undefined;
+  const hasEffectiveAction =
+    requestedAction && accessibilityLabel !== undefined;
+  const hasMissingActionName = requestedAction && !hasEffectiveAction;
+
+  useEffect(() => {
+    if (hasMissingActionName) {
+      log.warn('Cell action 缺少非空业务名称，已按 display-only 渲染。');
+    }
+  }, [hasMissingActionName]);
 
   const cellStyle = [
     styles.cell,
     flush && styles.cellFlush,
-    flush && desc != null && styles.cellFlushWithDesc,
-    style,
+    flush && props.desc !== undefined && styles.cellFlushWithDesc,
+    props.style,
   ];
 
-  const titleColor = danger ? c.error : undefined;
+  const titleColor = props.danger ? c.error : undefined;
   const titleStyle = [
     flush ? styles.titleFlush : styles.title,
     titleColor && { color: titleColor },
@@ -76,51 +85,53 @@ export function Cell({
   const extraStyle = flush ? styles.extraFlush : styles.extra;
 
   const inner = (
-    <View style={cellStyle} testID={onPress ? undefined : testID}>
-      {leading != null ? <Leading slot={leading} danger={danger} /> : null}
+    <View
+      style={cellStyle}
+      testID={hasEffectiveAction ? undefined : props.testID}
+    >
+      {props.leading !== undefined ? (
+        <Leading slot={props.leading} danger={props.danger} />
+      ) : null}
       <View style={styles.body}>
-        {renderSlot(title, titleStyle, titleLines ?? 1)}
-        {renderSlot(desc, descStyle, 2)}
+        <Text style={titleStyle} numberOfLines={props.titleLines ?? 1}>
+          {stringifyCellText(props.title)}
+        </Text>
+        {props.desc !== undefined ? (
+          <Text style={descStyle} numberOfLines={2}>
+            {stringifyCellText(props.desc)}
+          </Text>
+        ) : null}
       </View>
-      {renderSlot(extra, extraStyle, 1)}
-      {arrow && !danger ? (
-        <Icon
-          name="chevron-right"
-          size={r(flush ? 18 : 20)}
-          color={c.foregroundSubtle}
+      <CellExtraContent extra={props.extra} textStyle={extraStyle} />
+      {hasEffectiveAction && props.arrow && !props.danger ? (
+        <View
+          {...A11Y_HIDDEN_PROPS}
           style={flush ? styles.chevronFlush : undefined}
-        />
+        >
+          <Icon
+            name="chevron-right"
+            size={r(flush ? 18 : 20)}
+            color={c.foregroundSubtle}
+          />
+        </View>
       ) : null}
     </View>
   );
 
-  if (onPress) {
-    // 若 extra 含交互控件(Switch/Stepper 等),外壳 Pressable 关闭 accessible,
-    // 让 SR 直接穿透读取控件本身,避免双播报和控件被遮挡无法激活的体验缺陷。
-    const hasInteractiveExtra = extraHasInteractiveNode(extra);
-
-    // 默认 a11y label:title + desc 拼接,给 SR 用户同时听到主副信息。
-    // 有 accessibilityLabel 显式覆盖时走 prop,否则组合 title+desc。
-    const defaultLabel =
-      typeof title === 'string'
-        ? typeof desc === 'string' && desc
-          ? `${title},${desc}`
-          : title
-        : undefined;
+  if (hasEffectiveAction) {
+    const isDisabled = props.disabled === true;
 
     return (
       <Pressable
-        onPress={onPress}
-        disabled={disabled}
+        onPress={isDisabled ? undefined : props.onPress}
+        disabled={isDisabled}
         accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel ?? defaultLabel}
-        accessibilityHint={accessibilityHint}
-        accessibilityState={disabled ? { disabled: true } : undefined}
-        // extra 含控件时外壳不作为独立 a11y 元素,让 SR 穿透到 extra 控件
-        accessible={hasInteractiveExtra ? false : undefined}
-        testID={testID}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={props.accessibilityHint}
+        accessibilityState={{ disabled: isDisabled }}
+        testID={props.testID}
         style={({ pressed }) => [
-          { opacity: disabled ? 0.5 : pressed ? pressedOpacity : 1 },
+          { opacity: isDisabled ? 0.5 : pressed ? pressedOpacity : 1 },
         ]}
       >
         {inner}