@hzblj/kara-components 0.9.0 → 0.11.0

package/src/atoms/list/list.types.ts

@@ -1,23 +1,23 @@
 import type {ReactNode} from 'react'
 
 /**
- * A scrolling list — SwiftUI `List`, Compose `LazyColumn`. It has no height of its own, so it needs one from outside:
+ * A scrolling list: SwiftUI `List`, Compose `LazyColumn`. It has no height of its own, so it needs one from outside:
  * a `Screen`, or an `Island` with `matchContents={false}` and a height. In an island that sizes itself to its content
  * Compose measures it against an infinite height and throws ("Vertically scrollable component was measured with an
  * infinity maximum height"); SwiftUI shows nothing. For a handful of rows that should not scroll, use a `VStack`.
  *
- * Rows are separated for you — SwiftUI's own separators, a `Divider` between rows on Android — so a `Divider` among
+ * Rows are separated for you (SwiftUI's own separators, a `Divider` between rows on Android), so a `Divider` among
  * the children is one too many: on iOS it becomes an empty row of its own.
  */
 export type ListProps = {
-  /** The rows — native views, one row each. */
+  /** The rows: native views, one row each. */
   children: ReactNode
   /**
-   * Enables pull-to-refresh. Async on purpose — see `ScrollViewProps.onRefresh`: the spinner runs
+   * Enables pull-to-refresh. Async on purpose (see `ScrollViewProps.onRefresh`): the spinner runs
    * until the promise settles, so neither platform needs a `refreshing` flag kept in sync by hand.
    */
   onRefresh?: () => Promise<void>
-  /** Test identifier, forwarded to the native view on iOS — Android ignores it. */
+  /** Test identifier, forwarded to the native view on iOS. Android ignores it. */
   testID?: string
 }
 

package/src/atoms/picker/picker.types.ts

