@hzblj/kara-components 0.10.0 → 0.11.0

package/lib/typescript/atoms/v-stack/v-stack.types.d.ts

@@ -1,16 +1,16 @@
-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 & {
+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.
+     * fills the stack's shape. Screen readers then read the stack as one button.
      */
     onPress?: () => void;
     /** The space between children. */

package/lib/typescript/atoms/z-stack/z-stack.types.d.ts

@@ -1,15 +1,15 @@
-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 & {
+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.
+     * fills the stack's shape. Screen readers then read the stack as one button.
      */
     onPress?: () => void;
     /** Test identifier, forwarded to the native view. */

package/lib/typescript/glyph/glyph.types.d.ts

@@ -6,6 +6,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/lib/typescript/molecules/labeled-content/labeled-content.types.d.ts

@@ -1,11 +1,13 @@
+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/lib/typescript/molecules/link/link.types.d.ts

@@ -1,8 +1,9 @@
+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/lib/typescript/molecules/list-item/list-item.types.d.ts

@@ -1,11 +1,13 @@
+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/lib/typescript/molecules/stepper/stepper.ios.d.ts

@@ -2,6 +2,6 @@ import type { StepperComponent } from './stepper.types';
 /**
  * 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 declare const Stepper: StepperComponent;

package/lib/typescript/motion.d.ts

@@ -0,0 +1,8 @@
+import { type DurationSize, type EasingName } from '@hzblj/kara-theme';
+import { 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 declare const timing: (size: DurationSize, curve?: EasingName) => WithTimingConfig;

package/lib/typescript/organisms/fab-menu/fab-menu.types.d.ts

@@ -7,6 +7,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/lib/typescript/organisms/snackbar/snackbar.types.d.ts

@@ -1,16 +1,49 @@
-import type { ReactNode } from 'react';
+import type { SpaceSize } from '@hzblj/kara-theme';
+import type { ComponentProps, ReactNode } from 'react';
+import type Animated from 'react-native-reanimated';
+type LayoutAnimation = ComponentProps<typeof Animated.View>['entering'];
+/** 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;
+    /** A Reanimated entering animation of your own, e.g. `FadeInDown.springify()`. It wins over `animation`. */
+    entering?: LayoutAnimation;
+    /** A Reanimated exiting animation of your own. It wins over `animation`. */
+    exiting?: LayoutAnimation;
     /** 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;
 };
 export type SnackbarComponent = (props: SnackbarProps) => ReactNode;
+export {};

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.11.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.11.0",
+    "@hzblj/kara-sx": "^0.11.0",
+    "@hzblj/kara-theme": "^0.11.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/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 (