panelui-native 0.65.0 → 0.68.0

package/src/components/planner/planner-entries.ts

@@ -0,0 +1,146 @@
+/**
+ * The parts of a planner that are arithmetic rather than rendering: which
+ * entries fall on which day, which category an entry belongs to, what a day
+ * says to a screen reader, and what the month adds up to.
+ *
+ * Kept out of the component so they can be tested without a renderer, and so
+ * the day cell stays a function of its inputs rather than of when it ran.
+ *
+ * Nothing here imports anything. The tests run this file through `node --test`
+ * with type stripping rather than a bundler, so an extensionless import of a
+ * sibling module — which is how the rest of the library is written — does not
+ * resolve. That is why the one line of date arithmetic below is here instead
+ * of coming from `utils/date`.
+ */
+
+/** The minimum an entry has to be for the grid to place it. */
+export interface PlannerDatedEntry {
+  date: Date;
+  /** Matches a `PlannerCategory` id. An entry without one is uncategorised. */
+  category?: string;
+}
+
+export interface PlannerCountedCategory {
+  id: string;
+  label: string;
+  count: number;
+}
+
+/** A day's key: local midnight, so two times on the same day agree. */
+export function dayKey(date: Date): number {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+
+/**
+ * Entries grouped by the day they fall on, each day in the order it was given.
+ *
+ * A map rather than a lookup per cell: a month draws 42 cells, and asking each
+ * of them to filter the whole list is 42 passes over it every render.
+ */
+export function bucketByDay<T extends PlannerDatedEntry>(
+  entries: readonly T[]
+): Map<number, T[]> {
+  const days = new Map<number, T[]>();
+  for (const entry of entries) {
+    const key = dayKey(entry.date);
+    const bucket = days.get(key);
+    if (bucket) bucket.push(entry);
+    else days.set(key, [entry]);
+  }
+  return days;
+}
+
+/** What falls on one day. Always an array, so a cell has nothing to guard. */
+export function entriesOn<T extends PlannerDatedEntry>(
+  days: Map<number, T[]>,
+  date: Date
+): T[] {
+  return days.get(dayKey(date)) ?? EMPTY;
+}
+
+/*
+ * One frozen array for every empty day, rather than a new `[]` each call. A
+ * month is mostly empty days, and a fresh array per cell per render defeats
+ * every memo below it for a day where nothing changed.
+ */
+const EMPTY: never[] = Object.freeze([]) as never[];
+
+/**
+ * How many entries a cell draws before it stops and says how many are left.
+ *
+ * `limit` of 0 means draw none of them — the day still carries its marker and
+ * its spoken label, which is the whole content of a compact planner.
+ */
+export function visibleEntries<T>(entries: readonly T[], limit: number): {
+  shown: T[];
+  overflow: number;
+} {
+  const cap = Math.max(0, Math.floor(limit));
+  if (entries.length <= cap) return { shown: [...entries], overflow: 0 };
+  return { shown: entries.slice(0, cap), overflow: entries.length - cap };
+}
+
+/**
+ * What a day says when it is read out.
+ *
+ * The date on its own is what a date picker says, and it is not enough here: a
+ * day in a planner differs from the one beside it by what is on it, and a
+ * marker that carries that difference in colour alone carries it to nobody who
+ * cannot see the colour. So the count and the categories are spoken.
+ *
+ * `dateLabel` is passed in rather than formatted here, so the grid and the
+ * label agree about the calendar system and the locale.
+ */
+export function dayAccessibilityLabel<T extends PlannerDatedEntry>(
+  dateLabel: string,
+  entries: readonly T[],
+  categoryLabels: ReadonlyMap<string, string>
+): string {
+  if (entries.length === 0) return `${dateLabel}, nothing planned`;
+
+  const named: string[] = [];
+  for (const entry of entries) {
+    const label = entry.category ? categoryLabels.get(entry.category) : undefined;
+    if (label && !named.includes(label)) named.push(label);
+  }
+
+  const count = `${entries.length} ${entries.length === 1 ? 'entry' : 'entries'}`;
+  return named.length > 0
+    ? `${dateLabel}, ${count}: ${named.join(', ')}`
+    : `${dateLabel}, ${count}`;
+}
+
+/**
+ * What the month adds up to, per category, in the order the categories were
+ * declared — so the legend and the totals beside it never disagree about which
+ * one comes first.
+ *
+ * Entries outside `month` are left out. The grid draws the days either side of
+ * the month it is showing, and counting those would make a total that changes
+ * with the week the month happens to start on.
+ */
+export function summariseMonth<T extends PlannerDatedEntry>(
+  entries: readonly T[],
+  categories: readonly { id: string; label: string }[],
+  isInMonth: (date: Date) => boolean
+): { total: number; categories: PlannerCountedCategory[] } {
+  const counts = new Map<string, number>();
+  let total = 0;
+
+  for (const entry of entries) {
+    if (!isInMonth(entry.date)) continue;
+    total += 1;
+    if (entry.category) {
+      counts.set(entry.category, (counts.get(entry.category) ?? 0) + 1);
+    }
+  }
+
+  return {
+    total,
+    categories: categories.map(({ id, label }) => ({
+      id,
+      label,
+      count: counts.get(id) ?? 0,
+    })),
+  };
+}

package/src/components/popover/index.tsx

@@ -321,6 +321,9 @@ export interface PopoverContentProps extends ViewProps {
    * Frost the background behind the panel instead of dimming it. Uses
    * `expo-blur` when installed and falls back to the dimmed scrim when it is
    * not, so it is safe to pass either way.
+   *
+   * Someone who has Reduce Transparency switched on gets an opaque
+   * backdrop instead, which is the whole point of the setting.
    */
   blur?: boolean;
   /**

package/src/components/radar-chart/index.tsx

@@ -59,6 +59,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
+import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import { cn } from '../../utils/cn';
 import {
   polarPoint,
@@ -212,6 +213,9 @@ export interface RadarChartProps extends Omit<ViewProps, 'children'> {
   /** Drop the room reserved for axis labels, for a radar with none. */
   compact?: boolean;
   children?: ReactNode;
+  /** Accessible data labels and optional activation for each axis row. */
+  accessibilityLabelForDatum?: ChartAccessibilityProps<RadarChartDatum>['accessibilityLabelForDatum'];
+  onAccessibilityDatumPress?: ChartAccessibilityProps<RadarChartDatum>['onAccessibilityDatumPress'];
 }
 
 /** Imperative handle: re-run the reveal on demand, for a "replay" control. */
@@ -231,6 +235,11 @@ const RadarChartRoot = forwardRef<RadarChartHandle, RadarChartProps>(
       domain,
       animationDuration = REVEAL_DURATION,
       compact = false,
+      accessible,
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityLabelForDatum,
+      onAccessibilityDatumPress,
       children,
       ...props
     },
@@ -393,6 +402,19 @@ const RadarChartRoot = forwardRef<RadarChartHandle, RadarChartProps>(
       <RadarChartContext.Provider value={context}>
         <View {...props} style={props.style} className={cn('w-full', className)}>
           {header}
+          <ChartAccessibilityData
+            chart="Radar chart"
+            data={data}
+            disabled={accessible === false || status === 'loading'}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
+            accessibilityLabelForDatum={accessibilityLabelForDatum}
+            onAccessibilityDatumPress={onAccessibilityDatumPress}
+            valueOf={(datum) => [
+              [axisKey, datum[axisKey]],
+              ...series.map(([key]) => [key, datum[key]] as [string, unknown]),
+            ]}
+          />
           <View
             onLayout={onLayout}
             style={
@@ -407,6 +429,8 @@ const RadarChartRoot = forwardRef<RadarChartHandle, RadarChartProps>(
                 : { aspectRatio }
             }
             className={fixedSize ? 'self-center' : 'w-full'}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
           >
             {radius > 0 ? (
               <>

package/src/components/scatter-chart/index.tsx

@@ -67,6 +67,7 @@ import Animated, {
 import Svg, { Circle, G, Line as SvgLine } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
+import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import { compactNumber, useSeriesColor, xAt, yOf, type Plot } from '../../utils/chart';
 import { cn } from '../../utils/cn';
 
@@ -191,7 +192,7 @@ export function useScatterChart() {
   return { activePoint, xDataKey };
 }
 
-export interface ScatterChartProps extends ViewProps {
+export interface ScatterChartProps extends ViewProps, ChartAccessibilityProps<ScatterChartDatum> {
   className?: string;
   /** The rows. Each one is a point, placed by two of its values. */
   data: ScatterChartDatum[];
@@ -244,6 +245,11 @@ const ScatterChartRoot = forwardRef<ScatterChartHandle, ScatterChartProps>(
       xDomain,
       yDomain,
       onActivePointChange,
+      accessible,
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityLabelForDatum,
+      onAccessibilityDatumPress,
       compact = false,
       children,
       ...props
@@ -476,7 +482,26 @@ const ScatterChartRoot = forwardRef<ScatterChartHandle, ScatterChartProps>(
       <ScatterChartContext.Provider value={context}>
         <View {...props} style={props.style} className={cn('w-full', className)}>
           {header}
-          <View onLayout={onLayout} style={{ aspectRatio }} className="w-full">
+          <ChartAccessibilityData
+            chart="Scatter chart"
+            data={data}
+            disabled={accessible === false || status === 'loading'}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
+            accessibilityLabelForDatum={accessibilityLabelForDatum}
+            onAccessibilityDatumPress={onAccessibilityDatumPress}
+            valueOf={(datum) => [
+              [xDataKey, datum[xDataKey]],
+              ...series.map(([key]) => [key, datum[key]] as [string, unknown]),
+            ]}
+          />
+          <View
+            onLayout={onLayout}
+            style={{ aspectRatio }}
+            className="w-full"
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+          >
             {plot.width > 0 ? (
               <>
                 <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>

package/src/components/selection-mode/index.tsx

@@ -88,6 +88,15 @@ import { Text, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import { selectionTick } from '../../utils/haptics';
 import { BottomSheet } from '../bottom-sheet';
+import {
+  canEnterSelection,
+  handleSelectionItemPress,
+  selectAllValues,
+  selectionOwnsPress,
+  selectionTarget,
+  selectValue,
+  toggleValue,
+} from './selection-mode-contracts';
 
 /** How long the circle takes to come and go, in milliseconds. */
 const REVEAL_DURATION = 180;
@@ -293,11 +302,12 @@ function SelectionModeRoot({
       // Entering with the row that was pressed already picked. Entering with
       // nothing picked leaves the reader in a list that has changed under them
       // with nothing to show for it.
-      if (value !== undefined && !selectedRef.current.includes(value)) {
-        setSelected([...selectedRef.current, value]);
+      if (value !== undefined) {
+        const next = selectValue(selectedRef.current, value, max);
+        if (next !== selectedRef.current) setSelected(next);
       }
     },
-    [haptics, setActive, setSelected]
+    [haptics, max, setActive, setSelected]
   );
 
   /*
@@ -321,13 +331,10 @@ function SelectionModeRoot({
   const toggle = useCallback(
     (value: string) => {
       const current = selectedRef.current;
-      if (current.includes(value)) {
-        setSelected(current.filter((entry) => entry !== value));
-      } else {
-        if (max !== undefined && current.length >= max) return;
-        if (haptics) selectionTick();
-        setSelected([...current, value]);
-      }
+      const next = toggleValue(current, value, max);
+      if (next === current) return;
+      if (!current.includes(value) && haptics) selectionTick();
+      setSelected(next);
     },
     [max, haptics, setSelected]
   );
@@ -336,15 +343,15 @@ function SelectionModeRoot({
     if (!values) return;
     // At the limit rather than refusing: somebody who asked for all of them and
     // can only have twenty wants the twenty, not an error.
-    setSelected(max === undefined ? [...values] : values.slice(0, max));
+    setSelected(selectAllValues(values, max));
   }, [values, max, setSelected]);
 
   const clear = useCallback(() => setSelected([]), [setSelected]);
 
   const total = values?.length ?? 0;
   const count = selected.length;
-  const allSelected =
-    total > 0 && count >= (max === undefined ? total : Math.min(total, max));
+  const target = selectionTarget(total, max);
+  const allSelected = target > 0 && count >= target;
 
   // An open mode owns the back button: back should leave the mode, not the
   // screen the list is on.
@@ -459,10 +466,11 @@ export interface SelectionModeItemProps extends Omit<ViewProps, 'children'> {
   className?: string;
   /** This row's id. What ends up in `selected`. */
   value: string;
-  /** What the row does when it is pressed and the mode is off. */
+  /** What the row does whenever selection does not own its press. */
   onPress?: () => void;
   /**
-   * Stop this row entering selection mode, and being picked once in it. For a
+   * Stop this row entering selection mode, and being picked once in it. Its
+   * ordinary `onPress` still runs, including while selection is active. For a
    * header row, an advert, a "load more" — anything in the list that is not one
    * of the things being chosen between.
    */
@@ -487,8 +495,9 @@ export interface SelectionModeItemProps extends Omit<ViewProps, 'children'> {
  *
  * The press behaviour is the whole component: off mode, a press is the row's
  * own and a long press turns the mode on with this row picked; in it, a press
- * picks and unpicks and the row's own press is unreachable. Two meanings for
- * one gesture is exactly why the mode has to be visible from the header.
+ * picks and unpicks. A row excluded from selection keeps its ordinary press in
+ * both states. Two meanings for one gesture is exactly why the mode has to be
+ * visible from the header.
  */
 function SelectionModeItem({
   className,
@@ -503,6 +512,7 @@ function SelectionModeItem({
   const { active, enter, toggle, isSelected, sheet } = useSelectionMode();
   const selected = isSelected(value);
   const showing = alwaysShowIndicator || active;
+  const selecting = selectionOwnsPress(active, disabled);
   const reducedMotion = useReducedMotion();
 
   const context = useMemo(() => ({ value }), [value]);
@@ -537,23 +547,20 @@ function SelectionModeItem({
   return (
     <SelectionModeItemContext.Provider value={context}>
       <Pressable
-        accessibilityRole={showing ? 'checkbox' : 'button'}
-        accessibilityState={showing ? { checked: selected, disabled } : { disabled }}
-        // The row is unreachable in selection mode, so a screen reader is told
-        // what pressing it does now rather than what it used to do.
+        accessibilityRole={selecting ? 'checkbox' : 'button'}
+        accessibilityState={selecting ? { checked: selected } : undefined}
+        // Eligible rows become checkboxes only while selection owns their
+        // press. Excluded rows remain ordinary buttons because their action is
+        // still available.
         accessibilityHint={
-          showing ? undefined : disabled ? undefined : 'Long press to select'
+          active || disabled ? undefined : 'Long press to select'
         }
-        disabled={disabled && showing}
         onPress={() => {
-          if (disabled) return;
-          if (showing) toggle(value);
-          else onPress?.();
-        }}
-        onLongPress={sheet ? undefined : () => {
-          if (disabled || showing) return;
-          enter(value);
+          handleSelectionItemPress(active, disabled, () => toggle(value), onPress);
         }}
+        onLongPress={
+          canEnterSelection(active, disabled, sheet) ? () => enter(value) : undefined
+        }
         className={cn(
           indicator === 'leading' ? 'flex-row items-center gap-3 px-4 py-2.5' : '',
           className

package/src/components/selection-mode/selection-mode-contracts.ts

@@ -0,0 +1,53 @@
+/** The effective selection cap. Invalid and negative caps allow no additions. */
+function selectionLimit(max?: number): number {
+  if (max === undefined || max === Infinity) return Infinity;
+  return Number.isFinite(max) ? Math.max(0, Math.floor(max)) : 0;
+}
+
+/** Add one value without duplicating it or crossing the configured cap. */
+export function selectValue(selected: string[], value: string, max?: number): string[] {
+  if (selected.includes(value) || !(selected.length < selectionLimit(max))) return selected;
+  return [...selected, value];
+}
+
+/** Remove an existing value, or add it under the same contract used by entry. */
+export function toggleValue(selected: string[], value: string, max?: number): string[] {
+  return selected.includes(value)
+    ? selected.filter((entry) => entry !== value)
+    : selectValue(selected, value, max);
+}
+
+/** The values produced by select-all, capped by the same normalized limit. */
+export function selectAllValues(values: string[], max?: number): string[] {
+  const limit = selectionLimit(max);
+  return limit === Infinity ? [...values] : values.slice(0, limit);
+}
+
+/** How many selections constitute all selectable values. */
+export function selectionTarget(total: number, max?: number): number {
+  return Math.min(total, selectionLimit(max));
+}
+
+/**
+ * A selection-ineligible row keeps its ordinary action in every mode. Only an
+ * active, eligible row gives its press to selection.
+ */
+export function selectionOwnsPress(active: boolean, disabled: boolean): boolean {
+  return active && !disabled;
+}
+
+/** Execute the one action owned by a row press under the interaction contract. */
+export function handleSelectionItemPress(
+  active: boolean,
+  disabled: boolean,
+  toggle: () => void,
+  action?: () => void
+): void {
+  if (selectionOwnsPress(active, disabled)) toggle();
+  else action?.();
+}
+
+/** Long press enters only from an inactive screen row that can be selected. */
+export function canEnterSelection(active: boolean, disabled: boolean, sheet: boolean): boolean {
+  return !active && !disabled && !sheet;
+}

package/src/components/signature/index.tsx

@@ -58,7 +58,12 @@ import {
   type ReactNode,
   type Ref,
 } from 'react';
-import { View, type ViewProps } from 'react-native';
+import {
+  AccessibilityInfo,
+  View,
+  type AccessibilityActionEvent,
+  type ViewProps,
+} from 'react-native';
 import { useCSSVariable } from 'uniwind';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
@@ -81,6 +86,12 @@ import {
 } from '../../primitives/animated-pressable';
 import { Text } from '../../primitives/text';
 import { cn } from '../../utils/cn';
+import {
+  signatureAccessibilityActions,
+  signatureAccessibilityValue,
+  signatureAnnouncement,
+  type SignatureChangeKind,
+} from './signature-accessibility';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
@@ -175,6 +186,12 @@ export interface SignatureProps
   placeholder?: ReactNode;
   /** Take no input. The strokes already there stay visible. */
   disabled?: boolean;
+  /**
+   * Opens a product-provided non-drawing method, such as typing a legal name,
+   * uploading an image, or asking for assisted signing. Exposed as a screen
+   * reader action; provide the same choice as a visible control too.
+   */
+  onRequestAlternative?: () => void;
   /** A stroke has started. */
   onBegin?: () => void;
   /** A stroke has finished. */
@@ -292,12 +309,17 @@ function SignatureRoot(
     guidelineLabel,
     placeholder,
     disabled = false,
+    onRequestAlternative,
     onBegin,
     onEnd,
     onChange,
     padClassName,
     placeholderClassName,
     guideClassName,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityActions,
+    onAccessibilityAction,
     ...props
   }: SignatureProps,
   ref: Ref<SignatureHandle>
@@ -325,19 +347,30 @@ function SignatureRoot(
   beginRef.current = onBegin;
   const endRef = useRef(onEnd);
   endRef.current = onEnd;
+  const alternativeRef = useRef(onRequestAlternative);
+  alternativeRef.current = onRequestAlternative;
 
   // `onChange` fires from an effect rather than from inside a state updater.
   // An updater can be replayed during a render, and calling a parent's setState
   // from there is the "cannot update a component while rendering a different
   // component" warning — earned, not spurious.
   const reported = useRef(0);
+  const changeKind = useRef<SignatureChangeKind>('draw');
   useEffect(() => {
     if (reported.current === strokes.length) return;
+    const previous = reported.current;
     reported.current = strokes.length;
     changeRef.current?.(strokes.length);
+    const announcement = signatureAnnouncement(
+      previous,
+      strokes.length,
+      changeKind.current
+    );
+    if (announcement) AccessibilityInfo.announceForAccessibility(announcement);
   }, [strokes.length]);
 
   const commit = useCallback((d: string) => {
+    changeKind.current = 'draw';
     setStrokes((current) => [...current, d]);
     // Drawing again is a new branch of history, so what was undone is gone.
     setUndone([]);
@@ -419,28 +452,37 @@ function SignatureRoot(
     [layout.height, layout.width]
   );
 
+  const clear = useCallback(() => {
+    changeKind.current = 'clear';
+    setStrokes([]);
+    setUndone([]);
+  }, []);
+
+  const undo = useCallback(() => {
+    const last = strokes[strokes.length - 1];
+    if (last === undefined) return;
+    changeKind.current = 'undo';
+    setUndone((stack) => [...stack, last]);
+    setStrokes(strokes.slice(0, -1));
+  }, [strokes]);
+
+  const redo = useCallback(() => {
+    const restored = undone[undone.length - 1];
+    if (restored === undefined) return;
+    changeKind.current = 'redo';
+    setUndone(undone.slice(0, -1));
+    setStrokes([...strokes, restored]);
+  }, [strokes, undone]);
+
   useImperativeHandle(
     ref,
     (): SignatureHandle => ({
       // These read the current arrays and set flat values rather than nesting
       // one updater inside another — a nested updater runs during the render
       // pass, which is not a safe place to schedule another component's update.
-      clear() {
-        setStrokes([]);
-        setUndone([]);
-      },
-      undo() {
-        const last = strokes[strokes.length - 1];
-        if (last === undefined) return;
-        setUndone((stack) => [...stack, last]);
-        setStrokes(strokes.slice(0, -1));
-      },
-      redo() {
-        const restored = undone[undone.length - 1];
-        if (restored === undefined) return;
-        setUndone(undone.slice(0, -1));
-        setStrokes([...strokes, restored]);
-      },
+      clear,
+      undo,
+      redo,
       isEmpty: () => strokes.length === 0,
       strokeCount: () => strokes.length,
       toSVG: svgDocument,
@@ -524,10 +566,47 @@ function SignatureRoot(
         };
       },
     }),
-    [layout.height, layout.width, rasterise, strokes, undone, svgDocument]
+    [clear, layout.height, layout.width, rasterise, redo, strokes, svgDocument, undo]
   );
 
   const empty = strokes.length === 0;
+  const padActions = useMemo(
+    () =>
+      disabled
+        ? []
+        : [
+            ...(accessibilityActions ?? []),
+            ...signatureAccessibilityActions(
+              strokes.length,
+              undone.length,
+              Boolean(onRequestAlternative),
+              false
+            ),
+          ],
+    [accessibilityActions, disabled, onRequestAlternative, strokes.length, undone.length]
+  );
+  const handleAccessibilityAction = useCallback(
+    (event: AccessibilityActionEvent) => {
+      if (disabled) return;
+      switch (event.nativeEvent.actionName) {
+        case 'signature-undo':
+          undo();
+          return;
+        case 'signature-redo':
+          redo();
+          return;
+        case 'signature-clear':
+          clear();
+          return;
+        case 'signature-alternative':
+          alternativeRef.current?.();
+          return;
+        default:
+          onAccessibilityAction?.(event);
+      }
+    },
+    [clear, disabled, onAccessibilityAction, redo, undo]
+  );
 
   return (
     <View className={slots.root({ className })} {...props}>
@@ -541,9 +620,17 @@ function SignatureRoot(
           onLayout={(event) => setLayout(event.nativeEvent.layout)}
           accessible
           accessibilityRole="image"
-          accessibilityLabel="Signature pad"
-          accessibilityHint="Draw your signature with your finger"
+          accessibilityLabel={accessibilityLabel ?? 'Signature pad'}
+          accessibilityHint={
+            accessibilityHint ??
+            (onRequestAlternative
+              ? 'Direct touch drawing requires tracing a path. Use actions to edit or choose another signature method.'
+              : 'Direct touch drawing requires tracing a path. Use actions to undo, redo, or clear strokes.')
+          }
           accessibilityState={{ disabled }}
+          accessibilityValue={signatureAccessibilityValue(strokes.length)}
+          accessibilityActions={padActions}
+          onAccessibilityAction={handleAccessibilityAction}
         >
           {guideline && layout.height > 0 ? (
             <View