@hzblj/kara-components 0.10.0 → 0.11.0

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>

package/src/molecules/labeled-content/labeled-content.tsx

@@ -19,8 +19,19 @@ export const LabeledContent: LabeledContentComponent = ({
   px,
   testID,
   value,
+  ...accessibility
 }: LabeledContentProps) => (
-  <HStack align="center" onPress={onPress} px={px} py="s8" spacing="s12" testID={testID} wide>
+  <HStack
+    accessible={children === undefined}
+    {...accessibility}
+    align="center"
+    onPress={onPress}
+    px={px}
+    py="s8"
+    spacing="s12"
+    testID={testID}
+    wide
+  >
     {icon ? <Icon color="content.secondary" name={icon} size="s20" /> : null}
     <Text variant="body">{label}</Text>
     <Spacer />

package/src/molecules/labeled-content/labeled-content.types.ts

@@ -1,12 +1,14 @@
+import type {AccessibilityProps} from '@hzblj/kara-sx'
 import type {SpaceSize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 import type {IconName} from '../../atoms/icon'
 
 /**
  * A label on the leading edge and its value on the trailing edge: the settings/detail row.
- * Pass `children` instead of `value` when the trailing side is a control rather than text.
+ * Pass `children` instead of `value` when the trailing side is a control rather than text. With a `value`, screen
+ * readers read the row as one element ("Version, 2.4"); with a control, the control stays its own.
  */
-export type LabeledContentProps = {
+export type LabeledContentProps = AccessibilityProps & {
   /** The trailing side when it is a control, in place of `value`. */
   children?: ReactNode
   /** One of the app's icons, before the label, in the secondary colour. */

package/src/molecules/link/link.tsx

@@ -12,13 +12,14 @@ export const Link: LinkComponent = ({
   testID,
   url,
   variant = 'body',
+  ...accessibility
 }: LinkProps) => {
   const open = () => {
     Linking.openURL(url).catch(() => undefined)
   }
 
   return (
-    <HStack align="center" onPress={open} spacing="s8" testID={testID}>
+    <HStack accessibilityRole="link" {...accessibility} align="center" onPress={open} spacing="s8" testID={testID}>
       {icon ? <Icon color={color} name={icon} size="s20" /> : null}
       <Text color={color} variant={variant}>
         {label}

package/src/molecules/link/link.types.ts

@@ -1,10 +1,11 @@
+import type {AccessibilityProps} from '@hzblj/kara-sx'
 import type {ColorToken, TextVariant} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
 import type {IconName} from '../../atoms/icon'
 
 /** Opens an external URL in the platform browser or the app that claims the scheme. */
-export type LinkProps = {
+export type LinkProps = AccessibilityProps & {
   /** Colours the label and the icon. `content.accent` by default. */
   color?: ColorToken
   /** One of the app's icons, before the label. */

package/src/molecules/list-item/list-item.tsx

@@ -14,8 +14,26 @@ import type {ListItemComponent, ListItemProps} from './list-item.types'
  */
 const TEXT_FILLS_ROW = {weight: 1}
 
-export const ListItem: ListItemComponent = ({icon, onPress, px, subtitle, testID, title}: ListItemProps) => (
-  <HStack align="center" onPress={onPress} px={px} py="s8" spacing="s12" testID={testID} wide>
+export const ListItem: ListItemComponent = ({
+  icon,
+  onPress,
+  px,
+  subtitle,
+  testID,
+  title,
+  ...accessibility
+}: ListItemProps) => (
+  <HStack
+    accessible
+    {...accessibility}
+    align="center"
+    onPress={onPress}
+    px={px}
+    py="s8"
+    spacing="s12"
+    testID={testID}
+    wide
+  >
     {icon ? <Icon color="content.secondary" name={icon} size="s20" /> : null}
     <VStack android={TEXT_FILLS_ROW} spacing="s2">
       <Text variant="body">{title}</Text>

package/src/molecules/list-item/list-item.types.ts

@@ -1,13 +1,15 @@
+import type {AccessibilityProps} from '@hzblj/kara-sx'
 import type {SpaceSize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
 import type {IconName} from '../../atoms/icon'
 
 /**
- * A row with an optional icon, a title and subtitle, and a chevron when it can be pressed. A native atom: it renders
- * inside `<Screen>` or `<Island>`; `RnListItem` is the same row without a host.
+ * A row with an optional icon, a title and subtitle, and a chevron when it can be pressed. Screen readers read it as one
+ * element (a button when it is pressable). A native atom: it renders inside `<Screen>` or `<Island>`; `RnListItem` is
+ * the same row without a host.
  */
-export type ListItemProps = {
+export type ListItemProps = AccessibilityProps & {
   /** One of the app's icons, before the title, in the secondary colour. */
   icon?: IconName
   /** Makes the row pressable and adds a chevron on the trailing edge. */

package/src/molecules/navigation-bar/navigation-bar.android.tsx

@@ -27,7 +27,7 @@ export const NavigationBar: NavigationBarComponent = ({
 }: NavigationBarProps) => {
   const theme = useAppTheme()
   const font = theme.typography.headline
-  const color = theme.color(inverted ? 'content.on.bg' : 'content.primary')
+  const color = theme.color(inverted ? 'content.on.accent' : 'content.primary')
 
   const nativeLeadingItems = useMemo(() => leadingItems?.map(toNativeItem), [leadingItems])
   const nativeTrailingItems = useMemo(() => trailingItems?.map(toNativeItem), [trailingItems])

package/src/molecules/navigation-bar/navigation-bar.ios.tsx

@@ -38,7 +38,7 @@ export const NavigationBar: NavigationBarComponent = ({
   const theme = useAppTheme()
   const barRef = useRef<NavigationBarRef>(null)
   const font = theme.typography.headline
-  const color = theme.color(inverted ? 'content.on.bg' : 'content.primary')
+  const color = theme.color(inverted ? 'content.on.accent' : 'content.primary')
 
   useImperativeHandle(
     search?.ref,

package/src/molecules/rn-list-item/rn-list-item.tsx

@@ -1,3 +1,4 @@
+import {accessibilityProps} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {Platform, Pressable, type PressableStateCallbackType} from 'react-native'
@@ -8,8 +9,18 @@ import {RnText} from '../../atoms/rn-text'
 import {RnGlyph} from '../../glyph'
 import type {RnListItemComponent, RnListItemProps} from './rn-list-item.types'
 
-export const RnListItem: RnListItemComponent = ({icon, onPress, px, subtitle, testID, title}: RnListItemProps) => {
+export const RnListItem: RnListItemComponent = ({
+  icon,
+  onPress,
+  px,
+  subtitle,
+  testID,
+  title,
+  ...accessibility
+}: RnListItemProps) => {
   const theme = useAppTheme()
+  // One element for a screen reader, as `ListItem` is: a button when it can be pressed.
+  const a11y = accessibilityProps({accessible: true, ...accessibility}, onPress ? 'button' : undefined)
   const pressedColor = theme.color('fill.tertiary')
 
   const ripple = useMemo(() => ({color: pressedColor}), [pressedColor])
@@ -37,11 +48,15 @@ export const RnListItem: RnListItemComponent = ({icon, onPress, px, subtitle, te
   )
 
   if (!onPress) {
-    return <Box testID={testID}>{row}</Box>
+    return (
+      <Box {...a11y} testID={testID}>
+        {row}
+      </Box>
+    )
   }
 
   return (
-    <Pressable accessibilityRole="button" android_ripple={ripple} onPress={onPress} style={highlight} testID={testID}>
+    <Pressable {...a11y} android_ripple={ripple} onPress={onPress} style={highlight} testID={testID}>
       {row}
     </Pressable>
   )

package/src/molecules/scroll-edge-container/scroll-edge-container.android.tsx

@@ -1,15 +1,16 @@
-import {duration, opacity} from '@hzblj/kara-theme'
+import {opacity} from '@hzblj/kara-theme'
 import {cloneElement, type ReactNode, useCallback, useRef} from 'react'
 import type {LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent} from 'react-native'
 import {type SharedValue, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'
 
 import {ABox, Box} from '../../atoms/box'
+import {timing} from '../../motion'
 import type {ScrollEdgeContainerComponent, ScrollEdgeContainerProps} from './scroll-edge-container.types'
 
 /** Less than a pixel scrolled is not scrolled — a fling settles a fraction away from the edge. */
 const EDGE_SLOP = 0.5
 
-const FILL = {duration: duration.d200}
+const FILL = timing('quick', 'out')
 
 type Bar = {children: ReactNode; filled: SharedValue<number>}
 

package/src/molecules/stepper/stepper.ios.tsx

@@ -1,5 +1,6 @@
 import {Stepper as SwiftUIStepper} from '@expo/ui/swift-ui'
 import {labelsHidden} from '@expo/ui/swift-ui/modifiers'
+import {useReducedMotion} from '@hzblj/kara-theme'
 import {useRef} from 'react'
 
 import {HStack} from '../../atoms/h-stack'
@@ -14,10 +15,11 @@ const LABEL_HIDDEN = [labelsHidden()]
 /**
  * SwiftUI's `Stepper` at the end of a row, the label leading and the value just before the control — the way iOS's own
  * settings show a stepped value. The value rolls to the next one (`numericText`), up or down with the change, in
- * monospaced digits so the row does not jump.
+ * monospaced digits so the row does not jump. With motion reduced it cross-fades instead.
  */
 export const Stepper: StepperComponent = ({label, max, min, onValueChange, step = 1, value}: StepperProps) => {
   useHostGuard('Stepper')
+  const reduced = useReducedMotion()
   const previous = useRef(value)
   const countsDown = value < previous.current
   previous.current = value
@@ -28,7 +30,11 @@ export const Stepper: StepperComponent = ({label, max, min, onValueChange, step
       <Spacer />
       <Text
         color="content.secondary"
-        ios={{animation: {value}, contentTransition: {countsDown, type: 'numericText'}, monospacedDigit: true}}
+        ios={{
+          animation: {value},
+          contentTransition: reduced ? {type: 'opacity'} : {countsDown, type: 'numericText'},
+          monospacedDigit: true,
+        }}
       >
         {String(value)}
       </Text>

package/src/motion.ts

@@ -0,0 +1,13 @@
+import {type DurationSize, duration, type EasingName, easing} from '@hzblj/kara-theme'
+import {Easing, ReduceMotion, type WithTimingConfig} from 'react-native-reanimated'
+
+/**
+ * A Reanimated timing from the motion tokens, `smoothOut` unless told otherwise. `ReduceMotion.Never`, because a
+ * component has applied `useReducedMotion` before it animates: what is left (a fade, a dim) is meant to run, and
+ * Reanimated's own check reads the setting once at launch and never hears of `KaraProvider reduceMotion`.
+ */
+export const timing = (size: DurationSize, curve: EasingName = 'smoothOut'): WithTimingConfig => {
+  const [x1, y1, x2, y2] = easing[curve]
+
+  return {duration: duration[size], easing: Easing.bezier(x1, y1, x2, y2), reduceMotion: ReduceMotion.Never}
+}

package/src/organisms/fab-menu/fab-menu.android.tsx

@@ -25,16 +25,16 @@ const FabMenuRow = ({action, onSelect}: FabMenuRowProps) => {
   return (
     <FloatingActionButtonMenuItem
       containerColor={theme.color('fill.accent.primary')}
-      contentColor={theme.color('content.on.bg')}
+      contentColor={theme.color('content.on.accent')}
       onClick={onClick}
     >
       {action.icon ? (
         <FloatingActionButtonMenuItem.Icon>
-          <Icon color="content.on.bg" name={action.icon} />
+          <Icon color="content.on.accent" name={action.icon} />
         </FloatingActionButtonMenuItem.Icon>
       ) : null}
       <FloatingActionButtonMenuItem.Text>
-        <ComposeText color={theme.colorString('content.on.bg')} style={theme.typography.labelMedium}>
+        <ComposeText color={theme.colorString('content.on.accent')} style={theme.typography.labelMedium}>
           {action.label}
         </ComposeText>
       </FloatingActionButtonMenuItem.Text>
@@ -47,7 +47,7 @@ const FabMenuRow = ({action, onSelect}: FabMenuRowProps) => {
  * content — rather than a row of its own. The pills take the button's colours, so the menu reads as the button
  * unfolding rather than a second surface.
  */
-export const FabMenu: FabMenuComponent = ({actions, icon}: FabMenuProps) => {
+export const FabMenu: FabMenuComponent = ({accessibilityLabel, actions, icon}: FabMenuProps) => {
   useHostGuard('FabMenu')
 
   const theme = useAppTheme()
@@ -67,7 +67,11 @@ export const FabMenu: FabMenuComponent = ({actions, icon}: FabMenuProps) => {
           onCheckedChange={setExpanded}
         >
           <ToggleFloatingActionButton.Icon>
-            {icon ? <Icon color="content.on.bg" name={icon} /> : <Glyph color="content.on.bg" name="plus" />}
+            {icon ? (
+              <Icon accessibilityLabel={accessibilityLabel} color="content.on.accent" name={icon} />
+            ) : (
+              <Glyph accessibilityLabel={accessibilityLabel} color="content.on.accent" name="plus" />
+            )}
           </ToggleFloatingActionButton.Icon>
         </ToggleFloatingActionButton>
       </FloatingActionButtonMenu.Button>

package/src/organisms/fab-menu/fab-menu.ios.tsx

@@ -10,7 +10,7 @@ import type {FabMenuComponent, FabMenuProps} from './fab-menu.types'
 /** Matches `Fab`, so a screen can switch between the two without the button changing shape. */
 const FAB_SIZE = 56
 
-export const FabMenu: FabMenuComponent = ({actions, icon, testID}: FabMenuProps) => {
+export const FabMenu: FabMenuComponent = ({accessibilityLabel, actions, icon, testID}: FabMenuProps) => {
   useHostGuard('FabMenu')
 
   return (
@@ -25,7 +25,11 @@ export const FabMenu: FabMenuComponent = ({actions, icon, testID}: FabMenuProps)
           shadow="btn.accent"
           w={FAB_SIZE}
         >
-          {icon ? <Icon color="content.on.bg" name={icon} /> : <Glyph color="content.on.bg" name="plus" />}
+          {icon ? (
+            <Icon accessibilityLabel={accessibilityLabel} color="content.on.accent" name={icon} />
+          ) : (
+            <Glyph accessibilityLabel={accessibilityLabel} color="content.on.accent" name="plus" />
+          )}
         </VStack>
       }
       testID={testID}