@unif/react-native-design 0.20.0 → 0.21.0

package/src/components/ui/Stepper/normalizeStepper.ts

@@ -0,0 +1,85 @@
+export type NormalizedStepper = {
+  safeMin: number;
+  safeMax: number;
+  safeStep: number;
+  safeValue: number;
+  rangeDisabled: boolean;
+  canDecrement: boolean;
+  canIncrement: boolean;
+  accessibilityActions: Array<{
+    name: 'increment' | 'decrement';
+    label: '增加' | '减少';
+  }>;
+};
+
+type StepperNormalizationInput = {
+  value: unknown;
+  min?: unknown;
+  max?: unknown;
+  step?: unknown;
+  disabled?: unknown;
+};
+
+export type StepperDirection = 'increment' | 'decrement';
+
+/**
+ * Stepper 唯一的范围与 action 归一化入口。
+ *
+ * 组件的视觉状态、handler 和 a11y 都消费同一份结果，避免边界按钮已禁用但
+ * adjustable 仍暴露无效 action。
+ */
+export function normalizeStepper({
+  value,
+  min = 0,
+  max = 99,
+  step = 1,
+  disabled = false,
+}: StepperNormalizationInput): NormalizedStepper {
+  const safeMin = typeof min === 'number' && Number.isFinite(min) ? min : 0;
+  const safeMax =
+    typeof max === 'number' && Number.isFinite(max) && max >= safeMin
+      ? max
+      : safeMin;
+  const safeStep =
+    typeof step === 'number' && Number.isFinite(step) && step > 0 ? step : 1;
+  const safeValue =
+    typeof value === 'number' && Number.isFinite(value)
+      ? Math.min(safeMax, Math.max(safeMin, value))
+      : safeMin;
+  const rangeDisabled = disabled === true || safeMin === safeMax;
+  const canDecrement = !rangeDisabled && safeValue > safeMin;
+  const canIncrement = !rangeDisabled && safeValue < safeMax;
+  const accessibilityActions: NormalizedStepper['accessibilityActions'] = [];
+
+  if (canIncrement) {
+    accessibilityActions.push({ name: 'increment', label: '增加' });
+  }
+  if (canDecrement) {
+    accessibilityActions.push({ name: 'decrement', label: '减少' });
+  }
+
+  return {
+    safeMin,
+    safeMax,
+    safeStep,
+    safeValue,
+    rangeDisabled,
+    canDecrement,
+    canIncrement,
+    accessibilityActions,
+  };
+}
+
+export function nextStepperValue(
+  normalized: NormalizedStepper,
+  direction: StepperDirection
+): number | undefined {
+  if (direction === 'increment') {
+    return normalized.canIncrement
+      ? Math.min(normalized.safeMax, normalized.safeValue + normalized.safeStep)
+      : undefined;
+  }
+  return normalized.canDecrement
+    ? Math.max(normalized.safeMin, normalized.safeValue - normalized.safeStep)
+    : undefined;
+}

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

@@ -4,7 +4,7 @@ import type { ColorTokens } from '../../../theme';
 import type { StepperSize } from './types';
 
 /** Stepper 静态 + themed base —— btn / value 容器共用 cell 基底,radius / border 走 token。
- *  尺寸(高 / 宽 / 字号)由 sizingFor 派生,sm 走 control.sm,md 走 r(32)(介于
+ *  尺寸(高 / 宽 / 字号)由 sizingFor 派生,sm 走 control.sm (`r(28)`),md 走 r(32)(介于
  *  control.sm 与 control.md 之间,与 avatar.md / dim.sendBtn 同值但语义独立)。 */
 export const makeStyles = (c: ColorTokens) =>
   StyleSheet.create({
@@ -13,6 +13,13 @@ export const makeStyles = (c: ColorTokens) =>
       alignItems: 'center',
       alignSelf: 'flex-start',
     },
+    actionFrame: {
+      justifyContent: 'center',
+    },
+    valueFrame: {
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
     /** btn / value 共用的 cell 基底 —— 居中 + surface 背景 + 上下边框。
      *  左右边框 / 圆角由 btnLeft / btnRight 增量补齐;value 中间无侧边框。 */
     cell: {
@@ -45,7 +52,7 @@ export const makeStyles = (c: ColorTokens) =>
     },
   });
 