@@ -9,7 +9,7 @@ export type PickerOption = {
 }
 
 /**
- * A single choice from a list — a SwiftUI wheel picker on iOS, Material's exposed dropdown on Android. It brings its
+ * A single choice from a list: a SwiftUI wheel picker on iOS, Material's exposed dropdown on Android. It brings its
  * own host, so it renders outside `Screen` and `Island` as well.
  */
 export type PickerProps = {

package/src/atoms/pressable/pressable.tsx

@@ -1,14 +1,23 @@
-import {useSplitSx} from '@hzblj/kara-sx'
-import {useAppTheme, withOpacity} from '@hzblj/kara-theme'
+import {accessibilityProps, splitAccessibility, useSplitSx} from '@hzblj/kara-sx'
+import {opacity, useAppTheme, useReducedMotion, withOpacity} from '@hzblj/kara-theme'
 import {useCallback, useMemo} from 'react'
-import {Platform, Pressable as RNPressable, View, type ViewStyle} from 'react-native'
-import Animated, {useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated'
+import {Platform, Pressable as RNPressable, type ViewStyle} from 'react-native'
+import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'
 
 import {haptics} from '../../haptics'
+import {timing} from '../../motion'
 import {splitForRipple} from '../../ripple-clip'
 import type {PressableComponent, PressableProps} from './pressable.types'
 
-const SPRING = {damping: 20, stiffness: 400}
+/** The scale eases down and settles back a little slower, with no bounce: a press is not a toy. */
+const SCALE_IN = timing('quick')
+const SCALE_OUT = timing('fast')
+
+/** A dim comes in at once and leaves a little slower, as UIKit's own highlight does. */
+const DIM_IN = timing('micro', 'out')
+const DIM_OUT = timing('quick', 'out')
+
+const PLATFORM_EFFECT = Platform.OS === 'ios' ? 'scale' : 'none'
 
 const AnimatedPressable = Animated.createAnimatedComponent(RNPressable)
 
@@ -17,24 +26,43 @@ export const Pressable: PressableComponent = ({
   disabled = false,
   haptic = false,
   onPress,
+  pressEffect = PLATFORM_EFFECT,
+  pressedOpacity = 'o60',
+  pressedScale = 0.96,
+  ripple: withRipple = true,
   testID,
   ...props
 }: PressableProps) => {
-  const [resolved, rest] = useSplitSx(props)
-  const scale = useSharedValue(1)
+  const [accessibility, ownProps] = splitAccessibility(props)
+  const [resolved, rest] = useSplitSx(ownProps)
+  const reduced = useReducedMotion()
+  // With motion reduced the press still shows, and nothing moves: a scale dims instead.
+  const effect = reduced && pressEffect === 'scale' ? 'opacity' : pressEffect
+  // 0 at rest, 1 held: one value drives whichever effect is picked, so a change of effect needs no second animation.
+  const pressed = useSharedValue(0)
   const feedback = haptic === true ? 'light' : haptic || undefined
+  const a11y = accessibilityProps(accessibility, 'button')
+  const dimmed = opacity[pressedOpacity]
 
   const theme = useAppTheme()
   const isAndroid = Platform.OS === 'android'
 
-  const rStyle = useAnimatedStyle(() => ({transform: [{scale: scale.value}]}), [])
+  const rStyle = useAnimatedStyle(() => {
+    if (effect === 'scale') {
+      return {transform: [{scale: 1 - (1 - pressedScale) * pressed.value}]}
+    }
 
-  // Android's press is Material's: a ripple over the content — the pressed state layer, `onSurface` at 10 % — clipped to
-  // the shape by an outer view (`splitForRipple`), and nothing moves. iOS springs down.
+    return effect === 'opacity' ? {opacity: 1 - (1 - dimmed) * pressed.value} : {}
+  }, [dimmed, effect, pressedScale])
+
+  // Android's press is Material's: a ripple over the content (the pressed state layer, `onSurface` at 10 %) clipped to
+  // the shape by an outer view (`splitForRipple`). The effect, when there is one, moves that outer view, ripple and all.
   const ripple = useMemo(
     () =>
-      isAndroid ? {color: withOpacity(String(theme.color('content.primary')), 'o10'), foreground: true} : undefined,
-    [isAndroid, theme]
+      isAndroid && withRipple
+        ? {color: withOpacity(String(theme.color('content.primary')), 'o10'), foreground: true}
+        : undefined,
+    [isAndroid, theme, withRipple]
   )
   const androidStyle = useMemo(
     () => (isAndroid ? splitForRipple(resolved as ViewStyle) : undefined),
@@ -43,20 +71,18 @@ export const Pressable: PressableComponent = ({
 
   // The finger is down: the Taptic Engine has until the release to wake, so the haptic lands with the press.
   const onPressIn = useCallback(() => {
-    if (!isAndroid) {
-      scale.value = withSpring(0.96, SPRING)
+    if (effect !== 'none') {
+      pressed.value = withTiming(1, effect === 'scale' ? SCALE_IN : DIM_IN)
     }
 
     if (feedback) {
       haptics.prepare(feedback)
     }
-  }, [feedback, isAndroid, scale])
+  }, [effect, feedback, pressed])
 
   const onPressOut = useCallback(() => {
-    if (!isAndroid) {
-      scale.value = withSpring(1, SPRING)
-    }
-  }, [isAndroid, scale])
+    pressed.value = withTiming(0, effect === 'scale' ? SCALE_OUT : DIM_OUT)
+  }, [effect, pressed])
 
   const onPressWithHaptic = useCallback(() => {
     if (feedback) {
@@ -68,25 +94,28 @@ export const Pressable: PressableComponent = ({
 
   if (androidStyle) {
     return (
-      <View style={androidStyle.outer}>
+      <Animated.View style={[androidStyle.outer, rStyle]}>
         <RNPressable
+          {...a11y}
           android_ripple={ripple}
           disabled={disabled}
           hitSlop={8}
           onPress={onPressWithHaptic}
           onPressIn={onPressIn}
+          onPressOut={onPressOut}
           style={androidStyle.inner}
           testID={testID}
           {...rest}
         >
           {children}
         </RNPressable>
-      </View>
+      </Animated.View>
     )
   }
 
   return (
     <AnimatedPressable
+      {...a11y}
       disabled={disabled}
       hitSlop={8}
       onPress={onPressWithHaptic}

package/src/atoms/pressable/pressable.types.ts

@@ -1,25 +1,43 @@
-import type {ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {AccessibilityProps, ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {OpacitySize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
 import type {Haptic} from '../../haptics'
 
+/** How the content answers a press: it eases down, it dims, or it stays still. */
+export type PressEffect = 'none' | 'opacity' | 'scale'
+
 /**
- * React Native's `Pressable`, styled through `sx` like a `Box`, taking touches 8 points past its edges. The press is
- * each platform's own: iOS springs it down to 96%; Android draws Material's ripple over the content, clipped to the
- * pressable's shape — give it the `borderRadius` of what it wraps (`full` around a `GlassView`). The React Native
- * tier — it needs no host.
+ * React Native's `Pressable`, styled through `sx` like a `Box`, taking touches 8 points past its edges. Each platform
+ * presses its own way by default: iOS eases the content down to 96%, Android draws Material's ripple over it,
+ * clipped to the pressable's shape. `pressEffect` picks the same answer on both, and Android keeps its ripple on top
+ * unless `ripple` is off. Give it the `borderRadius` of what it wraps (`full` around a `GlassView`). Screen readers read
+ * it as a button unless `accessibilityRole` names another role. The React Native tier: it needs no host.
  */
-export type PressableProps = ResponsiveViewSx & {
-  /** The pressable content. */
-  children?: ReactNode
-  /** Ignores presses — no `onPress`, no haptic, no spring or ripple. */
-  disabled?: boolean
-  /** Played on press. `true` is a `light` impact; a name picks the haptic, e.g. `selection` for a choice. */
-  haptic?: boolean | Haptic
-  /** Called when the press is released, after the `haptic` plays. */
-  onPress?: () => void
-  /** Test identifier, forwarded to the view. */
-  testID?: string
-}
+export type PressableProps = ResponsiveViewSx &
+  AccessibilityProps & {
+    /** The pressable content. */
+    children?: ReactNode
+    /** Ignores presses: no `onPress`, no haptic, no press effect or ripple. */
+    disabled?: boolean
+    /** Played on press. `true` is a `light` impact; a name picks the haptic, e.g. `selection` for a choice. */
+    haptic?: boolean | Haptic
+    /** Called when the press is released, after the `haptic` plays. */
+    onPress?: () => void
+    /**
+     * How the content answers while it is held. `scale` eases it down to `pressedScale`, `opacity` dims it to
+     * `pressedOpacity`, `none` leaves it still. `scale` on iOS and `none` on Android by default, where the ripple is the
+     * press. With motion reduced, `scale` dims instead: the press still shows, and nothing moves.
+     */
+    pressEffect?: PressEffect
+    /** What `opacity` dims to, an opacity token. `o60` by default. */
+    pressedOpacity?: OpacitySize
+    /** What `scale` eases down to. `0.96` by default: lower reads as a squash, not a press. */
+    pressedScale?: number
+    /** Android's ripple: Material's pressed state layer over the content, clipped to the shape. On by default. iOS has none. */
+    ripple?: boolean
+    /** Test identifier, forwarded to the view. */
+    testID?: string
+  }
 
 export type PressableComponent = (props: PressableProps) => ReactNode

package/src/atoms/progress/progress.android.tsx

@@ -1,17 +1,19 @@
 import {CircularProgressIndicator, LinearProgressIndicator} from '@expo/ui/jetpack-compose'
+import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 
 import {useHostGuard} from '../../host-context'
 import type {ProgressComponent, ProgressProps} from './progress.types'
 
-export const Progress: ProgressComponent = ({circular = false, value}: ProgressProps) => {
+export const Progress: ProgressComponent = ({accessibilityLabel, circular = false, value}: ProgressProps) => {
   useHostGuard('Progress')
   const theme = useAppTheme()
   const color = theme.color('fill.accent.primary')
+  const modifiers = useAccessibilityModifiers({accessibilityLabel})
 
   if (circular) {
-    return <CircularProgressIndicator color={color} progress={value} />
+    return <CircularProgressIndicator color={color} modifiers={modifiers} progress={value} />
   }
 
-  return <LinearProgressIndicator color={color} progress={value} />
+  return <LinearProgressIndicator color={color} modifiers={modifiers} progress={value} />
 }

package/src/atoms/progress/progress.ios.tsx

@@ -1,22 +1,25 @@
 import {Gauge, ProgressView} from '@expo/ui/swift-ui'
 import {gaugeStyle, progressViewStyle, tint} from '@expo/ui/swift-ui/modifiers'
+import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
 import {useHostGuard} from '../../host-context'
 import type {ProgressComponent, ProgressProps} from './progress.types'
 
-export const Progress: ProgressComponent = ({circular = false, value}: ProgressProps) => {
+export const Progress: ProgressComponent = ({accessibilityLabel, circular = false, value}: ProgressProps) => {
   useHostGuard('Progress')
   const theme = useAppTheme()
+  const accessibilityModifiers = useAccessibilityModifiers({accessibilityLabel})
 
   const ring = circular && value !== undefined
   const modifiers = useMemo(
     () => [
       ring ? gaugeStyle('circularCapacity') : progressViewStyle(circular ? 'circular' : 'linear'),
       tint(theme.color('fill.accent.primary')),
+      ...accessibilityModifiers,
     ],
-    [circular, ring, theme]
+    [accessibilityModifiers, circular, ring, theme]
   )
 
   // SwiftUI's circular `ProgressView` ignores its value on iOS and spins; a ring that fills is a capacity `Gauge`.

package/src/atoms/progress/progress.types.ts

@@ -1,10 +1,12 @@
 import type {ReactNode} from 'react'
 
 /**
- * A progress bar or ring, tinted `fill.accent.primary` — SwiftUI `ProgressView` (a capacity `Gauge` for a ring with a
+ * A progress bar or ring, tinted `fill.accent.primary`: SwiftUI `ProgressView` (a capacity `Gauge` for a ring with a
  * value, which `ProgressView` cannot draw on iOS) / Compose's `LinearProgressIndicator` and `CircularProgressIndicator`.
  */
 export type ProgressProps = {
+  /** What is in progress, for VoiceOver and TalkBack: "Uploading". They read how far along it is themselves. */
+  accessibilityLabel?: string
   /** A circular indicator instead of a bar. Off by default. */
   circular?: boolean
   /** Between `0` and `1`. Leave it unset for an indeterminate indicator. */

package/src/atoms/rn-flat-list/rn-flat-list.types.ts

@@ -3,11 +3,11 @@ import type {FlatListProps as RNFlatListProps} from 'react-native'
 
 /**
  * Top-level `sx` styles the viewport; `content` styles the scrolling content container, so padding and
- * gap belong there — the same split as `RnScrollView`. `removeClippedSubviews` is off unless you turn it on:
+ * gap belong there (the same split as `RnScrollView`). `removeClippedSubviews` is off unless you turn it on:
  * Android's default would detach a row's host before it has measured itself, and the row would stay empty.
  */
 export type RnFlatListProps<TItem> = ResponsiveViewSx &
   Omit<RNFlatListProps<TItem>, 'contentContainerStyle' | 'style'> & {
-    /** Styles the scrolling content container — padding and gap belong here. */
+    /** Styles the scrolling content container; padding and gap belong here. */
     content?: ResponsiveViewSx
   }

package/src/atoms/rn-icon/rn-icon.types.ts

@@ -2,7 +2,7 @@ import type {ReactNode} from 'react'
 
 import type {IconProps} from '../icon'
 
-/** The same contract as `Icon`, for the React Native tier — anywhere, no `Screen` or `Island` needed. */
+/** The same contract as `Icon`, for the React Native tier: anywhere, no `Screen` or `Island` needed. */
 export type RnIconProps = IconProps
 
 export type RnIconComponent = (props: RnIconProps) => ReactNode

package/src/atoms/rn-scroll-view/rn-scroll-view.types.ts

@@ -4,7 +4,7 @@ import type {ScrollViewProps as RNScrollViewProps} from 'react-native'
 import type {ScrollViewAxis} from '../scroll-view'
 
 /**
- * React Native tier scroll container — the sibling of `RnView`/`RnText`. Use it when the
+ * React Native tier scroll container, the sibling of `RnView`/`RnText`. Use it when the
  * subtree is React Native and native atoms are embedded through `Island`. For a screen that
  * is native all the way down, reach for the `ScrollView` atom instead.
  *
@@ -17,7 +17,7 @@ export type RnScrollViewProps = ResponsiveViewSx &
     axis?: ScrollViewAxis
     /** The scrolling content. */
     children?: ReactNode
-    /** Styles the scrolling content container — padding and gap belong here. */
+    /** Styles the scrolling content container; padding and gap belong here. */
     content?: ResponsiveViewSx
     /** Shows the scroll indicators. On by default. */
     showsIndicators?: boolean

package/src/atoms/rn-section-list/rn-section-list.types.ts

@@ -3,11 +3,11 @@ import type {DefaultSectionT, SectionListProps as RNSectionListProps} from 'reac
 
 /**
  * Top-level `sx` styles the viewport; `content` styles the scrolling content container, so padding and
- * gap belong there — the same split as `RnScrollView` and `RnFlatList`. `removeClippedSubviews` is off unless
+ * gap belong there (the same split as `RnScrollView` and `RnFlatList`). `removeClippedSubviews` is off unless
  * you turn it on, as in `RnFlatList`: Android's default would leave rows with hosts in them empty.
  */
 export type RnSectionListProps<TItem, TSection = DefaultSectionT> = ResponsiveViewSx &
   Omit<RNSectionListProps<TItem, TSection>, 'contentContainerStyle' | 'style'> & {
-    /** Styles the scrolling content container — padding and gap belong here. */
+    /** Styles the scrolling content container; padding and gap belong here. */
     content?: ResponsiveViewSx
   }

package/src/atoms/rn-text/rn-text.types.ts

@@ -4,8 +4,8 @@ import type {ReactNode} from 'react'
 import type {TextProps as RNTextProps} from 'react-native'
 
 /**
- * React Native's `Text` in a theme typography variant — the React Native tier, for text outside a native host. It takes
- * `Box`'s `sx` surface for its own box — margins, flex, padding, a background — all but `align`, which here aligns the
+ * React Native's `Text` in a theme typography variant: the React Native tier, for text outside a native host. It takes
+ * `Box`'s `sx` surface for its own box (margins, flex, padding, a background), all but `align`, which here aligns the
  * lines.
  */
 export type RnTextProps = Omit<RNTextProps, 'style'> &

package/src/atoms/rn-view/rn-view.types.ts

@@ -1,12 +1,12 @@
 import type {ReactElement, ReactNode} from 'react'
 
-/** Carries a React Native view into a SwiftUI or Compose tree — `@expo/ui`'s `RNHostView` on both platforms. */
+/** Carries a React Native view into a SwiftUI or Compose tree: `@expo/ui`'s `RNHostView` on both platforms. */
 export type RnViewProps = {
   /**
    * A single React Native *view*. It may not contain React Native text: a bare string becomes a
    * `RawText` node, which has no component view, so mounting it across the SwiftUI host boundary
    * fails the `RCTComponentViewFactory` assertion and takes the whole app down. `@expo/ui` states
-   * the rule itself in `ListItem.ios.tsx` — "SwiftUI hosts can't render bare strings" — and wraps
+   * the rule itself in `ListItem.ios.tsx` ("SwiftUI hosts can't render bare strings") and wraps
    * every raw string in a SwiftUI `Text` before it reaches a host. Do the same: use the `Text` atom
    * inside the host, and keep `RnText` outside it.
    */
@@ -16,7 +16,7 @@ export type RnViewProps = {
    * intrinsic size and would otherwise stretch to fill the SwiftUI parent.
    */
   matchContents?: boolean
-  /** Not forwarded on either platform — give the child its own `testID`. */
+  /** Not forwarded on either platform: give the child its own `testID`. */
   testID?: string
 }
 

package/src/atoms/scroll-view/scroll-view.types.ts

@@ -5,7 +5,7 @@ import type {ReactNode} from 'react'
 export type ScrollViewAxis = 'horizontal' | 'vertical'
 
 /**
- * The `sx` props style the scrolling *content* container, not the viewport — `p` behaves
+ * The `sx` props style the scrolling *content* container, not the viewport: `p` behaves
  * like React Native's `contentContainerStyle` padding and scrolls with the content.
  */
 export type ScrollViewProps = ResponsiveSx & {
@@ -15,13 +15,13 @@ export type ScrollViewProps = ResponsiveSx & {
   children?: ReactNode
   /**
    * Enables pull-to-refresh. Async on purpose: the spinner runs until the promise settles, which is
-   * what SwiftUI's `refreshable` expects and what Compose's controlled indicator is driven from — so
+   * what SwiftUI's `refreshable` expects and what Compose's controlled indicator is driven from, so
    * neither platform needs a separate `refreshing` flag to be kept in sync by the caller.
    *
    * Only a vertical scroll view can be pulled; on a horizontal one both platforms ignore it.
    */
   onRefresh?: () => Promise<void>
-  /** iOS only — Compose exposes no indicator toggle, so Android always shows the native one. */
+  /** iOS only: Compose exposes no indicator toggle, so Android always shows the native one. */
   showsIndicators?: boolean
   /** The space between children. */
   spacing?: SpaceSize

package/src/atoms/segmented-control/segmented-control.android.tsx

@@ -29,7 +29,7 @@ export const SegmentedControl: SegmentedControlComponent = ({
     () => ({
       activeBorderColor: theme.color('fill.accent.primary'),
       activeContainerColor: theme.color('fill.accent.primary'),
-      activeContentColor: theme.color('content.on.bg'),
+      activeContentColor: theme.color('content.on.accent'),
       disabledActiveBorderColor: theme.color('fill.accent.disabled'),
       disabledActiveContainerColor: theme.color('fill.accent.disabled'),
       disabledActiveContentColor: theme.color('btn.content.disabled'),

package/src/atoms/segmented-control/segmented-control.ios.tsx

@@ -33,7 +33,7 @@ export const SegmentedControl: SegmentedControlComponent = ({
   return (
     <NativeSegmentedControl
       activePillColor={theme.color('fill.accent.primary')}
-      activeTextColor={theme.color('content.on.bg')}
+      activeTextColor={theme.color('content.on.accent')}
       disabled={disabled}
       fontFamily={face.fontFamily}
       fontSize={face.fontSize}

package/src/atoms/segmented-control/segmented-control.types.ts

@@ -1,7 +1,7 @@
 import type {ReactNode} from 'react'
 
 /**
- * A row of mutually exclusive segments, the selected one in the accent — kara's own `UISegmentedControl` on iOS,
+ * A row of mutually exclusive segments, the selected one in the accent: kara's own `UISegmentedControl` on iOS,
  * Material's single-choice segmented buttons on Android. It needs no `Screen` or `Island`: iOS is a plain view, Android
  * brings its own host. It takes the width it is given; the height is the platform's.
  */
@@ -9,13 +9,13 @@ export type SegmentedControlProps = {
   /** Stops the user changing the segment, and dims the control. */
   disabled?: boolean
   /**
-   * Called with the index and label of the segment the user picked — never for a tap on the one already selected.
+   * Called with the index and label of the segment the user picked, never for a tap on the one already selected.
    * Android plays `selection`; iOS's control plays its own feedback.
    */
   onChange?: (index: number, value: string) => void
   /** The selected segment. Controlled: pass back what `onChange` reports. */
   selectedIndex: number
-  /** Test identifier, on the whole control — reach a segment by its label. */
+  /** Test identifier, on the whole control. Reach a segment by its label. */
   testID?: string
   /** The segments' labels, in order. */
   values: string[]

package/src/atoms/skeleton/skeleton.tsx

@@ -1,21 +1,35 @@
-import {duration, opacity} from '@hzblj/kara-theme'
+import {duration, opacity, useReducedMotion} from '@hzblj/kara-theme'
 import {useEffect} from 'react'
-import {useAnimatedStyle, useSharedValue, withRepeat, withTiming} from 'react-native-reanimated'
+import {cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming} from 'react-native-reanimated'
 
+import {timing} from '../../motion'
 import {ABox} from '../box'
 import type {SkeletonComponent, SkeletonProps} from './skeleton.types'
 
+/** A breath, not a transition, so it sits off the scale: `slow` twice each way, at constant speed. */
+const PULSE = {...timing('slow', 'linear'), duration: duration.slow * 2}
+
 export const Skeleton: SkeletonComponent = ({borderRadius = 'small', h, testID, w}: SkeletonProps) => {
+  const reduced = useReducedMotion()
   const pulse = useSharedValue<number>(opacity.o40)
 
+  // With motion reduced it holds still, halfway between the two ends of the pulse.
   useEffect(() => {
-    pulse.value = withRepeat(withTiming(opacity.o100, {duration: duration.d800}), -1, true)
-  }, [pulse])
+    if (reduced) {
+      cancelAnimation(pulse)
+      pulse.value = opacity.o70
+      return
+    }
+
+    pulse.value = opacity.o40
+    pulse.value = withRepeat(withTiming(opacity.o100, PULSE), -1, true)
+  }, [pulse, reduced])
 
   const rStyle = useAnimatedStyle(() => ({opacity: pulse.value}), [])
 
   return (
     <ABox
+      aria-hidden
       bg="fill.quaternary"
       borderRadius={borderRadius}
       h={h}

package/src/atoms/skeleton/skeleton.types.ts

@@ -3,7 +3,8 @@ import type {RadiiSize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
 /**
- * A loading placeholder that pulses in `fill.quaternary` — a React Native view, so it needs no host. Sized with the
+ * A loading placeholder that pulses in `fill.quaternary`, and holds still with motion reduced. Hidden from screen
+ * readers: what is loading is for the screen to say. It is a React Native view, so it needs no host. Sized with the
  * `sx` names: `w`, `h`, `borderRadius`.
  */
 export type SkeletonProps = {

package/src/atoms/spacer/spacer.types.ts

@@ -1,7 +1,7 @@
 import type {SpaceSize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
-/** Takes up the free space in a stack — SwiftUI `Spacer` / Compose `Spacer` with `weight(1)`. */
+/** Takes up the free space in a stack: SwiftUI `Spacer` / Compose `Spacer` with `weight(1)`. */
 export type SpacerProps = {
   /** The least room it takes. iOS holds it along the stack's axis; Android as a minimum height only. */
   min?: SpaceSize

package/src/atoms/surface/surface.android.tsx

@@ -1,6 +1,6 @@
 import {Column, Surface as ComposeSurface, Shape} from '@expo/ui/jetpack-compose'
 import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
-import {useSxModifiers} from '@hzblj/kara-sx'
+import {splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {radii, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
@@ -24,15 +24,17 @@ export const Surface: SurfaceComponent = ({
   px,
   py,
   testID,
-  ...sx
+  ...props
 }: SurfaceProps) => {
   useHostGuard('Surface')
+  const [accessibility, sx] = splitAccessibility(props)
 
   const theme = useAppTheme()
   const sxModifiers = useSxModifiers({...sx, bg: undefined})
+  const accessibilityModifiers = useAccessibilityModifiers(accessibility)
   const modifiers = useMemo(
-    () => (testID ? [...sxModifiers, testIdModifier(testID)] : sxModifiers),
-    [sxModifiers, testID]
+    () => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers],
+    [accessibilityModifiers, sxModifiers, testID]
   )
   const contentModifiers = useSxModifiers({p, pb, pl, pr, pt, px, py, wide: sx.wide})
 

package/src/atoms/surface/surface.ios.tsx

@@ -1,13 +1,17 @@
 import {GlassEffectContainer, VStack} from '@expo/ui/swift-ui'
-import {useSxModifiers} from '@hzblj/kara-sx'
+import {splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
+import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
 import type {SurfaceComponent, SurfaceProps} from './surface.types'
 
-export const Surface: SurfaceComponent = ({children, glass = false, testID, ...sx}: SurfaceProps) => {
+export const Surface: SurfaceComponent = ({children, glass = false, testID, ...props}: SurfaceProps) => {
   useHostGuard('Surface')
+  const [accessibility, sx] = splitAccessibility(props)
 
   // `surface.primary` unless told otherwise, as Material's `Surface` is on Android — without it a plain one drew nothing.
-  const modifiers = useSxModifiers({bg: 'surface.primary', borderRadius: 'large', p: 's16', ...sx})
+  const sxModifiers = useSxModifiers({bg: 'surface.primary', borderRadius: 'large', p: 's16', ...sx})
+  const accessibilityModifiers = useAccessibilityModifiers(accessibility)
+  const modifiers = useMemo(() => [...sxModifiers, ...accessibilityModifiers], [accessibilityModifiers, sxModifiers])
   const content = (
     <VStack alignment="leading" modifiers={modifiers} testID={testID}>
       {children}

package/src/atoms/surface/surface.types.ts

@@ -1,17 +1,18 @@
-import type {ResponsiveSx} from '@hzblj/kara-sx'
+import type {AccessibilityProps, ResponsiveSx} from '@hzblj/kara-sx'
 import type {ReactNode} from 'react'
 
 /**
- * A container on `surface.primary`, padded `s16` and rounded `large` unless told otherwise — a SwiftUI `VStack` on
+ * A container on `surface.primary`, padded `s16` and rounded `large` unless told otherwise: a SwiftUI `VStack` on
  * iOS, Material's `Surface` around a `Column` on Android.
  */
-export type SurfaceProps = ResponsiveSx & {
-  /** Stacked vertically, from the leading edge. */
-  children?: ReactNode
-  /** iOS wraps the content in a `GlassEffectContainer`; Android raises it to a tonal elevation of `3`. */
-  glass?: boolean
-  /** Test identifier, forwarded to the native view. */
-  testID?: string
-}
+export type SurfaceProps = ResponsiveSx &
+  AccessibilityProps & {
+    /** Stacked vertically, from the leading edge. */
+    children?: ReactNode
+    /** iOS wraps the content in a `GlassEffectContainer`; Android raises it to a tonal elevation of `3`. */
+    glass?: boolean
+    /** Test identifier, forwarded to the native view. */
+    testID?: string
+  }
 
 export type SurfaceComponent = (props: SurfaceProps) => ReactNode

package/src/atoms/switch/switch.android.tsx

@@ -34,7 +34,7 @@ export const Switch: SwitchComponent = ({disabled = false, label, onValueChange,
     <ComposeSwitch
       colors={{
         checkedBorderColor: theme.color('fill.accent.primary'),
-        checkedThumbColor: theme.color('content.on.bg'),
+        checkedThumbColor: theme.color('content.on.accent'),
         checkedTrackColor: theme.color('fill.accent.primary'),
       }}
       enabled={!disabled}