@hzblj/kara-components 0.10.0 → 0.11.0

package/src/atoms/h-stack/h-stack.types.ts

@@ -1,21 +1,25 @@
-import type {ResponsiveSx} from '@hzblj/kara-sx'
+import type {AccessibilityProps, ResponsiveSx} from '@hzblj/kara-sx'
 import type {SpaceSize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
 export type HStackAlign = 'center' | 'end' | 'start'
 
 /** A horizontal stack: SwiftUI `HStack` / Compose `Row`. */
-export type HStackProps = ResponsiveSx & {
-  /** How the children line up vertically: `start` is the top, `end` the bottom. `start` by default. */
-  align?: HStackAlign
-  /** Native views, laid out from the leading edge. */
-  children?: ReactNode
-  /** Makes the stack pressable: a tap gesture on iOS, a `clickable` with Material's ripple on Android. */
-  onPress?: () => void
-  /** The gap between children. Unset, SwiftUI puts its default spacing between them and Compose none. */
-  spacing?: SpaceSize
-  /** Test identifier, forwarded to the native view. */
-  testID?: string
-}
+export type HStackProps = ResponsiveSx &
+  AccessibilityProps & {
+    /** How the children line up vertically: `start` is the top, `end` the bottom. `start` by default. */
+    align?: HStackAlign
+    /** Native views, laid out from the leading edge. */
+    children?: ReactNode
+    /**
+     * Makes the stack pressable: a tap gesture on iOS, a `clickable` with Material's ripple on Android. Screen readers
+     * then read the stack as one button.
+     */
+    onPress?: () => void
+    /** The gap between children. Unset, SwiftUI puts its default spacing between them and Compose none. */
+    spacing?: SpaceSize
+    /** Test identifier, forwarded to the native view. */
+    testID?: string
+  }
 
 export type HStackComponent = (props: HStackProps) => ReactNode

package/src/atoms/icon-button/icon-button.android.tsx

@@ -1,15 +1,28 @@
 import {IconButton as ComposeIconButton} from '@expo/ui/jetpack-compose'
+import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 
 import {useHostGuard} from '../../host-context'
 import {Icon} from '../icon'
 import type {IconButtonComponent, IconButtonProps} from './icon-button.types'
 
-export const IconButton: IconButtonComponent = ({disabled = false, name, onPress}: IconButtonProps) => {
+export const IconButton: IconButtonComponent = ({
+  accessibilityHint,
+  accessibilityLabel,
+  disabled = false,
+  name,
+  onPress,
+}: IconButtonProps) => {
   useHostGuard('IconButton')
+  // The label rides on the icon, as Material's own icon buttons carry it; the hint labels the click.
+  const modifiers = useAccessibilityModifiers({accessibilityHint}, accessibilityHint !== undefined)
 
   return (
-    <ComposeIconButton enabled={!disabled} onClick={onPress}>
-      <Icon color={disabled ? 'btn.content.disabled' : 'content.primary'} name={name} />
+    <ComposeIconButton enabled={!disabled} modifiers={modifiers} onClick={onPress}>
+      <Icon
+        accessibilityLabel={accessibilityLabel}
+        color={disabled ? 'btn.content.disabled' : 'content.primary'}
+        name={name}
+      />
     </ComposeIconButton>
   )
 }

package/src/atoms/icon-button/icon-button.ios.tsx

@@ -1,5 +1,6 @@
 import {Button} from '@expo/ui/swift-ui'
 import {buttonStyle, contentShape, disabled as disabledModifier, shapes} from '@expo/ui/swift-ui/modifiers'
+import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {useMemo} from 'react'
 
 import {useHostGuard} from '../../host-context'
@@ -13,24 +14,32 @@ const TARGET = 44
 /** The whole square takes the tap, not only the glyph's own pixels. */
 const WHOLE_TARGET = {modifiers: [contentShape(shapes.circle())]}
 
-export const IconButton: IconButtonComponent = ({disabled = false, name, onPress, testID}: IconButtonProps) => {
+export const IconButton: IconButtonComponent = ({
+  accessibilityHint,
+  accessibilityLabel,
+  disabled = false,
+  name,
+  onPress,
+  testID,
+}: IconButtonProps) => {
   useHostGuard('IconButton')
+  const accessibilityModifiers = useAccessibilityModifiers({accessibilityHint})
 
   const modifiers = useMemo(() => {
-    const list = [buttonStyle('plain')]
+    const list = [buttonStyle('plain'), ...accessibilityModifiers]
 
     if (disabled) {
       list.push(disabledModifier(true))
     }
 
     return list
-  }, [disabled])
+  }, [accessibilityModifiers, disabled])
 
   return (
     <Button modifiers={modifiers} onPress={onPress} testID={testID}>
       <ZStack h={TARGET} ios={WHOLE_TARGET} w={TARGET}>
         {/* SwiftUI dims a disabled button's label itself; a disabled colour on top of that dimmed it twice. */}
-        <Icon color="content.primary" name={name} />
+        <Icon accessibilityLabel={accessibilityLabel} color="content.primary" name={name} />
       </ZStack>
     </Button>
   )

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

@@ -8,6 +8,13 @@ import type {IconName} from '../icon'
  * itself the same way on both.
  */
 export type IconButtonProps = {
+  /**
+   * What VoiceOver and TalkBack say for the button, since an icon has no words of its own: "Share", "Add to
+   * favourites". Required for that reason.
+   */
+  accessibilityLabel: string
+  /** What pressing it does, when the label alone does not say. See `AccessibilityProps`. */
+  accessibilityHint?: string
   /** Dims the icon (iOS's own disabled look, `btn.content.disabled` on Android) and stops the button responding. */
   disabled?: boolean
   /** The icon, one of the app's. */

package/src/atoms/image/image.tsx

@@ -3,12 +3,12 @@ import {duration} from '@hzblj/kara-theme'
 import {Image as ExpoImage, type ImageProps as ExpoImageProps} from 'expo-image'
 import type {Ref} from 'react'
 
-const FADE = {duration: duration.d100, timing: 'linear'} as const
+const FADE = {duration: duration.quick, timing: 'ease-out'} as const
 
 const FadingImage = (props: ExpoImageProps & {ref?: Ref<ExpoImage>}) => <ExpoImage transition={FADE} {...props} />
 
 /**
- * `expo-image` with the `sx` props, the way `Box` is a `View` with them, and the design system's 100 ms linear fade
- * already applied, so a loaded image never pops in. An explicit `transition` wins, and so does an explicit `style`.
+ * `expo-image` with the `sx` props, the way `Box` is a `View` with them, and the design system's fade (`quick`,
+ * eased out) already applied, so a loaded image never pops in. An explicit `transition` wins, and so does an explicit `style`.
  */
 export const Image = sx(FadingImage)

package/src/atoms/pressable/pressable.tsx

@@ -1,18 +1,21 @@
-import {useSplitSx} from '@hzblj/kara-sx'
-import {duration, opacity, 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, type ViewStyle} from 'react-native'
-import Animated, {useAnimatedStyle, useSharedValue, withSpring, withTiming} from 'react-native-reanimated'
+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 quickly and leaves a little slower, as UIKit's own highlight does. */
-const DIM_IN = {duration: duration.d100}
-const DIM_OUT = {duration: duration.d200}
+/** 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'
 
@@ -30,22 +33,27 @@ export const Pressable: PressableComponent = ({
   testID,
   ...props
 }: PressableProps) => {
-  const [resolved, rest] = useSplitSx(props)
+  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(() => {
-    if (pressEffect === 'scale') {
+    if (effect === 'scale') {
       return {transform: [{scale: 1 - (1 - pressedScale) * pressed.value}]}
     }
 
-    return pressEffect === 'opacity' ? {opacity: 1 - (1 - dimmed) * pressed.value} : {}
-  }, [dimmed, pressEffect, pressedScale])
+    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.
@@ -63,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 (pressEffect === 'scale') {
-      pressed.value = withSpring(1, SPRING)
-    } else if (pressEffect === 'opacity') {
-      pressed.value = withTiming(1, DIM_IN)
+    if (effect !== 'none') {
+      pressed.value = withTiming(1, effect === 'scale' ? SCALE_IN : DIM_IN)
     }
 
     if (feedback) {
       haptics.prepare(feedback)
     }
-  }, [feedback, pressEffect, pressed])
+  }, [effect, feedback, pressed])
 
   const onPressOut = useCallback(() => {
-    pressed.value = pressEffect === 'scale' ? withSpring(0, SPRING) : withTiming(0, DIM_OUT)
-  }, [pressEffect, pressed])
+    pressed.value = withTiming(0, effect === 'scale' ? SCALE_OUT : DIM_OUT)
+  }, [effect, pressed])
 
   const onPressWithHaptic = useCallback(() => {
     if (feedback) {
@@ -90,6 +96,7 @@ export const Pressable: PressableComponent = ({
     return (
       <Animated.View style={[androidStyle.outer, rStyle]}>
         <RNPressable
+          {...a11y}
           android_ripple={ripple}
           disabled={disabled}
           hitSlop={8}
@@ -108,6 +115,7 @@ export const Pressable: PressableComponent = ({
 
   return (
     <AnimatedPressable
+      {...a11y}
       disabled={disabled}
       hitSlop={8}
       onPress={onPressWithHaptic}

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

@@ -1,42 +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 springs down, it dims, or it stays still. */
+/** 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. Each platform
- * presses its own way by default: iOS springs the content down to 96%, Android draws Material's ripple over it,
+ * 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`). The React Native
- * tier: it needs no host.
+ * 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 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` springs 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.
-   */
-  pressEffect?: PressEffect
-  /** What `opacity` dims to, an opacity token. `o60` by default. */
-  pressedOpacity?: OpacitySize
-  /** What `scale` springs down to. `0.96` by default. */
-  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 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

@@ -5,6 +5,8 @@ import type {ReactNode} from 'react'
  * 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/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/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,8 +3,9 @@ import type {RadiiSize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
 /**
- * A loading placeholder that pulses in `fill.quaternary`. It is a React Native view, so it needs no host. Sized with
- * the `sx` names: `w`, `h`, `borderRadius`.
+ * 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 = {
   /** The corner radius. `small` by default. */

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
  * 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}

package/src/atoms/text/text.android.tsx

@@ -1,6 +1,6 @@
 import {Text as ComposeText} 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 {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
@@ -33,15 +33,17 @@ export const Text: TextComponent = ({
   testID,
   transform,
   variant = 'body',
-  ...sx
+  ...props
 }: TextProps) => {
   useHostGuard('Text')
   const theme = useAppTheme()
   const style = theme.typography[variant]
+  const [accessibility, sx] = splitAccessibility(props)
   const sxModifiers = useSxModifiers(sx)
+  const accessibilityModifiers = useAccessibilityModifiers(accessibility)
   const modifiers = useMemo(
-    () => (testID ? [...sxModifiers, testIdModifier(testID)] : sxModifiers),
-    [sxModifiers, testID]
+    () => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers],
+    [accessibilityModifiers, sxModifiers, testID]
   )
 
   return (

package/src/atoms/text/text.ios.tsx

@@ -10,7 +10,7 @@ import {
   underline,
 } from '@expo/ui/swift-ui/modifiers'
 import {scaledFont} from '@hzblj/kara-native/swift-ui'
-import {type FrameAlignment, useSxModifiers} from '@hzblj/kara-sx'
+import {type FrameAlignment, splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
@@ -39,13 +39,15 @@ export const Text: TextComponent = ({
   testID,
   transform,
   variant = 'body',
-  ...sx
+  ...props
 }: TextProps) => {
   useHostGuard('Text')
   const theme = useAppTheme()
   const style = theme.typography[variant]
   // After the text's own modifiers: the font and colour belong to the glyphs, the padding and frame to the box around.
+  const [accessibility, sx] = splitAccessibility(props)
   const sxModifiers = useSxModifiers(sx, FRAME_ALIGNMENT[align ?? 'left'])
+  const accessibilityModifiers = useAccessibilityModifiers(accessibility)
 
   const modifiers = useMemo(() => {
     const list: ModifierConfig[] = [
@@ -76,8 +78,8 @@ export const Text: TextComponent = ({
       list.push(lineLimit(numberOfLines))
     }
 
-    return [...list, ...sxModifiers]
-  }, [align, color, decoration, numberOfLines, style, sxModifiers, theme, transform])
+    return [...list, ...sxModifiers, ...accessibilityModifiers]
+  }, [accessibilityModifiers, align, color, decoration, numberOfLines, style, sxModifiers, theme, transform])
 
   return (
     <SwiftUIText modifiers={modifiers} testID={testID}>