@hzblj/kara-components 0.9.0 → 0.11.0

package/src/atoms/switch/switch.types.ts

@@ -5,7 +5,7 @@ export type SwitchProps = {
   /** Stops the user flipping it, and dims it. */
   disabled?: boolean
   /**
-   * Shown beside the switch. On Android it makes a full-width row — label at the start, switch at the end — that
+   * Shown beside the switch. On Android it makes a full-width row (label at the start, switch at the end) that
    * toggles wherever it is tapped.
    */
   label?: string

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'
 
@@ -9,30 +9,31 @@ export type TextDecoration = 'none' | 'strikethrough' | 'underline'
 export type TextTransform = 'lowercase' | 'uppercase'
 
 /**
- * SwiftUI `Text` / Compose `Text` in a theme typography variant — a native atom; outside a host, use `RnText`. It takes
+ * SwiftUI `Text` / Compose `Text` in a theme typography variant. A native atom: outside a host, use `RnText`. It takes
  * 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/text-field/text-field.types.ts

@@ -1,17 +1,17 @@
 import type {ReactNode} from 'react'
 
 /**
- * An uncontrolled text field with an optional label above it — SwiftUI `TextField` (`SecureField` when `secure`) /
+ * An uncontrolled text field with an optional label above it: SwiftUI `TextField` (`SecureField` when `secure`) /
  * Compose `OutlinedTextField`.
  */
 export type TextFieldProps = {
-  /** The text it starts with. Read once, on mount — the field is uncontrolled. */
+  /** The text it starts with. Read once, on mount: the field is uncontrolled. */
   defaultValue?: string
   /** Stops editing and dims the field. On iOS it outranks `error`. */
   disabled?: boolean
   /**
-   * Marks the field invalid: a destructive outline and label. A message is shown under the field as well — on Android
-   * as Material's supporting text, beside its error icon — so the error never rests on colour alone; Material's error
+   * Marks the field invalid: a destructive outline and label. A message is shown under the field as well (on Android
+   * as Material's supporting text, beside its error icon), so the error never rests on colour alone; Material's error
    * colour is a pale red in dark mode. `true` marks it without a message.
    */
   error?: boolean | string

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
-}
+/** Stacks its children top to bottom: SwiftUI `VStack` / Compose `Column`. */
+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
-}
+/** Layers its children on one another: SwiftUI `ZStack` / Compose `Box`. */
+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-button.types.ts

@@ -1,7 +1,7 @@
 import type {GlyphName} from '@hzblj/kara-native'
 import type {ReactNode} from 'react'
 
-/** An icon button over one of kara's glyphs — for the controls its own components build (a stepper, a bar). */
+/** An icon button over one of kara's glyphs, for the controls its own components build (a stepper, a bar). */
 export type GlyphButtonProps = {
   accessibilityLabel?: string
   disabled?: boolean

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

@@ -3,10 +3,12 @@ import type {ColorToken, SpaceSize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
 /**
- * One of the few glyphs kara's own components draw — a search field's magnifier, a row's chevron. Internal: apps draw
+ * One of the few glyphs kara's own components draw: a search field's magnifier, a row's chevron. Internal: apps draw
  * 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/collapsible/collapsible.types.ts

@@ -2,7 +2,7 @@ import type {ReactNode} from 'react'
 
 /**
  * A row that shows and hides its content: SwiftUI's `DisclosureGroup` on iOS; on Android a pressable row with a
- * chevron over an animated reveal. A native atom — it renders inside `<Screen>` or `<Island>`.
+ * chevron over an animated reveal. A native atom: it renders inside `<Screen>` or `<Island>`.
  */
 export type CollapsibleProps = {
   /** Shown while `expanded`. */

package/src/molecules/empty-state/empty-state.types.ts

@@ -6,7 +6,7 @@ import type {IconName} from '../../atoms/icon'
  * `action` takes a `Button` so the state can offer a way out.
  */
 export type EmptyStateProps = {
-  /** Under the text — a `Button`, say. */
+  /** Under the text: a `Button`, say. */
   action?: ReactNode
   /** A second line under the title, in the secondary colour. */
   description?: string

package/src/molecules/label/label.types.ts

@@ -4,7 +4,7 @@ import type {ReactNode} from 'react'
 import type {IconName} from '../../atoms/icon'
 
 /**
- * An inline icon + text pair — the thing you put inside a button, a menu row or a section
+ * An inline icon + text pair: the thing you put inside a button, a menu row or a section
  * header. For a full tappable row with a subtitle and chevron, use `ListItem`.
  */
 export type LabelProps = {

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.
+ * 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. 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. */
@@ -15,7 +17,7 @@ export type LabeledContentProps = {
   label: string
   /** Makes the row pressable and adds a chevron on the trailing edge. */
   onPress?: () => void
-  /** Horizontal padding inside the row — inside its press area too, so Android's ripple reaches the card's edges. */
+  /** Horizontal padding inside the row, and inside its press area too, so Android's ripple reaches the card's edges. */
   px?: SpaceSize
   /** Test identifier, forwarded to the native view. */
   testID?: string

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,19 +1,21 @@
+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. */
   onPress?: () => void
   /**
-   * Horizontal padding inside the row — inside its press area too, so Android's ripple reaches the card's edges. For
+   * Horizontal padding inside the row, and inside its press area too, so Android's ripple reaches the card's edges. For
    * rows in a card of your own; a `List` insets its rows by itself.
    */
   px?: SpaceSize

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,