-/** Stepper 尺寸推导:sm(control.sm=28 高 / 28 按钮 / 40 值宽 / xs 字)/
+/** Stepper 尺寸推导:sm(control.sm=`r(28)` 高 / `r(28)` 按钮 / r(40) 值宽 / xs 字)/
  *  md(r(32) 高 / r(32) 按钮 / r(48) 值宽 / sm 字)。
  *  新增 size 在 types.ts 加 union + 这里加 case。 */
 export function sizingFor(size: StepperSize): {

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

@@ -6,6 +6,8 @@ export type StepperProps = {
   value: number;
   /** 值变化回调（已自动夹到 [min, max] 区间） */
   onChange: (value: number) => void;
+  /** 中央 adjustable 的上下文名称，左右按钮自动组合“${label}，减少 / 增加” */
+  accessibilityLabel: string;
   /** 最小值，默认 0 */
   min?: number;
   /** 最大值，默认 99 */
@@ -14,7 +16,7 @@ export type StepperProps = {
   step?: number;
   /** 尺寸，默认 'md' */
   size?: StepperSize;
-  /** 整体禁用（两个按钮都不可点） */
+  /** 整体禁用（三个操作节点都不暴露 action） */
   disabled?: boolean;
   /** E2E / 测试定位 */
   testID?: string;

package/src/components/ui/Switch/Switch.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { View } from 'react-native';
 import { Pressable } from 'react-native-gesture-handler';
 
 import Animated, {
@@ -9,10 +10,21 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { fixed, motion, r, useColors, useThemedStyles } from '../../../theme';
-import { makeStyles, THUMB_OFF_X, THUMB_ON_X, TRACK_H } from './styles';
+import {
+  motion,
+  useColors,
+  usePrefersReducedMotion,
+  useThemedStyles,
+} from '../../../theme';
+import { createLogger } from '../../../utils/logger';
+import { childTestID } from '../../../utils/testID';
+import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
+import { normalizeNonBlankText } from '../shared/accessibilityName';
+import { makeStyles, THUMB_OFF_X, THUMB_ON_X } from './styles';
 import type { SwitchProps } from './types';
 
+const log = createLogger('Switch');
+
 /**
  * 布尔切换。32×20 轨道 + 16×16 白色把手,200ms 缓动。
  *
@@ -28,12 +40,26 @@ export function Switch({
 }: SwitchProps): React.JSX.Element {
   const c = useColors();
   const styles = useThemedStyles(makeStyles);
+  const reducedMotion = usePrefersReducedMotion();
   const progress = useSharedValue(value ? 1 : 0);
+  const accessibleName = normalizeNonBlankText(accessibilityLabel);
+  const hasBlankLabel = accessibleName === undefined;
+  const isDisabled = disabled === true || hasBlankLabel;
 
   useEffect(() => {
-    progress.value = withTiming(value ? 1 : 0, { duration: motion.base });
+    if (reducedMotion) {
+      cancelAnimation(progress);
+      progress.value = value ? 1 : 0;
+    } else {
+      progress.value = withTiming(value ? 1 : 0, { duration: motion.base });
+    }
     return () => cancelAnimation(progress);
-  }, [value, progress]);
+  }, [progress, reducedMotion, value]);
+  useEffect(() => {
+    if (hasBlankLabel) {
+      log.warn('Switch accessibilityLabel 不能为空白，当前 action 已禁用。');
+    }
+  }, [hasBlankLabel]);
 
   const trackStyle = useAnimatedStyle(() => ({
     backgroundColor: interpolateColor(
@@ -57,19 +83,32 @@ export function Switch({
 
   return (
     <Pressable
-      onPress={() => !disabled && onChange(!value)}
-      disabled={disabled}
-      // [M-7] 轨道高 r(20)≈20pt;补 (44-20)/2=12 到 fixed.hitTarget
-      hitSlop={Math.round((fixed.hitTarget - r(TRACK_H)) / 2)}
-      style={disabled ? styles.pressableDisabled : styles.pressableEnabled}
-      accessibilityRole="switch"
-      accessibilityState={{ checked: value, disabled: !!disabled }}
-      accessibilityLabel={accessibilityLabel}
+      accessible={!hasBlankLabel}
+      onPress={isDisabled ? undefined : () => onChange(!value)}
+      disabled={isDisabled}
+      style={[styles.pressable, isDisabled && styles.pressableDisabled]}
+      accessibilityRole={hasBlankLabel ? undefined : 'switch'}
+      accessibilityState={
+        hasBlankLabel ? undefined : { checked: value, disabled: isDisabled }
+      }
+      accessibilityLabel={accessibleName}
       testID={testID}
     >
-      <Animated.View style={[styles.track, trackStyle]}>
-        <Animated.View style={[styles.thumb, thumbStyle]} />
-      </Animated.View>
+      <View
+        {...A11Y_HIDDEN_PROPS}
+        style={styles.visualFrame}
+        testID={childTestID(testID, 'visual')}
+      >
+        <Animated.View
+          style={[styles.track, trackStyle]}
+          testID={childTestID(testID, 'track')}
+        >
+          <Animated.View
+            style={[styles.thumb, thumbStyle]}
+            testID={childTestID(testID, 'thumb')}
+          />
+        </Animated.View>
+      </View>
     </Pressable>
   );
 }

package/src/components/ui/Switch/Switch.web.tsx

@@ -1,10 +1,21 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Pressable } from 'react-native-gesture-handler';
 import { View } from 'react-native';
-import { motion, useColors, useThemedStyles } from '../../../theme';
+import {
+  motion,
+  useColors,
+  usePrefersReducedMotion,
+  useThemedStyles,
+} from '../../../theme';
+import { createLogger } from '../../../utils/logger';
+import { childTestID } from '../../../utils/testID';
+import { A11Y_HIDDEN_PROPS } from '../shared/a11y';
+import { normalizeNonBlankText } from '../shared/accessibilityName';
 import { makeStyles, THUMB_OFF_X, THUMB_ON_X } from './styles';
 import type { SwitchProps } from './types';
 
+const log = createLogger('Switch');
+
 /**
  * Web 端 Switch —— RN-Web 上 reanimated 4 + worklets 0.9.x 的 useAnimatedStyle
  * 链路会抛 `Object.keys(undefined)` TypeError(切换时打印,thumb 卡住),走 CSS
@@ -24,37 +35,64 @@ export function Switch({
 }: SwitchProps): React.JSX.Element {
   const c = useColors();
   const styles = useThemedStyles(makeStyles);
+  const reducedMotion = usePrefersReducedMotion();
+  const accessibleName = normalizeNonBlankText(accessibilityLabel);
+  const hasBlankLabel = accessibleName === undefined;
+  const isDisabled = disabled === true || hasBlankLabel;
+
+  useEffect(() => {
+    if (hasBlankLabel) {
+      log.warn('Switch accessibilityLabel 不能为空白，当前 action 已禁用。');
+    }
+  }, [hasBlankLabel]);
 
-  // 给 RN style 数组追加 web-only 字段:transition + 切换值
+  // 给 RN style 数组追加 web-only 字段；reduced motion 时连 transition key
+  // 都不输出，避免浏览器仍创建零时长 transition。
   const trackWebStyle = {
     ...styles.track,
     backgroundColor: value ? c.primary : c.surfaceContainerHighest,
-    // RN style 不识 transition 但 RN-Web 会把它当 inline style 透传给 DOM
-    transitionProperty: 'background-color',
-    transitionDuration: `${motion.base}ms`,
-    transitionTimingFunction: 'ease-out',
+    ...(reducedMotion
+      ? {}
+      : {
+          // RN style 不识 transition 但 RN-Web 会把它当 inline style 透传给 DOM
+          transitionProperty: 'background-color',
+          transitionDuration: `${motion.base}ms`,
+          transitionTimingFunction: 'ease-out',
+        }),
   } as unknown as object;
   const thumbWebStyle = {
     ...styles.thumb,
     transform: [{ translateX: value ? THUMB_ON_X : THUMB_OFF_X }],
-    transitionProperty: 'transform',
-    transitionDuration: `${motion.base}ms`,
-    transitionTimingFunction: 'ease-out',
+    ...(reducedMotion
+      ? {}
+      : {
+          transitionProperty: 'transform',
+          transitionDuration: `${motion.base}ms`,
+          transitionTimingFunction: 'ease-out',
+        }),
   } as unknown as object;
 
   return (
     <Pressable
-      onPress={() => !disabled && onChange(!value)}
-      disabled={disabled}
-      hitSlop={6}
-      style={disabled ? styles.pressableDisabled : styles.pressableEnabled}
-      accessibilityRole="switch"
-      accessibilityState={{ checked: value, disabled: !!disabled }}
-      accessibilityLabel={accessibilityLabel}
+      accessible={!hasBlankLabel}
+      onPress={isDisabled ? undefined : () => onChange(!value)}
+      disabled={isDisabled}
+      style={[styles.pressable, isDisabled && styles.pressableDisabled]}
+      accessibilityRole={hasBlankLabel ? undefined : 'switch'}
+      accessibilityState={
+        hasBlankLabel ? undefined : { checked: value, disabled: isDisabled }
+      }
+      accessibilityLabel={accessibleName}
       testID={testID}
     >
-      <View style={trackWebStyle}>
-        <View style={thumbWebStyle} />
+      <View
+        {...A11Y_HIDDEN_PROPS}
+        style={styles.visualFrame}
+        testID={childTestID(testID, 'visual')}
+      >
+        <View style={trackWebStyle} testID={childTestID(testID, 'track')}>
+          <View style={thumbWebStyle} testID={childTestID(testID, 'thumb')} />
+        </View>
       </View>
     </Pressable>
   );

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

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { r, radius } from '../../../theme';
+import { fixed, r, radius } from '../../../theme';
 import type { ColorTokens } from '../../../theme';
 
 /** 轨道宽 32 / 高 20、把手 16×16、轨道内边距 2 —— Unif 自有 Switch 物理尺寸。
@@ -16,14 +16,21 @@ export const THUMB_ON_X = r(TRACK_W - INSET - THUMB);
 
 export const makeStyles = (c: ColorTokens) =>
   StyleSheet.create({
-    pressableEnabled: {
-      opacity: 1,
+    // 固定命中框不走 r()/fontScale:它是手指可达性约束,不是视觉 token。
+    pressable: {
+      width: fixed.hitTarget,
+      height: fixed.hitTarget,
+      alignItems: 'center',
+      justifyContent: 'center',
       // [L-37] alignSelf:'flex-start' 防止父容器拉伸把手区域(与 Chip [M-8] 同口径)
       alignSelf: 'flex-start' as const,
     },
     pressableDisabled: {
       opacity: 0.5,
-      alignSelf: 'flex-start' as const,
+    },
+    visualFrame: {
+      width: r(TRACK_W),
+      height: r(TRACK_H),
     },
     track: {
       width: r(TRACK_W),

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

@@ -1,8 +1,8 @@
 export type SwitchProps = {
   value: boolean;
   onChange: (value: boolean) => void;
+  /** Switch 没有内置可见文字，必须显式提供读屏名称 */
+  accessibilityLabel: string;
   disabled?: boolean;
-  /** 用于无障碍 / 测试 */
-  accessibilityLabel?: string;
   testID?: string;
 };

package/src/components/ui/Tag/Tag.tsx

@@ -1,5 +1,5 @@
 import { Text, View } from 'react-native';
-import { useColors } from '../../../theme';
+import { scaleFontMetric, useColors, useFontScale } from '../../../theme';
 import { paletteFor, sizingFor, styles } from './styles';
 import type { TagProps } from './types';
 
@@ -12,6 +12,7 @@ export function Tag({
   testID,
 }: TagProps) {
   const c = useColors();
+  const fontScale = useFontScale();
   const palette = paletteFor(variant, c);
   const sizing = sizingFor(size);
 
@@ -22,7 +23,10 @@ export function Tag({
     borderColor: palette.border ?? 'transparent',
     borderWidth: palette.border ? 1 : 0,
   };
-  const dynamicTextStyle = { color: palette.fg, fontSize: sizing.fs };
+  const dynamicTextStyle = {
+    color: palette.fg,
+    fontSize: scaleFontMetric(sizing.fs, fontScale),
+  };
 
   return (
     <View style={[styles.base, dynamicStyle, style]} testID={testID}>