@hzblj/kara-components 0.9.0 → 0.11.0

package/src/molecules/navigation-bar/navigation-bar.types.ts

@@ -15,8 +15,8 @@ type NavigationBarItemBase = {
 }
 
 /**
- * One item of the bar. `back` and `close` are the platform's own — a chevron and the system close item on iOS, the
- * Material arrow and cross on Android — with `Back` / `Close` as their labels unless given others. `icon` is one of the
+ * One item of the bar. `back` and `close` are the platform's own (a chevron and the system close item on iOS, the
+ * Material arrow and cross on Android), with `Back` / `Close` as their labels unless given others. `icon` is one of the
  * app's icons and names itself for VoiceOver and TalkBack.
  */
 export type NavigationBarItem =
@@ -28,7 +28,7 @@ export type NavigationBarSearchRef = {
   clear: () => void
 }
 
-/** A search field in place of the title — iOS only for now; Android keeps the title. */
+/** A search field in place of the title. iOS only for now; Android keeps the title. */
 export type NavigationBarSearch = {
   /** Every edit of the field's text. */
   onChangeText: (text: string) => void
@@ -45,10 +45,10 @@ export type NavigationBarSearch = {
 export type NavigationBarTitleAlignment = 'center' | 'leading'
 
 /**
- * A title with items on either side, for a header that is not a navigation screen's — `Sheet.Header` is built on it.
+ * A title with items on either side, for a header that is not a navigation screen's. `Sheet.Header` is built on it.
  * On iOS a standalone `UINavigationBar`, so the items press and render exactly like a native-stack header's: on iOS 26
  * neighbours share a glass capsule instead of swelling as standalone glass buttons do. On Android Material's top app
- * bar. Where an item goes is the caller's choice — the bar places nothing by itself, so a close can sit on either side.
+ * bar. Where an item goes is the caller's choice: the bar places nothing by itself, so a close can sit on either side.
  * The React Native tier: it needs no host.
  */
 export type NavigationBarProps = {
@@ -58,13 +58,13 @@ export type NavigationBarProps = {
   leadingItems?: NavigationBarItem[]
   /** Replaces the title with a search field (iOS). */
   search?: NavigationBarSearch
-  /** Test identifier, forwarded to the native bar. iOS only — Android ignores it. */
+  /** Test identifier, forwarded to the native bar. iOS only; Android ignores it. */
   testID?: string
   /** The bar's title. */
   title?: string
-  /** `center` by default — iOS's own; `leading` is Material's top app bar. */
+  /** `center` (iOS's own) by default; `leading` is Material's top app bar. */
   titleAlignment?: NavigationBarTitleAlignment
-  /** Fades the title out and in without moving the items — for a large title that scrolls under the bar. */
+  /** Fades the title out and in without moving the items, for a large title that scrolls under the bar. */
   titleVisible?: boolean
   /** In screen order, toward the trailing edge. */
   trailingItems?: NavigationBarItem[]

package/src/molecules/pager/pager.types.ts

@@ -5,7 +5,7 @@ import type {ReactNode} from 'react'
  * A swipeable, snapping pager: SwiftUI's `TabView` in its page style, Compose's `HorizontalPager`.
  *
  * Pages are addressed by their index rather than by a name, because Compose's pager is index-native
- * and SwiftUI's tab values are strings — synthesising the string from the child's position is
+ * and SwiftUI's tab values are strings; synthesising the string from the child's position is
  * lossless, whereas inventing indices for named tabs on Compose would not be. Children are therefore
  * plain nodes with no `Pager.Page` part to wrap them in: a page carries no props of its own, so the
  * ceremony would buy nothing.
@@ -22,7 +22,7 @@ export type PagerProps = {
   onPageChange?: (page: number) => void
   /** Zero-based. Controlled when passed; otherwise the pager just starts at 0 and owns its position. */
   page?: number
-  /** Android only — a SwiftUI page-style `TabView` has no gap between pages. */
+  /** Android only: a SwiftUI page-style `TabView` has no gap between pages. */
   pageSpacing?: SpaceSize
   /**
    * Android only. SwiftUI can only disable a `TabView` as a whole, which would take the pages'

package/src/molecules/radio-group/radio-group.types.ts

@@ -4,13 +4,13 @@ import type {ReactNode} from 'react'
 export type RadioOption = {
   /** The option's text. */
   label: string
-  /** Identifies the option to `value` and `onValueChange`, and keys its row — keep it unique. */
+  /** Identifies the option to `value` and `onValueChange`, and keys its row. Keep it unique. */
   value: string
 }
 
 /**
  * A single choice from a list: rows with a checkmark on the selected one on iOS, Material radio buttons on Android. A
- * native atom — it renders inside `<Screen>` or `<Island>`.
+ * native atom: it renders inside `<Screen>` or `<Island>`.
  */
 export type RadioGroupProps = {
   /** The user pressed an option; it passes that option's `value`. */

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/rn-list-item/rn-list-item.types.ts

@@ -3,7 +3,7 @@ import type {ReactNode} from 'react'
 import type {ListItemProps} from '../list-item'
 
 /**
- * `ListItem`'s row in the React Native tier — plain views, no host. For lists long enough that a native host per row
+ * `ListItem`'s row in the React Native tier: plain views, no host. For lists long enough that a native host per row
  * would cost too much to mount (a navigation list, an `RnFlatList` of rows), with the platform's own press feedback: a
  * ripple across the whole row on Android, a highlight on iOS. In a rounded card, give the card `overflow="hidden"`:
  * Android draws the ripple as the row's foreground, which only a parent's clip keeps inside rounded corners.

package/src/molecules/rn-tooltip/rn-tooltip.types.ts

@@ -6,9 +6,9 @@ export type RnTooltipActionVariant = 'link' | 'primary' | 'secondary'
 export type RnTooltipAction = {
   /** The button's text. */
   label: string
-  /** Called on press. The tooltip stays up — turn `visible` off here if the action should close it. */
+  /** Called on press. The tooltip stays up; turn `visible` off here if the action should close it. */
   onPress: () => void
-  /** `link` by default — an underlined text. `primary`/`secondary` are small filled/outlined buttons. */
+  /** `link` by default, an underlined text. `primary`/`secondary` are small filled/outlined buttons. */
   variant?: RnTooltipActionVariant
 }
 
@@ -16,7 +16,7 @@ export type RnTooltipAction = {
 export type RnTooltipDismissReason = 'anchorHidden' | 'outside'
 
 /**
- * A rich tooltip — title, message, actions — anchored below a React Native view, and drawn above every sibling.
+ * A rich tooltip (title, message, actions) anchored below a React Native view, and drawn above every sibling.
  * Controlled: it never hides itself. `onDismiss` reports why it should, and the caller turns `visible` off. The React
  * Native tier, unlike `Tooltip`, whose anchor is a native view inside a host.
  */
@@ -26,16 +26,16 @@ export type RnTooltipProps = {
   /** Which end of the bubble the actions sit at. `end` by default. */
   actionsAlignment?: 'end' | 'start'
   /**
-   * Insets from the window's top and bottom that the anchor's centre must stay inside — a header or a tab bar over the
-   * content. Past them the tooltip asks to be dismissed with `anchorHidden`.
+   * Insets from the window's top and bottom that the anchor's centre must stay inside (a header or a tab bar over the
+   * content). Past them the tooltip asks to be dismissed with `anchorHidden`.
    */
   boundaryInsets?: {bottom?: number; top?: number}
-  /** The anchor — a single React Native view. */
+  /** The anchor: a single React Native view. */
   children: ReactElement
   /** The body text, under the title. */
   message?: string
   /**
-   * Asks for the tooltip to close, with the reason — turn `visible` off. On Android any touch outside asks, the start
+   * Asks for the tooltip to close, with the reason; turn `visible` off. On Android any touch outside asks, the start
    * of a scroll included; iOS keeps the tooltip through a scroll.
    */
   onDismiss: (reason: RnTooltipDismissReason) => void

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

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

package/src/molecules/scroll-edge-container/scroll-edge-container.types.ts

@@ -5,13 +5,13 @@ import type {ReactElement, ReactNode} from 'react'
 export type {ScrollEdgeEffect, ScrollEdgeScrollableProps} from '@hzblj/kara-native/swift-ui'
 
 /**
- * Bars over one React Native scroll view, with each platform's scroll edge under them — on iOS 26 the system's
+ * Bars over one React Native scroll view, with each platform's scroll edge under them: on iOS 26 the system's
  * progressive blur where content scrolls past a bar; on Android a Material top app bar's behaviour, the bars stacked
  * around the scroll view and filling with `surface.secondary` once content scrolls under them. The React Native tier:
  * it needs no host.
  *
  * A screen-level container: wrap the screen's scroll view with it. Mounted inside a cell of a virtualized list on iOS
- * it draws only its bottom bar — the hosted scroll view and the top bar stay blank.
+ * it draws only its bottom bar; the hosted scroll view and the top bar stay blank.
  */
 export type ScrollEdgeContainerProps = ResponsiveViewSx & {
   /**
@@ -21,7 +21,7 @@ export type ScrollEdgeContainerProps = ResponsiveViewSx & {
   automaticInsets?: boolean
   /** Laid over the scroll view's bottom edge on iOS; stacked below it on Android, filled while content continues below. */
   bottomBar?: ReactNode
-  /** Exactly one React Native scroll view — `RnScrollView`, `RnFlatList`, `RnSectionList`. */
+  /** Exactly one React Native scroll view: `RnScrollView`, `RnFlatList`, `RnSectionList`. */
   children: ReactElement<ScrollEdgeScrollableProps>
   /** iOS 26: how hard the edge cuts. `soft` by default. */
   effect?: ScrollEdgeEffect

package/src/molecules/search-bar/search-bar.types.ts

@@ -1,7 +1,7 @@
 import type {ReactNode} from 'react'
 
 /**
- * A search field drawn the same on both platforms — a rounded box with a magnifier, a `TextInput` and a clear button
+ * A search field drawn the same on both platforms: a rounded box with a magnifier, a `TextInput` and a clear button
  * while there is text. The React Native tier: it needs no host.
  */
 export type SearchBarProps = {
@@ -11,7 +11,7 @@ export type SearchBarProps = {
   placeholder?: string
   /** Test identifier, put on the field's container view rather than on the `TextInput`. */
   testID?: string
-  /** The field's text. Controlled — pass back what `onChangeText` reports. */
+  /** The field's text. Controlled: pass back what `onChangeText` reports. */
   value: string
 }
 

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/molecules/stepper/stepper.types.ts

@@ -2,10 +2,10 @@ import type {ReactNode} from 'react'
 
 /**
  * A number with minus and plus buttons beside a label: SwiftUI's `Stepper` on iOS; on Android the label, the value and
- * two icon buttons in a row. A native atom — it renders inside `<Screen>` or `<Island>`.
+ * two icon buttons in a row. A native atom: it renders inside `<Screen>` or `<Island>`.
  */
 export type StepperProps = {
-  /** The leading text. The value is shown too — before the control on iOS, between the buttons on Android. */
+  /** The leading text. The value is shown too: before the control on iOS, between the buttons on Android. */
   label: string
   /** The highest value. When unset, Android has no upper limit and iOS stops at `100`. */
   max?: number

package/src/molecules/tooltip/tooltip.types.ts

@@ -1,20 +1,20 @@
 import type {ReactNode} from 'react'
 
 /**
- * A short text tip on a native view, shown while `visible` — a SwiftUI popover from `children` on iOS, Material's plain
- * tooltip centred above them on Android. A native atom — it renders inside `<Screen>` or `<Island>`; `RnTooltip`
+ * A short text tip on a native view, shown while `visible`: a SwiftUI popover from `children` on iOS, Material's plain
+ * tooltip centred above them on Android. A native atom: it renders inside `<Screen>` or `<Island>`; `RnTooltip`
  * anchors to a React Native view.
  */
 export type TooltipProps = {
-  /** The anchor — a native view. */
+  /** The anchor: a native view. */
   children: ReactNode
   /** The tip. */
   text: string
-  /** Shows the tip while true. Controlled: nothing opens it but this — wire a long press to it if you want one. */
+  /** Shows the tip while true. Controlled: nothing opens it but this. Wire a long press to it if you want one. */
   visible: boolean
   /**
-   * The user dismissed the tip — turn `visible` off. iOS: a tap outside the popover. Android: any touch outside it, the
-   * start of a scroll included, or the anchor scrolling out of the window.
+   * The user dismissed the tip, so turn `visible` off. iOS: a tap outside the popover. Android: any touch outside it,
+   * the start of a scroll included, or the anchor scrolling out of the window.
    */
   onDismiss: () => void
 }

package/src/motion.ts

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

package/src/organisms/action-sheet/action-sheet.types.ts

@@ -3,13 +3,13 @@ import type {ReactNode} from 'react'
 import type {MenuAction} from '../menu'
 
 /**
- * A list of actions to pick one from: SwiftUI's confirmation dialog on iOS, a `Sheet` of Material rows — icon and label
- * — under the title on Android. A native atom — it renders inside `<Screen>` or `<Island>`.
+ * A list of actions to pick one from: SwiftUI's confirmation dialog on iOS, a `Sheet` of Material rows (icon and label)
+ * under the title on Android. A native atom: it renders inside `<Screen>` or `<Island>`.
  */
 export type ActionSheetProps = {
   /** The choices, top to bottom. Picking one closes the sheet. */
   actions: MenuAction[]
-  /** The sheet closed — after a pick too — so turn `visible` off. */
+  /** The sheet closed (after a pick too), so turn `visible` off. */
   onDismiss: () => void
   /** The heading above the actions. Android always shows it; on iOS the system decides, and may hide it. */
   title: string

package/src/organisms/alert/alert.types.ts

@@ -2,18 +2,18 @@ import type {ReactNode} from 'react'
 
 /**
  * A modal alert with a confirm button and Cancel: SwiftUI's alert on iOS, Material's `AlertDialog` on Android. A native
- * atom — it renders inside `<Screen>` or `<Island>`.
+ * atom: it renders inside `<Screen>` or `<Island>`.
  */
 export type AlertProps = {
   /** The confirm button's label. `OK` by default. */
   confirmLabel?: string
-  /** Marks the confirm button destructive — the system's destructive role on iOS, the destructive colour on Android. */
+  /** Marks the confirm button destructive: the system's destructive role on iOS, the destructive colour on Android. */
   destructive?: boolean
   /** The body text, under the title. */
   message?: string
   /** The confirm button was pressed. `onDismiss` follows, as it does for every way the alert closes. */
   onConfirm?: () => void
-  /** The alert closed — either button, or on Android a tap outside or back — so turn `visible` off. */
+  /** The alert closed (either button, or on Android a tap outside or back), so turn `visible` off. */
   onDismiss: () => void
   /** The alert's heading. */
   title: string

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

@@ -3,7 +3,7 @@ import type {ReactNode} from 'react'
 import type {MenuAction} from '../menu'
 
 /**
- * A context menu on a React Native subtree — a card in a list, say — opened by a long press. iOS: a
+ * A context menu on a React Native subtree (a card in a list, say), opened by a long press. iOS: a
  * `UIContextMenuInteraction`, with an optional React Native `preview` lifted while the menu is open and a callback for
  * a tap on it. Android, where Material has no lifted preview: a ripple and the long-press haptic, then a Material
  * dropdown where the finger is, with the trigger highlighted while it is open. The trigger is ordinary React Native layout, so it
@@ -14,35 +14,35 @@ export type ContextMenuProps = ResponsiveViewSx & {
   actions: MenuAction[]
   /** The trigger, laid out as usual. */
   children: ReactNode
-  /** iOS: the user tapped the lifted preview, committing to it — open the detail the card stands for. */
+  /** iOS: the user tapped the lifted preview, committing to it. Open the detail the card stands for. */
   onPreviewPress?: () => void
   /**
-   * iOS: lifted in place of the trigger while the menu is open — a larger version of the card, say. A snapshot of the
+   * iOS: lifted in place of the trigger while the menu is open (a larger version of the card, say). A snapshot of the
    * trigger when unset. Mounted only once a finger has rested on the trigger, so a list of cards does not pay for
    * every preview up front.
    */
   preview?: ReactNode
   /**
    * iOS: how the preview leaves once tapped, before `onPreviewPress`. `zoom`: its photo grows straight into the pushed
-   * screen, the way the App Store expands a preview — needs a `ZoomTransition.Source` (`@hzblj/kara-ui/router`) in the
-   * trigger, a `preview` and iOS 18, and shrinks back like `dismiss` otherwise. `pop`: UIKit's default, the preview
+   * screen, the way the App Store expands a preview. It needs a `ZoomTransition.Source` (`@hzblj/kara-ui/router`) in
+   * the trigger, a `preview` and iOS 18, and shrinks back like `dismiss` otherwise. `pop`: UIKit's default, the preview
    * flies out. `dismiss`: it shrinks back onto the trigger first. Default: `zoom` when the trigger holds a
    * `ZoomTransition.Source`, `pop` otherwise.
    */
   previewTransition?: 'dismiss' | 'pop' | 'zoom'
-  /** Test identifier — on the native view around the trigger on iOS, on the trigger's `Pressable` on Android. */
+  /** Test identifier: on the native view around the trigger on iOS, on the trigger's `Pressable` on Android. */
   testID?: string
 }
 
-/** A region of a `ContextMenu`'s trigger that keeps its own long press — see `ContextMenu.Exclusion`. */
+/** A region of a `ContextMenu`'s trigger that keeps its own long press (see `ContextMenu.Exclusion`). */
 export type ContextMenuExclusionProps = {
-  /** The region — a button inside the card, say. */
+  /** The region: a button inside the card, say. */
   children: ReactNode
 }
 
 export type ContextMenuComponent = ((props: ContextMenuProps) => ReactNode) & {
   /**
-   * A region of the trigger that must not open the menu — a button inside the card. On iOS the interaction covers the
+   * A region of the trigger that must not open the menu: a button inside the card. On iOS the interaction covers the
    * whole trigger, so a long press on that button would otherwise open the card's menu.
    */
   Exclusion: (props: ContextMenuExclusionProps) => ReactNode

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

@@ -4,16 +4,21 @@ import type {IconName} from '../../atoms/icon'
 import type {MenuAction} from '../menu'
 
 /**
- * A floating action button that unfolds into its actions. Android: Material 3 Expressive's `FloatingActionButtonMenu`
- * — the button turns into a close and the actions rise above it as labelled pills. iOS: the same button as the label
- * of a SwiftUI `Menu`. A native atom — it renders inside `<Screen>` or `<Island>`.
+ * A floating action button that unfolds into its actions. Android: Material 3 Expressive's `FloatingActionButtonMenu`,
+ * where the button turns into a close and the actions rise above it as labelled pills. iOS: the same button as the
+ * 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. */
+  /** The closed button's icon, one of the app's. A plus by default. */
   icon?: IconName
-  /** Test identifier, forwarded to the SwiftUI `Menu`. iOS only — Android ignores it. */
+  /** Test identifier, forwarded to the SwiftUI `Menu`. iOS only; Android ignores it. */
   testID?: string
 }
 

package/src/organisms/form/form.types.ts

@@ -1,7 +1,7 @@
 import type {ReactNode} from 'react'
 
 /**
- * A settings form — SwiftUI `Form` with its grouped sections, Material cards on Android. On iOS it scrolls like a
+ * A settings form: SwiftUI `Form` with its grouped sections, Material cards on Android. On iOS it scrolls like a
  * `List`, so it needs a height from outside: a `Screen`, or an `Island` with `matchContents={false}` and a height. In
  * an island that sizes itself to its content it has no height and shows nothing.
  */

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

@@ -5,7 +5,7 @@ import type {IconName} from '../../atoms/icon'
 /** One action of a `Menu`, an `ActionSheet`, a `ContextMenu` or a `FabMenu`. */
 export type MenuAction = {
   /**
-   * Draws the action in the destructive colour — the system's destructive role on iOS. `FabMenu` ignores it on
+   * Draws the action in the destructive colour (the system's destructive role on iOS). `FabMenu` ignores it on
    * Android.
    */
   destructive?: boolean
@@ -22,7 +22,7 @@ export type MenuAction = {
 
 /**
  * A text button that opens a list of actions: a SwiftUI `Menu` on iOS, a Material dropdown anchored to it on Android.
- * A native atom — it renders inside `<Screen>` or `<Island>`.
+ * A native atom: it renders inside `<Screen>` or `<Island>`.
  */
 export type MenuProps = {
   /** The menu's actions, top to bottom. */