@hzblj/kara-components 0.10.0 → 0.12.0

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/stagger/index.ts

@@ -0,0 +1,2 @@
+export * from './stagger'
+export * from './stagger.types'

package/src/atoms/stagger/stagger.tsx

@@ -0,0 +1,98 @@
+import {isMotionComponent, type MotionPresetConfig, type SxEntryExit, type SxLayout} from '@hzblj/kara-sx'
+import {duration} from '@hzblj/kara-theme'
+import {Children, cloneElement, isValidElement, type Key, type ReactElement, useLayoutEffect, useRef} from 'react'
+
+import {Box} from '../box'
+import type {StaggerComponent, StaggerMotion, StaggerProps} from './stagger.types'
+
+type MotionChildProps = {entering?: SxEntryExit; exiting?: SxEntryExit; layout?: SxLayout}
+
+const asConfig = (motion: StaggerMotion): MotionPresetConfig => (typeof motion === 'string' ? {preset: motion} : motion)
+
+/**
+ * The stagger's preset, or the child's own with the delay added: a child that names its look keeps it and only takes
+ * its turn. Reanimated's own builder is the child's, untouched, since adding a delay to one mutates it.
+ */
+const withDelay = (own: SxEntryExit | undefined, fallback: MotionPresetConfig, delay: number): SxEntryExit => {
+  if (own === undefined) {
+    return {...fallback, delay: (fallback.delay ?? 0) + delay}
+  }
+
+  if (typeof own === 'string') {
+    return {delay, preset: own}
+  }
+
+  return typeof own === 'object' && own !== null && 'preset' in own ? {...own, delay: (own.delay ?? 0) + delay} : own
+}
+
+export const Stagger: StaggerComponent = ({
+  children,
+  entering = 'fadeUp',
+  exiting,
+  from = 'start',
+  interval = 'stagger',
+  layout,
+  testID,
+  ...sx
+}: StaggerProps) => {
+  // The children that have arrived already. Only the ones new in this render take turns, so a list that grows by a
+  // page staggers the page, and an item added on its own arrives at once instead of after everything above it.
+  const arrived = useRef(new Set<Key>())
+  const items = Children.toArray(children)
+  const turns = new Map<Key, number>()
+
+  for (const item of items) {
+    if (isValidElement(item) && item.key !== null && !arrived.current.has(item.key)) {
+      turns.set(item.key, turns.size)
+    }
+  }
+
+  // Marked once committed: a render React throws away must not use up a child's turn.
+  useLayoutEffect(() => {
+    for (const key of turns.keys()) {
+      arrived.current.add(key)
+    }
+  })
+
+  const step = duration[interval]
+  const enter = asConfig(entering)
+  const leave = exiting === undefined ? undefined : asConfig(exiting)
+
+  const delayOf = (key: Key | null) => {
+    const turn = key === null ? undefined : turns.get(key)
+
+    if (turn === undefined) {
+      return 0
+    }
+
+    return (from === 'start' ? turn : turns.size - 1 - turn) * step
+  }
+
+  return (
+    // With `layout` the container moves and resizes with its children, so what holds it can follow.
+    <Box layout={layout} testID={testID} {...sx}>
+      {items.map(item => {
+        if (!isValidElement<MotionChildProps>(item)) {
+          return item
+        }
+
+        const delay = delayOf(item.key)
+
+        // A component that takes the motion props gets them directly, with no view added around it.
+        if (isMotionComponent(item.type)) {
+          return cloneElement(item as ReactElement<MotionChildProps>, {
+            entering: withDelay(item.props.entering, enter, delay),
+            exiting: item.props.exiting ?? leave,
+            layout: item.props.layout ?? layout,
+          })
+        }
+
+        return (
+          <Box entering={withDelay(undefined, enter, delay)} exiting={leave} key={item.key} layout={layout}>
+            {item}
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}

package/src/atoms/stagger/stagger.types.ts

@@ -0,0 +1,35 @@
+import type {MotionPreset, MotionPresetConfig, ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {DurationSize, SpringName} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+/** A preset by name, or one adjusted: `{preset: 'fadeUp', duration: 'slow'}`. Its `delay` is where the first one starts. */
+export type StaggerMotion = MotionPreset | MotionPresetConfig
+
+/**
+ * A `Box` whose children arrive one after another: each takes `entering` a step later than the one before. Children
+ * that arrive together are staggered among themselves, the first ones as much as a later batch (the next page of a
+ * list), while a single child added later arrives at once. A `Box`, `RnText` or `Pressable` child takes the motion
+ * itself; any other child is wrapped in a `Box` that does. With motion reduced every child fades, still one after
+ * another. The React Native tier: it needs no host.
+ */
+export type StaggerProps = ResponsiveViewSx & {
+  /** What arrives. A child with an `entering` preset of its own keeps it and only takes the delay. */
+  children?: ReactNode
+  /** How each child arrives. `fadeUp` by default. */
+  entering?: StaggerMotion
+  /** How a child leaves when it is removed. They leave together, not one after another; none by default. */
+  exiting?: StaggerMotion
+  /** Which end arrives first. `start` by default. */
+  from?: 'end' | 'start'
+  /** The step between one child and the next, a duration token. `stagger` (40 ms) by default, `micro` for a slower one. */
+  interval?: DurationSize
+  /**
+   * Moves the other children into place when one arrives or leaves, and the stagger itself to its new size: `true` on
+   * the `smooth` spring, or a spring token. Off by default. Give what sits after it `layout` too, so it follows.
+   */
+  layout?: boolean | SpringName
+  /** Test identifier, forwarded to the view. */
+  testID?: string
+}
+
+export type StaggerComponent = (props: StaggerProps) => ReactNode

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

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

@@ -1,4 +1,4 @@
-import type {ResponsiveSx} from '@hzblj/kara-sx'
+import type {AccessibilityProps, ResponsiveSx} from '@hzblj/kara-sx'
 import type {ColorToken, TextVariant} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
@@ -13,26 +13,27 @@ export type TextTransform = 'lowercase' | 'uppercase'
  * the native `sx` surface too: padding, a frame (`wide` lines it up by `align`), a background, and the `ios` bucket's
  * `contentTransition`, `animation` and `monospacedDigit` for a number that changes in place.
  */
-export type TextProps = ResponsiveSx & {
-  /**
-   * How its lines align. iOS reads `left` and `right` as leading and trailing, so they flip in a right-to-left
-   * layout; Android keeps them as they are.
-   */
-  align?: TextAlign
-  /** The text. */
-  children?: ReactNode
-  /** The text's colour. `content.primary` by default. */
-  color?: ColorToken
-  /** An underline or a strikethrough. */
-  decoration?: TextDecoration
-  /** The most lines it wraps to. iOS truncates the last with an ellipsis; Android clips it. */
-  numberOfLines?: number
-  /** Test identifier, forwarded to the native view. */
-  testID?: string
-  /** Upper- or lower-cases the text. Android applies it only when `children` is a plain string. */
-  transform?: TextTransform
-  /** The typography variant. `body` by default. */
-  variant?: TextVariant
-}
+export type TextProps = ResponsiveSx &
+  AccessibilityProps & {
+    /**
+     * How its lines align. iOS reads `left` and `right` as leading and trailing, so they flip in a right-to-left
+     * layout; Android keeps them as they are.
+     */
+    align?: TextAlign
+    /** The text. */
+    children?: ReactNode
+    /** The text's colour. `content.primary` by default. */
+    color?: ColorToken
+    /** An underline or a strikethrough. */
+    decoration?: TextDecoration
+    /** The most lines it wraps to. iOS truncates the last with an ellipsis; Android clips it. */
+    numberOfLines?: number
+    /** Test identifier, forwarded to the native view. */
+    testID?: string
+    /** Upper- or lower-cases the text. Android applies it only when `children` is a plain string. */
+    transform?: TextTransform
+    /** The typography variant. `body` by default. */
+    variant?: TextVariant
+  }
 
 export type TextComponent = (props: TextProps) => ReactNode

package/src/atoms/v-stack/v-stack.ios.tsx

@@ -1,6 +1,6 @@
 import {VStack as SwiftUIVStack} from '@expo/ui/swift-ui'
 import {onTapGesture} from '@expo/ui/swift-ui/modifiers'
-import {type FrameAlignment, useSxModifiers} from '@hzblj/kara-sx'
+import {type FrameAlignment, splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {spacing} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
@@ -18,13 +18,15 @@ export const VStack: VStackComponent = ({
   onPress,
   spacing: gap,
   testID,
-  ...sx
+  ...props
 }: VStackProps) => {
   useHostGuard('VStack')
+  const [accessibility, sx] = splitAccessibility(props)
   const sxModifiers = useSxModifiers(sx, ALIGNMENT[align])
+  const accessibilityModifiers = useAccessibilityModifiers(accessibility, onPress !== undefined)
   const modifiers = useMemo(
-    () => (onPress ? [...sxModifiers, onTapGesture(onPress)] : sxModifiers),
-    [onPress, sxModifiers]
+    () => [...sxModifiers, ...(onPress ? [onTapGesture(onPress)] : []), ...accessibilityModifiers],
+    [accessibilityModifiers, onPress, sxModifiers]
   )
 
   return (

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

@@ -1,24 +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 VStackAlign = 'center' | 'end' | 'start'
 
 /** Stacks its children top to bottom: SwiftUI `VStack` / Compose `Column`. */
-export type VStackProps = ResponsiveSx & {
-  /** The children's horizontal alignment. `start` by default. */
-  align?: VStackAlign
-  /** Laid out top to bottom, `spacing` apart. */
-  children?: ReactNode
-  /**
-   * Makes the whole stack pressable. iOS adds a tap gesture with no press feedback; Android a `clickable` whose ripple
-   * fills the stack's shape.
-   */
-  onPress?: () => void
-  /** The space between children. */
-  spacing?: SpaceSize
-  /** Test identifier, forwarded to the native view. */
-  testID?: string
-}
+export type VStackProps = ResponsiveSx &
+  AccessibilityProps & {
+    /** The children's horizontal alignment. `start` by default. */
+    align?: VStackAlign
+    /** Laid out top to bottom, `spacing` apart. */
+    children?: ReactNode
+    /**
+     * Makes the whole stack pressable. iOS adds a tap gesture with no press feedback; Android a `clickable` whose ripple
+     * fills the stack's shape. Screen readers then read the stack as one button.
+     */
+    onPress?: () => void
+    /** The space between children. */
+    spacing?: SpaceSize
+    /** Test identifier, forwarded to the native view. */
+    testID?: string
+  }
 
 export type VStackComponent = (props: VStackProps) => ReactNode

package/src/atoms/z-stack/z-stack.ios.tsx

@@ -1,6 +1,6 @@
 import {ZStack as SwiftUIZStack} from '@expo/ui/swift-ui'
 import {onTapGesture} from '@expo/ui/swift-ui/modifiers'
-import {type FrameAlignment, useSxModifiers} from '@hzblj/kara-sx'
+import {type FrameAlignment, splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
 import type {ZStackAlign, ZStackComponent, ZStackProps} from './z-stack.types'
@@ -11,12 +11,14 @@ const ALIGNMENT = {
   top: 'top',
 } as const satisfies Record<ZStackAlign, FrameAlignment>
 
-export const ZStack: ZStackComponent = ({align = 'center', children, onPress, testID, ...sx}: ZStackProps) => {
+export const ZStack: ZStackComponent = ({align = 'center', children, onPress, testID, ...props}: ZStackProps) => {
   useHostGuard('ZStack')
+  const [accessibility, sx] = splitAccessibility(props)
   const sxModifiers = useSxModifiers(sx, ALIGNMENT[align])
+  const accessibilityModifiers = useAccessibilityModifiers(accessibility, onPress !== undefined)
   const modifiers = useMemo(
-    () => (onPress ? [...sxModifiers, onTapGesture(onPress)] : sxModifiers),
-    [onPress, sxModifiers]
+    () => [...sxModifiers, ...(onPress ? [onTapGesture(onPress)] : []), ...accessibilityModifiers],
+    [accessibilityModifiers, onPress, sxModifiers]
   )
 
   return (

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

@@ -1,21 +1,22 @@
-import type {ResponsiveSx} from '@hzblj/kara-sx'
+import type {AccessibilityProps, ResponsiveSx} from '@hzblj/kara-sx'
 import type {ReactNode} from 'react'
 
 export type ZStackAlign = 'bottom' | 'center' | 'top'
 
 /** Layers its children on one another: SwiftUI `ZStack` / Compose `Box`. */
-export type ZStackProps = ResponsiveSx & {
-  /** Where the children sit vertically; they are always centred horizontally. `center` by default. */
-  align?: ZStackAlign
-  /** Drawn in order, the last on top. */
-  children?: ReactNode
-  /**
-   * Makes the whole stack pressable. iOS adds a tap gesture with no press feedback; Android a `clickable` whose ripple
-   * fills the stack's shape.
-   */
-  onPress?: () => void
-  /** Test identifier, forwarded to the native view. */
-  testID?: string
-}
+export type ZStackProps = ResponsiveSx &
+  AccessibilityProps & {
+    /** Where the children sit vertically; they are always centred horizontally. `center` by default. */
+    align?: ZStackAlign
+    /** Drawn in order, the last on top. */
+    children?: ReactNode
+    /**
+     * Makes the whole stack pressable. iOS adds a tap gesture with no press feedback; Android a `clickable` whose ripple
+     * fills the stack's shape. Screen readers then read the stack as one button.
+     */
+    onPress?: () => void
+    /** Test identifier, forwarded to the native view. */
+    testID?: string
+  }
 
 export type ZStackComponent = (props: ZStackProps) => ReactNode

package/src/glyph/glyph.android.tsx

@@ -5,8 +5,20 @@ import {spacing, useAppTheme} from '@hzblj/kara-theme'
 import type {GlyphComponent, GlyphProps} from './glyph.types'
 
 /** The Material Symbol `@hzblj/kara-native` ships as a drawable — inside a Compose host. */
-export const Glyph: GlyphComponent = ({color = 'content.primary', name, size = 's24'}: GlyphProps) => {
+export const Glyph: GlyphComponent = ({
+  accessibilityLabel,
+  color = 'content.primary',
+  name,
+  size = 's24',
+}: GlyphProps) => {
   const theme = useAppTheme()
 
-  return <DrawableIcon iconColor={theme.color(color)} iconSize={spacing[size]} resourceName={GLYPHS[name].android} />
+  return (
+    <DrawableIcon
+      accessibilityLabel={accessibilityLabel}
+      iconColor={theme.color(color)}
+      iconSize={spacing[size]}
+      resourceName={GLYPHS[name].android}
+    />
+  )
 }

package/src/glyph/glyph.ios.tsx

@@ -1,15 +1,25 @@
 import {Image} from '@expo/ui/swift-ui'
-import {accessibilityHidden} from '@expo/ui/swift-ui/modifiers'
+import {accessibilityHidden, accessibilityLabel as labelModifier} from '@expo/ui/swift-ui/modifiers'
 import {GLYPHS} from '@hzblj/kara-native'
 import {spacing, useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
 
 import type {GlyphComponent, GlyphProps} from './glyph.types'
 
 const DECORATIVE = [accessibilityHidden(true)]
 
 /** The SF Symbol the system already has — inside a SwiftUI host. */
-export const Glyph: GlyphComponent = ({color = 'content.primary', name, size = 's24'}: GlyphProps) => {
+export const Glyph: GlyphComponent = ({
+  accessibilityLabel,
+  color = 'content.primary',
+  name,
+  size = 's24',
+}: GlyphProps) => {
   const theme = useAppTheme()
+  const modifiers = useMemo(
+    () => (accessibilityLabel ? [labelModifier(accessibilityLabel)] : DECORATIVE),
+    [accessibilityLabel]
+  )
 
-  return <Image color={theme.color(color)} modifiers={DECORATIVE} size={spacing[size]} systemName={GLYPHS[name].ios} />
+  return <Image color={theme.color(color)} modifiers={modifiers} size={spacing[size]} systemName={GLYPHS[name].ios} />
 }

package/src/glyph/glyph.types.ts

@@ -7,6 +7,8 @@ import type {ReactNode} from 'react'
  * their own icons with `Icon` / `RnIcon`.
  */
 export type GlyphProps = {
+  /** What a screen reader says. Unset, the glyph is decorative and hidden from it. */
+  accessibilityLabel?: string
   color?: ColorToken
   name: GlyphName
   size?: SpaceSize

package/src/molecules/collapsible/collapsible.android.tsx

@@ -15,19 +15,25 @@ import {
   graphicsLayer,
   tween,
 } from '@expo/ui/jetpack-compose/modifiers'
-import {duration, useAppTheme} from '@hzblj/kara-theme'
+import {useAccessibilityModifiers} from '@hzblj/kara-sx'
+import {duration, useAppTheme, useReducedMotion} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {Glyph} from '../../glyph'
 import {useHostGuard} from '../../host-context'
 import type {CollapsibleComponent, CollapsibleProps} from './collapsible.types'
 
-/** Material's standard easing, at the length a disclosure takes. */
-const TURN = tween({durationMillis: duration.d200, easing: 'fastOutSlowIn'})
+/** Material's standard easing, at the length a chevron turning takes. */
+const TURN = tween({durationMillis: duration.fast, easing: 'fastOutSlowIn'})
+const SNAP = tween({durationMillis: duration.none})
 
 /** Down from the row, fading in — Compose's default grows from a corner, sideways as well as down. */
 const ENTER = EnterTransition.expandVertically().plus(EnterTransition.fadeIn())
 const EXIT = ExitTransition.shrinkVertically().plus(ExitTransition.fadeOut())
 
+/** With motion reduced (Compose follows the device's own setting, this `KaraProvider reduceMotion`): no growing. */
+const FADE_IN = EnterTransition.fadeIn()
+const FADE_OUT = ExitTransition.fadeOut()
+
 const WIDE = [fillMaxWidth()]
 
 /** Material's least touch target. */
@@ -41,11 +47,21 @@ const ROW_HEIGHT = 48
 export const Collapsible: CollapsibleComponent = ({children, expanded, label, onExpandedChange}: CollapsibleProps) => {
   useHostGuard('Collapsible')
   const theme = useAppTheme()
+  const reduced = useReducedMotion()
+  const accessibilityModifiers = useAccessibilityModifiers({}, true)
   const modifiers = useMemo(
-    () => [fillMaxWidth(), defaultMinSize({minHeight: ROW_HEIGHT}), clickable(() => onExpandedChange(!expanded))],
-    [expanded, onExpandedChange]
+    () => [
+      fillMaxWidth(),
+      defaultMinSize({minHeight: ROW_HEIGHT}),
+      clickable(() => onExpandedChange(!expanded)),
+      ...accessibilityModifiers,
+    ],
+    [accessibilityModifiers, expanded, onExpandedChange]
+  )
+  const turn = useMemo(
+    () => [graphicsLayer({rotationZ: animated(expanded ? 90 : 0, reduced ? SNAP : TURN)})],
+    [expanded, reduced]
   )
-  const turn = useMemo(() => [graphicsLayer({rotationZ: animated(expanded ? 90 : 0, TURN)})], [expanded])
 
   return (
     <Column modifiers={WIDE}>
@@ -57,7 +73,11 @@ export const Collapsible: CollapsibleComponent = ({children, expanded, label, on
           <Glyph name="chevronRight" size="s20" />
         </Box>
       </Row>
-      <AnimatedVisibility enterTransition={ENTER} exitTransition={EXIT} visible={expanded}>
+      <AnimatedVisibility
+        enterTransition={reduced ? FADE_IN : ENTER}
+        exitTransition={reduced ? FADE_OUT : EXIT}
+        visible={expanded}
+      >
         {children}
       </AnimatedVisibility>
     </Column>