@hzblj/kara-components 0.10.0 → 0.12.0

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 {timing} from '@hzblj/kara-sx'
+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 {Box} from '../../atoms/box'
 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>}
 
@@ -23,7 +24,7 @@ const EdgeBar = ({children, filled}: Bar) => {
 
   return (
     <Box>
-      <ABox
+      <Box
         bg="surface.secondary"
         bottom={0}
         left={0}

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

package/src/organisms/fab-menu/fab-menu.types.ts

@@ -9,6 +9,11 @@ import type {MenuAction} from '../menu'
  * label of a SwiftUI `Menu`. A native atom: it renders inside `<Screen>` or `<Island>`.
  */
 export type FabMenuProps = {
+  /**
+   * What VoiceOver and TalkBack say for the button, since an icon has no words of its own: "Create". Required for that
+   * reason.
+   */
+  accessibilityLabel: string
   /** The actions the button unfolds into. */
   actions: MenuAction[]
   /** The closed button's icon, one of the app's. A plus by default. */

package/src/organisms/snackbar/snackbar.tsx

@@ -1,42 +1,146 @@
-import {FadeInDown, FadeOutDown} from 'react-native-reanimated'
+import {type SxEntryExit, timing} from '@hzblj/kara-sx'
+import {spacing, useReducedMotion} from '@hzblj/kara-theme'
+import {useEffect, useRef} from 'react'
+import {AccessibilityInfo, Platform} from 'react-native'
+import {type EntryExitAnimationFunction, withTiming} from 'react-native-reanimated'
 
-import {ABox} from '../../atoms/box'
+import {Box} from '../../atoms/box'
 import {Pressable} from '../../atoms/pressable'
 import {RnText} from '../../atoms/rn-text'
-import type {SnackbarComponent, SnackbarProps} from './snackbar.types'
+import {RnGlyph} from '../../glyph'
+import type {SnackbarAnimation, SnackbarComponent, SnackbarDuration, SnackbarProps} from './snackbar.types'
+
+/** Material's `SnackbarDuration.Short` and `Long`. */
+const DURATIONS = {long: 10_000, short: 4_000} as const
+
+const PLATFORM_ANIMATION: SnackbarAnimation = Platform.OS === 'android' ? 'scale' : 'slide'
+
+/** The close glyph at the label's height: an SF Symbol fills its box, Material's icon sits inside a padded one. */
+const CLOSE_SIZE = Platform.OS === 'ios' ? 's12' : 's16'
+
+const GROW = timing('quick')
+
+/** Material's snackbar enter: it fades in while it grows from 80 %, in 150 ms. Further than kara's `scale` preset. */
+const scaleIn: EntryExitAnimationFunction = () => {
+  'worklet'
+
+  return {
+    animations: {opacity: withTiming(1, GROW), transform: [{scale: withTiming(1, GROW)}]},
+    initialValues: {opacity: 0, transform: [{scale: 0.8}]},
+  }
+}
+
+type Transition = {entering: SxEntryExit; exiting: SxEntryExit}
+
+/**
+ * kara's motion presets, which arrive in `fast`, leave in `quick` and fade with motion reduced by themselves. A slide
+ * travels further than a preset's default: in from the edge it sits on, and back out toward it.
+ */
+const TRANSITIONS = {
+  fade: {entering: 'fade', exiting: 'fade'},
+  // Material's exit is a 75 ms fade: `micro`.
+  scale: {entering: scaleIn, exiting: {duration: 'micro', preset: 'fade'}},
+  slideBottom: {entering: {distance: 's24', preset: 'fadeUp'}, exiting: {distance: 's24', preset: 'fadeDown'}},
+  slideTop: {entering: {distance: 's24', preset: 'fadeDown'}, exiting: {distance: 's24', preset: 'fadeUp'}},
+} as const satisfies Record<string, Transition>
+
+const transitionsFor = (animation: SnackbarAnimation, position: 'bottom' | 'top'): Transition => {
+  if (animation === 'slide') {
+    return position === 'top' ? TRANSITIONS.slideTop : TRANSITIONS.slideBottom
+  }
+
+  return TRANSITIONS[animation]
+}
+
+const millisecondsOf = (duration: SnackbarDuration) =>
+  typeof duration === 'number' ? duration : duration === 'indefinite' ? undefined : DURATIONS[duration]
+
+export const Snackbar: SnackbarComponent = ({
+  actionLabel,
+  actionOnNewLine = false,
+  animation = PLATFORM_ANIMATION,
+  dismissible = false,
+  duration = 'indefinite',
+  entering,
+  exiting,
+  message,
+  offset = 's24',
+  onAction,
+  onDismiss,
+  position = 'bottom',
+  visible,
+}: SnackbarProps) => {
+  const reduced = useReducedMotion()
+  // A caller's inline `onDismiss` is a new function every render; the timer must not restart for it.
+  const dismiss = useRef(onDismiss)
+  dismiss.current = onDismiss
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: a new `message` restarts the timer, as a new snackbar
+  useEffect(() => {
+    const milliseconds = millisecondsOf(duration)
+
+    if (!visible || milliseconds === undefined) {
+      return
+    }
+
+    const timer = setTimeout(() => dismiss.current?.(), milliseconds)
+
+    return () => clearTimeout(timer)
+  }, [duration, message, visible])
+
+  // Material's snackbar is announced; a React Native view is not unless asked.
+  useEffect(() => {
+    if (visible) {
+      AccessibilityInfo.announceForAccessibility(message)
+    }
+  }, [message, visible])
 
-export const Snackbar: SnackbarComponent = ({actionLabel, message, onAction, visible}: SnackbarProps) => {
   if (!visible) {
     return null
   }
 
+  const edge = position === 'top' ? {top: spacing[offset]} : {bottom: spacing[offset]}
+  const hasTrailing = Boolean(actionLabel) || dismissible
+  // The presets fade with motion reduced by themselves; Material's scale is a worklet of its own, so it is picked out.
+  const preset = transitionsFor(reduced && animation === 'scale' ? 'fade' : animation, position)
+
   return (
-    <ABox
-      align="center"
+    <Box
+      align={actionOnNewLine ? 'stretch' : 'center'}
       bg="surface.high.contrast"
       borderRadius="medium"
-      bottom={24}
-      entering={FadeInDown}
-      exiting={FadeOutDown}
-      flexDirection="row"
-      gap="s12"
-      left={16}
+      flexDirection={actionOnNewLine ? 'column' : 'row'}
+      gap={actionOnNewLine ? 's8' : 's12'}
+      left={spacing.s16}
       position="absolute"
       px="s16"
       py="s12"
-      right={16}
+      right={spacing.s16}
       shadow="snackbar"
+      {...edge}
+      entering={entering ?? preset.entering}
+      exiting={exiting ?? preset.exiting}
     >
-      <RnText color="content.on.high.contrast" variant="footnote">
+      {/* It takes the room, so the action sits at the trailing end, as far in from it as the message is from the start. */}
+      <RnText color="content.on.high.contrast" flex={actionOnNewLine ? undefined : 1} variant="footnote">
         {message}
       </RnText>
-      {actionLabel ? (
-        <Pressable onPress={onAction}>
-          <RnText color="content.accent" variant="footnoteMedium">
-            {actionLabel}
-          </RnText>
-        </Pressable>
+      {hasTrailing ? (
+        <Box align="center" alignSelf={actionOnNewLine ? 'flex-end' : undefined} flexDirection="row" gap="s16">
+          {actionLabel ? (
+            <Pressable onPress={onAction} pressEffect="opacity" ripple={false}>
+              <RnText color="content.accent" variant="footnoteMedium">
+                {actionLabel}
+              </RnText>
+            </Pressable>
+          ) : null}
+          {dismissible ? (
+            <Pressable accessibilityLabel="Dismiss" onPress={onDismiss} pressEffect="opacity" ripple={false}>
+              <RnGlyph color="content.on.high.contrast" name="close" size={CLOSE_SIZE} />
+            </Pressable>
+          ) : null}
+        </Box>
       ) : null}
-    </ABox>
+    </Box>
   )
 }

package/src/organisms/snackbar/snackbar.types.ts

@@ -1,17 +1,51 @@
+import type {SxEntryExit} from '@hzblj/kara-sx'
+import type {SpaceSize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
+/** How it comes and goes. */
+export type SnackbarAnimation = 'fade' | 'scale' | 'slide'
+
+/** How long it stays: Material's short (4 s) and long (10 s), never, or a number of milliseconds. */
+export type SnackbarDuration = 'indefinite' | 'long' | 'short' | number
+
+/** The edge of its parent it sits on. */
+export type SnackbarPosition = 'bottom' | 'top'
+
 /**
- * A short message laid over the bottom of its parent, with an optional action. The React Native tier, drawn the same on
- * both platforms: it needs no host, and it never hides itself.
+ * A short message laid over an edge of its parent, with an optional action at its trailing end. The React Native tier,
+ * drawn the same on both platforms (iOS has no snackbar of its own), so it needs no host. Material's options are all
+ * here: a duration, a dismiss button, the action on a line of its own. It is announced to VoiceOver and TalkBack when
+ * it appears.
  */
 export type SnackbarProps = {
-  /** The action button's text, on the trailing side. No button without it. */
+  /** The action button's text, at the trailing end. No button without it. */
   actionLabel?: string
+  /** Puts the action under the message, at its trailing end: Material's layout for a long message or action. */
+  actionOnNewLine?: boolean
+  /**
+   * How it comes and goes. `scale` is Material's own (a fade and a scale from 80 %), `slide` rises from its edge as it
+   * fades in, `fade` only fades. `scale` on Android and `slide` on iOS by default. With motion reduced, it fades.
+   */
+  animation?: SnackbarAnimation
+  /** A close button at the trailing end, Material's dismiss action; it calls `onDismiss`. */
+  dismissible?: boolean
+  /** How long it stays up before `onDismiss` is called. `indefinite` by default: it never hides itself. */
+  duration?: SnackbarDuration
+  /** How it arrives instead: a motion preset (`'scale'`), or Reanimated's own, e.g. `FadeInDown.springify()`. It wins over `animation`. */
+  entering?: SxEntryExit
+  /** How it leaves instead: a motion preset, or Reanimated's own. It wins over `animation`. */
+  exiting?: SxEntryExit
   /** The message. */
   message: string
+  /** Between the snackbar and its edge, a space token. `s24` by default; raise it above a tab bar. */
+  offset?: SpaceSize
   /** The action was pressed. The snackbar stays up; turn `visible` off to hide it. */
   onAction?: () => void
-  /** Shows the snackbar while true, fading it in and out. It sets no timer of its own. */
+  /** It asks to go: its `duration` ran out, or its dismiss button was pressed. Turn `visible` off to hide it. */
+  onDismiss?: () => void
+  /** The edge of its parent it sits on. `bottom` by default, Material's place for it. */
+  position?: SnackbarPosition
+  /** Shows the snackbar while true, animating it in and out. */
   visible: boolean
 }
 

package/src/organisms/swipe-actions/swipe-actions.android.tsx

@@ -49,7 +49,7 @@ type ActionButtonProps = {action: SwipeAction; onDone: () => void}
 const ActionButton = ({action, onDone}: ActionButtonProps) => {
   const theme = useAppTheme()
   const fill = action.tint ?? (action.destructive ? 'fill.destructive.primary' : 'fill.accent.primary')
-  const content = !action.tint && action.destructive ? 'content.on.destructive' : 'content.on.bg'
+  const content = !action.tint && action.destructive ? 'content.on.destructive' : 'content.on.accent'
 
   const onClick = useCallback(() => {
     onDone()

package/src/use-stack-modifiers.ts

@@ -1,24 +1,37 @@
 import {clickable, type ModifierConfig, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
-import {type ResponsiveSx, useSxModifiers} from '@hzblj/kara-sx'
+import {
+  type AccessibilityProps,
+  type ResponsiveSx,
+  splitAccessibility,
+  useAccessibilityModifiers,
+  useSxModifiers,
+} from '@hzblj/kara-sx'
 import {useMemo} from 'react'
 
 /**
- * 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 const useStackModifiers = (sx: ResponsiveSx, onPress?: () => void, testID?: string): ModifierConfig[] => {
-  const {p, pb, pl, pr, pt, px, py, ...frame} = sx
+export const useStackModifiers = (
+  props: ResponsiveSx & AccessibilityProps,
+  onPress?: () => void,
+  testID?: string
+): ModifierConfig[] => {
+  const [accessibility, {p, pb, pl, pr, pt, px, py, ...frame}] = splitAccessibility(props)
   const frameModifiers = useSxModifiers(frame)
   const paddingModifiers = useSxModifiers({p, pb, pl, pr, pt, px, py})
+  const accessibilityModifiers = useAccessibilityModifiers(accessibility, onPress !== undefined)
 
   return useMemo(
     () => [
       ...frameModifiers,
       ...(testID ? [testIdModifier(testID)] : []),
       ...(onPress ? [clickable(onPress)] : []),
+      ...accessibilityModifiers,
       ...paddingModifiers,
     ],
-    [frameModifiers, onPress, paddingModifiers, testID]
+    [accessibilityModifiers, frameModifiers, onPress, paddingModifiers, testID]
   )
 }

package/lib/module/atoms/box/a-box.js

@@ -1,6 +0,0 @@
-"use strict";
-
-import Animated from 'react-native-reanimated';
-import { Box } from "./box.js";
-export const ABox = Animated.createAnimatedComponent(Box);
-//# sourceMappingURL=a-box.js.map

package/lib/module/atoms/box/a-box.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Animated","Box","ABox","createAnimatedComponent"],"sourceRoot":"../../../../src","sources":["atoms/box/a-box.ts"],"mappings":";;AAAA,OAAOA,QAAQ,MAAM,yBAAyB;AAE9C,SAAQC,GAAG,QAAO,UAAO;AAEzB,OAAO,MAAMC,IAAI,GAAGF,QAAQ,CAACG,uBAAuB,CAACF,GAAG,CAAC","ignoreList":[]}