@hzblj/kara-components 0.10.0 → 0.12.0

package/lib/typescript/use-stack-modifiers.d.ts

@@ -1,8 +1,9 @@
 import { type ModifierConfig } from '@expo/ui/jetpack-compose/modifiers';
-import { type ResponsiveSx } from '@hzblj/kara-sx';
+import { type AccessibilityProps, type ResponsiveSx } from '@hzblj/kara-sx';
 /**
- * A Compose stack's modifiers in the order a pressable one needs: its frame, shape and background, then the press,
- * then its padding. Compose clips a `clickable` to what comes after it, so with the padding first the ripple would stop
- * at the padding and a row pressed by its edge would light up only in the middle.
+ * A Compose stack's modifiers in the order a pressable one needs: its frame, shape and background, then the press, its
+ * semantics, then its padding. Compose clips a `clickable` to what comes after it, so with the padding first the ripple
+ * would stop at the padding and a row pressed by its edge would light up only in the middle. The semantics come after
+ * the click, because a label that replaces the children's clears whatever semantics are inside it.
  */
-export declare const useStackModifiers: (sx: ResponsiveSx, onPress?: () => void, testID?: string) => ModifierConfig[];
+export declare const useStackModifiers: (props: ResponsiveSx & AccessibilityProps, onPress?: () => void, testID?: string) => ModifierConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -59,9 +59,9 @@
     ]
   },
   "dependencies": {
-    "@hzblj/kara-native": "^0.10.0",
-    "@hzblj/kara-sx": "^0.10.0",
-    "@hzblj/kara-theme": "^0.10.0",
+    "@hzblj/kara-native": "^0.12.0",
+    "@hzblj/kara-sx": "^0.12.0",
+    "@hzblj/kara-theme": "^0.12.0",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

package/src/atoms/activity-indicator/activity-indicator.android.tsx

@@ -1,5 +1,6 @@
 import {Host, LoadingIndicator} from '@expo/ui/jetpack-compose'
 import {fillMaxSize, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {StyleSheet} from 'react-native'
@@ -17,12 +18,17 @@ const styles = StyleSheet.create({
  * anywhere and takes its place in the first frame.
  */
 export const ActivityIndicator: ActivityIndicatorComponent = ({
+  accessibilityLabel,
   color = 'fill.accent.primary',
   size = 'small',
   testID,
 }: ActivityIndicatorProps) => {
   const theme = useAppTheme()
-  const modifiers = useMemo(() => (testID ? [fillMaxSize(), testIdModifier(testID)] : [fillMaxSize()]), [testID])
+  const accessibilityModifiers = useAccessibilityModifiers({accessibilityLabel})
+  const modifiers = useMemo(
+    () => [fillMaxSize(), ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers],
+    [accessibilityModifiers, testID]
+  )
 
   return (
     <Host colorScheme={theme.dark ? 'dark' : 'light'} seedColor={theme.materialSeed} style={styles[size]}>

package/src/atoms/activity-indicator/activity-indicator.ios.tsx

@@ -5,11 +5,19 @@ import type {ActivityIndicatorComponent, ActivityIndicatorProps} from './activit
 
 /** React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. */
 export const ActivityIndicator: ActivityIndicatorComponent = ({
+  accessibilityLabel,
   color = 'fill.accent.primary',
   size = 'small',
   testID,
 }: ActivityIndicatorProps) => {
   const theme = useAppTheme()
 
-  return <RNActivityIndicator color={theme.color(color)} size={size} testID={testID} />
+  return (
+    <RNActivityIndicator
+      accessibilityLabel={accessibilityLabel}
+      color={theme.color(color)}
+      size={size}
+      testID={testID}
+    />
+  )
 }

package/src/atoms/activity-indicator/activity-indicator.types.ts

@@ -9,6 +9,8 @@ export type ActivityIndicatorSize = 'large' | 'small'
  * Android, so it renders anywhere. For how far along something is, use `Progress`.
  */
 export type ActivityIndicatorProps = {
+  /** What is loading, for VoiceOver and TalkBack: "Loading photos". Unset, the platform's own word ("In progress"). */
+  accessibilityLabel?: string
   /** Its colour. `fill.accent.primary` by default. */
   color?: ColorToken
   /** `small` sits in a row or a button, `large` holds a screen that is loading. `small` by default. */

package/src/atoms/avatar/avatar.tsx

@@ -17,11 +17,15 @@ const VARIANT = {
   sm: 'caption',
 } as const
 
-export const Avatar: AvatarComponent = ({initials, size = 'md', source, testID}: AvatarProps) => {
+export const Avatar: AvatarComponent = ({accessibilityLabel, initials, size = 'md', source, testID}: AvatarProps) => {
   const diameter = DIAMETER[size]
 
   return (
     <Box
+      aria-hidden={accessibilityLabel === undefined}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityLabel === undefined ? undefined : 'image'}
+      accessible={accessibilityLabel !== undefined}
       align="center"
       bg="fill.tertiary"
       borderRadius="full"

package/src/atoms/avatar/avatar.types.ts

@@ -5,6 +5,11 @@ export type AvatarSize = 'lg' | 'md' | 'sm'
 
 /** A round avatar: the image in `source`, or `initials` without one. The React Native tier: it needs no host. */
 export type AvatarProps = {
+  /**
+   * Who it is, for VoiceOver and TalkBack: "Jan Blazej". Unset, the avatar is decorative and hidden from them, as one
+   * beside the person's name should be.
+   */
+  accessibilityLabel?: string
   /** Shown in place of the image when there is no `source`. */
   initials?: string
   /** The diameter: `sm` is `s24`, `md` `s40`, `lg` `s64`. `md` by default. */

package/src/atoms/box/box.tsx

@@ -4,5 +4,8 @@ import {View} from 'react-native'
 /**
  * A React Native `View` that takes the design system's `sx` props. The `sx()` HOC is the whole
  * implementation — Box is just its first caller, and any other style-taking component gets the same.
+ *
+ * That includes motion: `entering`, `exiting`, `layout`, `animate` or an animated `style` make it an `Animated.View`
+ * from its first frame, and without them it stays a plain `View`.
  */
 export const Box = sx(View)

package/src/atoms/box/index.ts

@@ -1,3 +1,2 @@
-export * from './a-box'
 export * from './box'
 export * from './box.types'

package/src/atoms/button/button-tokens.ts

@@ -9,7 +9,7 @@ type ButtonTokens = {
 }
 
 const TOKENS = {
-  accent: {content: 'content.on.bg', fill: 'fill.accent.primary', shadow: 'btn.accent'},
+  accent: {content: 'content.on.accent', fill: 'fill.accent.primary', shadow: 'btn.accent'},
   destructive: {content: 'content.on.destructive', fill: 'fill.destructive.primary', shadow: 'btn.destructive'},
   glass: {content: 'content.primary', fill: 'btn.bg.glass.base', shadow: 'btn.glass'},
   secondary: {content: 'content.primary', fill: 'btn.bg.secondary.base', shadow: 'btn.secondary'},
@@ -81,4 +81,4 @@ const currentHex = (token: ColorToken, theme: Theme): unknown => {
  * content colour over a pale one (`fill.accent.base`) — the light container tokens pair with it in both appearances.
  */
 export const contentOnTint = (tint: ColorToken, theme: Theme): ColorToken =>
-  (luminance(currentHex(tint, theme)) ?? 0) > 0.4 ? 'content.primary' : 'content.on.bg'
+  (luminance(currentHex(tint, theme)) ?? 0) > 0.4 ? 'content.primary' : 'content.on.accent'

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

@@ -1,6 +1,6 @@
 import {Button as ComposeButton, Text as ComposeText, OutlinedButton} from '@expo/ui/jetpack-compose'
 import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
-import {useSxModifiers} from '@hzblj/kara-sx'
+import {useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
@@ -16,6 +16,7 @@ import {buttonTokens, contentOnTint} from './button-tokens'
  * colour, as a prominent style does on iOS. `buttonStyle` and `controlSize` are SwiftUI's alone.
  */
 export const Button: ButtonComponent = ({
+  accessibilityHint,
   disabled = false,
   label,
   onPress,
@@ -28,9 +29,10 @@ export const Button: ButtonComponent = ({
   const theme = useAppTheme()
   const tokens = buttonTokens(variant, disabled, theme)
   const sxModifiers = useSxModifiers({wide})
+  const accessibilityModifiers = useAccessibilityModifiers({accessibilityHint}, accessibilityHint !== undefined)
   const modifiers = useMemo(
-    () => (testID ? [...sxModifiers, testIdModifier(testID)] : sxModifiers),
-    [sxModifiers, testID]
+    () => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers],
+    [accessibilityModifiers, sxModifiers, testID]
   )
   const style = theme.typography.body
   const outlined = variant === 'glass' && !tint

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

@@ -6,6 +6,7 @@ import {
   glassEffect as glassEffectModifier,
   tint as tintModifier,
 } from '@expo/ui/swift-ui/modifiers'
+import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {type ColorToken, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
@@ -29,6 +30,7 @@ const TINT_BY_VARIANT = {
 } as const satisfies Record<ButtonVariant, ColorToken | undefined>
 
 export const Button: ButtonComponent = ({
+  accessibilityHint,
   buttonStyle,
   controlSize = 'large',
   disabled = false,
@@ -59,8 +61,14 @@ export const Button: ButtonComponent = ({
   // A prominent style — and tinted glass — is coloured by the tint, so a caller's own tint picks the label on it.
   const content = tint && filled && !disabled ? contentOnTint(tint, theme) : tokens.content
 
+  const accessibilityModifiers = useAccessibilityModifiers({accessibilityHint})
+
   const modifiers = useMemo(() => {
-    const list = [buttonStyleModifier(glassTint ? 'plain' : style), controlSizeModifier(controlSize)]
+    const list = [
+      buttonStyleModifier(glassTint ? 'plain' : style),
+      controlSizeModifier(controlSize),
+      ...accessibilityModifiers,
+    ]
 
     if (glassTint) {
       list.push(
@@ -75,7 +83,7 @@ export const Button: ButtonComponent = ({
     }
 
     return list
-  }, [controlSize, disabled, glassTint, resolvedTint, style, theme])
+  }, [accessibilityModifiers, controlSize, disabled, glassTint, resolvedTint, style, theme])
 
   return (
     <SwiftUIButton modifiers={modifiers} onPress={onPress} testID={testID}>

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

@@ -24,6 +24,8 @@ export type ButtonControlSize = 'extraLarge' | 'large' | 'mini' | 'regular' | 's
 
 /** A text button: SwiftUI `Button` on iOS, Material's filled button (outlined for `glass`) on Android. */
 export type ButtonProps = {
+  /** What pressing it does, when the label alone does not say. See `AccessibilityProps`. */
+  accessibilityHint?: string
   /**
    * Replaces the style the variant picks: `borderedProminent` for `accent` and `destructive`, `bordered` for
    * `secondary`, `glass` for `glass`. iOS only. Android ignores it.

package/src/atoms/card/card.android.tsx

@@ -1,16 +1,18 @@
 import {Column} 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 {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
 import type {CardComponent, CardProps} from './card.types'
 
-export const Card: CardComponent = ({children, testID, ...sx}: CardProps) => {
+export const Card: CardComponent = ({children, testID, ...props}: CardProps) => {
   useHostGuard('Card')
+  const [accessibility, sx] = splitAccessibility(props)
   const sxModifiers = useSxModifiers({bg: 'surface.primary', borderRadius: 'large', p: 's16', shadow: 'card', ...sx})
+  const accessibilityModifiers = useAccessibilityModifiers(accessibility)
   const modifiers = useMemo(
-    () => (testID ? [...sxModifiers, testIdModifier(testID)] : sxModifiers),
-    [sxModifiers, testID]
+    () => [...sxModifiers, ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers],
+    [accessibilityModifiers, sxModifiers, testID]
   )
 
   return <Column modifiers={modifiers}>{children}</Column>

package/src/atoms/card/card.ios.tsx

@@ -1,11 +1,15 @@
 import {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 {CardComponent, CardProps} from './card.types'
 
-export const Card: CardComponent = ({children, testID, ...sx}: CardProps) => {
+export const Card: CardComponent = ({children, testID, ...props}: CardProps) => {
   useHostGuard('Card')
-  const modifiers = useSxModifiers({bg: 'surface.primary', borderRadius: 'large', p: 's16', shadow: 'card', ...sx})
+  const [accessibility, sx] = splitAccessibility(props)
+  const sxModifiers = useSxModifiers({bg: 'surface.primary', borderRadius: 'large', p: 's16', shadow: 'card', ...sx})
+  const accessibilityModifiers = useAccessibilityModifiers(accessibility)
+  const modifiers = useMemo(() => [...sxModifiers, ...accessibilityModifiers], [accessibilityModifiers, sxModifiers])
 
   return (
     <VStack alignment="leading" modifiers={modifiers} testID={testID}>

package/src/atoms/card/card.types.ts

@@ -1,15 +1,16 @@
-import type {ResponsiveSx} from '@hzblj/kara-sx'
+import type {AccessibilityProps, ResponsiveSx} from '@hzblj/kara-sx'
 import type {ReactNode} from 'react'
 
 /**
  * A raised container: SwiftUI `VStack` / Compose `Column` on `surface.primary`, with a large radius, `s16` padding and
  * the `card` shadow. Any `sx` prop overrides its default.
  */
-export type CardProps = ResponsiveSx & {
-  /** Native views, stacked vertically from the leading edge. */
-  children?: ReactNode
-  /** Test identifier, forwarded to the native view. */
-  testID?: string
-}
+export type CardProps = ResponsiveSx &
+  AccessibilityProps & {
+    /** Native views, stacked vertically from the leading edge. */
+    children?: ReactNode
+    /** Test identifier, forwarded to the native view. */
+    testID?: string
+  }
 
 export type CardComponent = (props: CardProps) => ReactNode

package/src/atoms/checkbox/checkbox.android.tsx

@@ -23,7 +23,7 @@ export const Checkbox: CheckboxComponent = ({disabled = false, label, onValueCha
   )
   const control = (
     <ComposeCheckbox
-      colors={{checkedColor: theme.color('fill.accent.primary'), checkmarkColor: theme.color('content.on.bg')}}
+      colors={{checkedColor: theme.color('fill.accent.primary'), checkmarkColor: theme.color('content.on.accent')}}
       enabled={!disabled}
       onCheckedChange={onValueChange ?? NOOP}
       value={value}

package/src/atoms/fab/fab.android.tsx

@@ -1,20 +1,22 @@
 import {FloatingActionButton} from '@expo/ui/jetpack-compose'
+import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 
 import {useHostGuard} from '../../host-context'
 import {Icon} from '../icon'
 import type {FabComponent, FabProps} from './fab.types'
 
-export const Fab: FabComponent = ({name, onPress}: FabProps) => {
+export const Fab: FabComponent = ({accessibilityHint, accessibilityLabel, name, onPress}: FabProps) => {
   useHostGuard('Fab')
 
   const theme = useAppTheme()
+  const modifiers = useAccessibilityModifiers({accessibilityHint}, accessibilityHint !== undefined)
 
   return (
-    <FloatingActionButton containerColor={theme.color('fill.accent.primary')} onClick={onPress}>
+    <FloatingActionButton containerColor={theme.color('fill.accent.primary')} modifiers={modifiers} onClick={onPress}>
       {/* `@expo/ui`'s FAB is slot-based: content outside `.Icon` is not composed at all. */}
       <FloatingActionButton.Icon>
-        <Icon color="content.on.bg" name={name} />
+        <Icon accessibilityLabel={accessibilityLabel} color="content.on.accent" name={name} />
       </FloatingActionButton.Icon>
     </FloatingActionButton>
   )

package/src/atoms/fab/fab.ios.tsx

@@ -1,13 +1,14 @@
 import {Button} from '@expo/ui/swift-ui'
 import {buttonStyle} from '@expo/ui/swift-ui/modifiers'
-import {useSxModifiers} from '@hzblj/kara-sx'
+import {useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
 import {Icon} from '../icon'
 import type {FabComponent, FabProps} from './fab.types'
 
-export const Fab: FabComponent = ({name, onPress, testID}: FabProps) => {
+export const Fab: FabComponent = ({accessibilityHint, accessibilityLabel, name, onPress, testID}: FabProps) => {
   useHostGuard('Fab')
+  const accessibilityModifiers = useAccessibilityModifiers({accessibilityHint})
 
   const sxModifiers = useSxModifiers({
     bg: 'fill.accent.primary',
@@ -17,11 +18,14 @@ export const Fab: FabComponent = ({name, onPress, testID}: FabProps) => {
     shadow: 'btn.accent',
     w: 56,
   })
-  const modifiers = useMemo(() => [buttonStyle('plain'), ...sxModifiers], [sxModifiers])
+  const modifiers = useMemo(
+    () => [buttonStyle('plain'), ...sxModifiers, ...accessibilityModifiers],
+    [accessibilityModifiers, sxModifiers]
+  )
 
   return (
     <Button modifiers={modifiers} onPress={onPress} testID={testID}>
-      <Icon color="content.on.bg" name={name} />
+      <Icon accessibilityLabel={accessibilityLabel} color="content.on.accent" name={name} />
     </Button>
   )
 }

package/src/atoms/fab/fab.types.ts

@@ -7,7 +7,14 @@ import type {IconName} from '../icon'
  * `Button`) on iOS. It renders inline; pinning it to a corner is up to the screen.
  */
 export type FabProps = {
-  /** The icon, one of the app's, drawn in `content.on.bg`. */
+  /**
+   * 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
+  /** The icon, one of the app's, drawn in `content.on.accent`. */
   name: IconName
   /** Called when the button is pressed. */
   onPress?: () => void

package/src/atoms/glass-view/glass-view.android.tsx

@@ -31,7 +31,7 @@ export const GlassView: GlassViewComponent = ({
       cornerRadius={radii.full}
       fallbackTint={withOpacity(base, 'o95')}
       glassTint={withOpacity(base, tint ? 'o85' : 'o50')}
-      hairlineColor={withOpacity(String(theme.color('content.on.bg')), theme.dark ? 'o20' : 'o60')}
+      hairlineColor={withOpacity(String(theme.color('content.on.accent')), theme.dark ? 'o20' : 'o60')}
       hairlineWidth={1}
       saturation={1.6}
       style={style}

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

@@ -1,6 +1,6 @@
 import {HStack as SwiftUIHStack} 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'
@@ -24,13 +24,15 @@ export const HStack: HStackComponent = ({
   onPress,
   spacing: gap,
   testID,
-  ...sx
+  ...props
 }: HStackProps) => {
   useHostGuard('HStack')
+  const [accessibility, sx] = splitAccessibility(props)
   const sxModifiers = useSxModifiers(sx, FRAME_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/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/index.ts

@@ -32,6 +32,7 @@ export * from './segmented-control'
 export * from './skeleton'
 export * from './slider'
 export * from './spacer'
+export * from './stagger'
 export * from './surface'
 export * from './switch'
 export * from './text'