@assistant-ui/react-native 0.1.37 → 0.1.38

package/src/primitives/accessibilityRole.test.tsx

@@ -0,0 +1,335 @@
+import { act, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ActionBarCopy } from "./actionBar/ActionBarCopy";
+import { ActionBarEdit } from "./actionBar/ActionBarEdit";
+import { ActionBarFeedbackNegative } from "./actionBar/ActionBarFeedbackNegative";
+import { ActionBarFeedbackPositive } from "./actionBar/ActionBarFeedbackPositive";
+import { ActionBarReload } from "./actionBar/ActionBarReload";
+import { AttachmentRemove } from "./attachment/AttachmentRemove";
+import { BranchPickerNext } from "./branchPicker/BranchPickerNext";
+import { BranchPickerPrevious } from "./branchPicker/BranchPickerPrevious";
+import { ChainOfThoughtAccordionTrigger } from "./chainOfThought/ChainOfThoughtAccordionTrigger";
+import { ComposerAddAttachment } from "./composer/ComposerAddAttachment";
+import { ComposerCancel } from "./composer/ComposerCancel";
+import { ComposerQuoteDismiss } from "./composer/ComposerQuoteDismiss";
+import { ComposerSend } from "./composer/ComposerSend";
+import { QueueItemRemove } from "./queueItem/QueueItemRemove";
+import { QueueItemSteer } from "./queueItem/QueueItemSteer";
+import { SuggestionTrigger } from "./suggestion/SuggestionTrigger";
+import { ThreadSuggestion } from "./thread/ThreadSuggestion";
+import { ThreadListNew } from "./threadList/ThreadListNew";
+import { ThreadListItemArchive } from "./threadListItem/ThreadListItemArchive";
+import { ThreadListItemDelete } from "./threadListItem/ThreadListItemDelete";
+import { ThreadListItemTrigger } from "./threadListItem/ThreadListItemTrigger";
+import { ThreadListItemUnarchive } from "./threadListItem/ThreadListItemUnarchive";
+
+vi.mock("@assistant-ui/store", () => ({
+  useAui: () => ({
+    attachment: { remove: vi.fn() },
+    chainOfThought: { setCollapsed: vi.fn() },
+    composer: { setQuote: vi.fn() },
+    queueItem: { remove: vi.fn(), steer: vi.fn() },
+  }),
+  useAuiState: <T,>(
+    selector: (s: {
+      suggestion: { prompt: string };
+      chainOfThought: { collapsed: boolean };
+      threads: { newThreadId: string | null; mainThreadId: string };
+      threadListItem: { id: string };
+    }) => T,
+  ) =>
+    selector({
+      suggestion: { prompt: "p" },
+      chainOfThought: { collapsed: false },
+      threads: { newThreadId: null, mainThreadId: "main" },
+      threadListItem: { id: "thread" },
+    }),
+}));
+
+vi.mock("@assistant-ui/core/react", () => ({
+  useActionBarCopy: () => ({
+    copy: vi.fn(),
+    disabled: false,
+    isCopied: false,
+  }),
+  useActionBarEdit: () => ({ edit: vi.fn(), disabled: false }),
+  useActionBarFeedbackNegative: () => ({
+    submit: vi.fn(),
+    isSubmitted: false,
+  }),
+  useActionBarFeedbackPositive: () => ({
+    submit: vi.fn(),
+    isSubmitted: false,
+  }),
+  useActionBarReload: () => ({ reload: vi.fn(), disabled: false }),
+  useBranchPickerNext: () => ({ next: vi.fn(), disabled: false }),
+  useBranchPickerPrevious: () => ({ previous: vi.fn(), disabled: false }),
+  useComposerAddAttachment: () => ({ disabled: false }),
+  useComposerCancel: () => ({ cancel: vi.fn(), disabled: false }),
+  useComposerSend: () => ({ send: vi.fn(), disabled: false }),
+  useSuggestionTrigger: () => ({ trigger: vi.fn(), disabled: false }),
+  useThreadListNew: () => ({ switchToNewThread: vi.fn() }),
+  useThreadListItemArchive: () => ({ archive: vi.fn() }),
+  useThreadListItemDelete: () => ({ delete: vi.fn() }),
+  useThreadListItemTrigger: () => ({ switchTo: vi.fn() }),
+  useThreadListItemUnarchive: () => ({ unarchive: vi.fn() }),
+}));
+
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+
+declare global {
+  interface ImportMeta {
+    glob(
+      pattern: string,
+      options: { query: "?raw"; eager: true; import: "default" },
+    ): Record<string, string>;
+  }
+}
+
+type Extra = { accessibilityRole?: "link" | undefined };
+
+const actionable: ReadonlyArray<{
+  name: string;
+  render: (extra: Extra) => ReactNode;
+}> = [
+  {
+    name: "ActionBarCopy",
+    render: (e) => (
+      <ActionBarCopy testID="t" {...e}>
+        x
+      </ActionBarCopy>
+    ),
+  },
+  {
+    name: "ActionBarEdit",
+    render: (e) => (
+      <ActionBarEdit testID="t" {...e}>
+        x
+      </ActionBarEdit>
+    ),
+  },
+  {
+    name: "ActionBarFeedbackNegative",
+    render: (e) => (
+      <ActionBarFeedbackNegative testID="t" {...e}>
+        x
+      </ActionBarFeedbackNegative>
+    ),
+  },
+  {
+    name: "ActionBarFeedbackPositive",
+    render: (e) => (
+      <ActionBarFeedbackPositive testID="t" {...e}>
+        x
+      </ActionBarFeedbackPositive>
+    ),
+  },
+  {
+    name: "ActionBarReload",
+    render: (e) => (
+      <ActionBarReload testID="t" {...e}>
+        x
+      </ActionBarReload>
+    ),
+  },
+  {
+    name: "AttachmentRemove",
+    render: (e) => (
+      <AttachmentRemove testID="t" {...e}>
+        x
+      </AttachmentRemove>
+    ),
+  },
+  {
+    name: "BranchPickerNext",
+    render: (e) => (
+      <BranchPickerNext testID="t" {...e}>
+        x
+      </BranchPickerNext>
+    ),
+  },
+  {
+    name: "BranchPickerPrevious",
+    render: (e) => (
+      <BranchPickerPrevious testID="t" {...e}>
+        x
+      </BranchPickerPrevious>
+    ),
+  },
+  {
+    name: "ChainOfThoughtAccordionTrigger",
+    render: (e) => (
+      <ChainOfThoughtAccordionTrigger testID="t" {...e}>
+        x
+      </ChainOfThoughtAccordionTrigger>
+    ),
+  },
+  {
+    name: "ComposerAddAttachment",
+    render: (e) => (
+      <ComposerAddAttachment testID="t" {...e}>
+        x
+      </ComposerAddAttachment>
+    ),
+  },
+  {
+    name: "ComposerCancel",
+    render: (e) => (
+      <ComposerCancel testID="t" {...e}>
+        x
+      </ComposerCancel>
+    ),
+  },
+  {
+    name: "ComposerSend",
+    render: (e) => (
+      <ComposerSend testID="t" {...e}>
+        x
+      </ComposerSend>
+    ),
+  },
+  {
+    name: "ComposerQuoteDismiss",
+    render: (e) => (
+      <ComposerQuoteDismiss testID="t" {...e}>
+        x
+      </ComposerQuoteDismiss>
+    ),
+  },
+  {
+    name: "QueueItemRemove",
+    render: (e) => (
+      <QueueItemRemove testID="t" {...e}>
+        x
+      </QueueItemRemove>
+    ),
+  },
+  {
+    name: "QueueItemSteer",
+    render: (e) => (
+      <QueueItemSteer testID="t" {...e}>
+        x
+      </QueueItemSteer>
+    ),
+  },
+  {
+    name: "SuggestionTrigger",
+    render: (e) => (
+      <SuggestionTrigger testID="t" {...e}>
+        x
+      </SuggestionTrigger>
+    ),
+  },
+  {
+    name: "ThreadSuggestion",
+    render: (e) => (
+      <ThreadSuggestion testID="t" prompt="p" {...e}>
+        x
+      </ThreadSuggestion>
+    ),
+  },
+  {
+    name: "ThreadListNew",
+    render: (e) => (
+      <ThreadListNew testID="t" {...e}>
+        x
+      </ThreadListNew>
+    ),
+  },
+  {
+    name: "ThreadListItemArchive",
+    render: (e) => (
+      <ThreadListItemArchive testID="t" {...e}>
+        x
+      </ThreadListItemArchive>
+    ),
+  },
+  {
+    name: "ThreadListItemDelete",
+    render: (e) => (
+      <ThreadListItemDelete testID="t" {...e}>
+        x
+      </ThreadListItemDelete>
+    ),
+  },
+  {
+    name: "ThreadListItemTrigger",
+    render: (e) => (
+      <ThreadListItemTrigger testID="t" {...e}>
+        x
+      </ThreadListItemTrigger>
+    ),
+  },
+  {
+    name: "ThreadListItemUnarchive",
+    render: (e) => (
+      <ThreadListItemUnarchive testID="t" {...e}>
+        x
+      </ThreadListItemUnarchive>
+    ),
+  },
+];
+
+describe("react-native primitive accessibility roles", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    await act(async () => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  const mount = async (node: ReactNode) => {
+    await act(async () => {
+      root.render(node);
+    });
+    const el = container.querySelector('[data-testid="t"]');
+    expect(el).not.toBeNull();
+    return el as HTMLElement;
+  };
+
+  it("gives every Pressable primitive in the package a button role", () => {
+    const wrappers = Object.entries(
+      import.meta.glob("./**/*.tsx", {
+        query: "?raw",
+        eager: true,
+        import: "default",
+      }),
+    ).filter(
+      ([file, source]) =>
+        !file.endsWith(".test.tsx") && source.includes("<Pressable"),
+    );
+
+    expect(
+      wrappers
+        .filter(([, source]) => !source.includes('accessibilityRole="button"'))
+        .map(([file]) => file),
+    ).toEqual([]);
+
+    expect(
+      wrappers.map(([file]) => file.replace(/^.*\/|\.tsx$/g, "")).sort(),
+    ).toEqual(actionable.map(({ name }) => name).sort());
+  });
+
+  for (const { name, render } of actionable) {
+    it(`${name} defaults its accessibilityRole to button`, async () => {
+      const el = await mount(render({}));
+      expect(el.getAttribute("role")).toBe("button");
+    });
+
+    it(`${name} lets the caller override the role`, async () => {
+      const el = await mount(render({ accessibilityRole: "link" }));
+      expect(el.getAttribute("role")).toBe("link");
+    });
+  }
+});

package/src/primitives/actionBar/ActionBarCopy.tsx

@@ -26,6 +26,7 @@ export const ActionBarCopy = ({
     <Pressable
       onPress={copy}
       disabled={disabledProp ?? disabled}
+      accessibilityRole="button"
       {...pressableProps}
     >
       {typeof children === "function" ? children({ isCopied }) : children}

package/src/primitives/actionBar/ActionBarEdit.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useActionBarEdit } from "@assistant-ui/core/react";
 
-export type ActionBarEditProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type ActionBarEditProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
 };
 
 export const ActionBarEdit = ({
@@ -17,6 +19,7 @@ export const ActionBarEdit = ({
     <Pressable
       onPress={edit}
       disabled={disabledProp ?? disabled}
+      accessibilityRole="button"
       {...pressableProps}
     >
       {children}

package/src/primitives/actionBar/ActionBarFeedbackNegative.tsx

@@ -16,7 +16,7 @@ export const ActionBarFeedbackNegative = ({
   const { submit, isSubmitted } = useActionBarFeedbackNegative();
 
   return (
-    <Pressable onPress={submit} {...pressableProps}>
+    <Pressable onPress={submit} accessibilityRole="button" {...pressableProps}>
       {typeof children === "function" ? children({ isSubmitted }) : children}
     </Pressable>
   );

package/src/primitives/actionBar/ActionBarFeedbackPositive.tsx

@@ -16,7 +16,7 @@ export const ActionBarFeedbackPositive = ({
   const { submit, isSubmitted } = useActionBarFeedbackPositive();
 
   return (
-    <Pressable onPress={submit} {...pressableProps}>
+    <Pressable onPress={submit} accessibilityRole="button" {...pressableProps}>
       {typeof children === "function" ? children({ isSubmitted }) : children}
     </Pressable>
   );

package/src/primitives/actionBar/ActionBarReload.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useActionBarReload } from "@assistant-ui/core/react";
 
-export type ActionBarReloadProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type ActionBarReloadProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
 };
 
 export const ActionBarReload = ({
@@ -17,6 +19,7 @@ export const ActionBarReload = ({
     <Pressable
       onPress={reload}
       disabled={disabledProp ?? disabled}
+      accessibilityRole="button"
       {...pressableProps}
     >
       {children}

package/src/primitives/attachment/AttachmentRemove.tsx

@@ -1,10 +1,13 @@
-import { type ReactNode, useCallback } from "react";
+import { useCallback } from "react";
 import { Pressable, type PressableProps } from "react-native";
 
 import { useAui } from "@assistant-ui/store";
 
-export type AttachmentRemoveProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type AttachmentRemoveProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
 };
 
 export const AttachmentRemove = ({
@@ -18,7 +21,11 @@ export const AttachmentRemove = ({
   }, [aui]);
 
   return (
-    <Pressable onPress={handleRemove} {...pressableProps}>
+    <Pressable
+      onPress={handleRemove}
+      accessibilityRole="button"
+      {...pressableProps}
+    >
       {children}
     </Pressable>
   );

package/src/primitives/branchPicker/BranchPickerNext.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useBranchPickerNext } from "@assistant-ui/core/react";
 
-export type BranchPickerNextProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type BranchPickerNextProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
 };
 
 export const BranchPickerNext = ({
@@ -17,6 +19,7 @@ export const BranchPickerNext = ({
     <Pressable
       onPress={next}
       disabled={disabledProp ?? disabled}
+      accessibilityRole="button"
       {...pressableProps}
     >
       {children}

package/src/primitives/branchPicker/BranchPickerPrevious.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useBranchPickerPrevious } from "@assistant-ui/core/react";
 
-export type BranchPickerPreviousProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type BranchPickerPreviousProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
 };
 
 export const BranchPickerPrevious = ({
@@ -17,6 +19,7 @@ export const BranchPickerPrevious = ({
     <Pressable
       onPress={previous}
       disabled={disabledProp ?? disabled}
+      accessibilityRole="button"
       {...pressableProps}
     >
       {children}

package/src/primitives/chainOfThought/ChainOfThoughtAccordionTrigger.tsx

@@ -1,12 +1,12 @@
-import { useCallback, type ReactNode } from "react";
+import { useCallback } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useAuiState, useAui } from "@assistant-ui/store";
 
 export type ChainOfThoughtAccordionTriggerProps = Omit<
   PressableProps,
-  "onPress"
+  "onPress" | "children"
 > & {
-  children: ReactNode;
+  children: PressableProps["children"];
 };
 
 export const ChainOfThoughtAccordionTrigger = ({
@@ -21,7 +21,7 @@ export const ChainOfThoughtAccordionTrigger = ({
   }, [aui, collapsed]);
 
   return (
-    <Pressable onPress={onPress} {...pressableProps}>
+    <Pressable onPress={onPress} accessibilityRole="button" {...pressableProps}>
       {children}
     </Pressable>
   );

package/src/primitives/composer/ComposerAddAttachment.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useComposerAddAttachment } from "@assistant-ui/core/react";
 
-export type ComposerAddAttachmentProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type ComposerAddAttachmentProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
 };
 
 /**
@@ -21,7 +23,11 @@ export const ComposerAddAttachment = ({
   const { disabled } = useComposerAddAttachment();
 
   return (
-    <Pressable disabled={disabledProp ?? disabled} {...pressableProps}>
+    <Pressable
+      disabled={disabledProp ?? disabled}
+      accessibilityRole="button"
+      {...pressableProps}
+    >
       {children}
     </Pressable>
   );

package/src/primitives/composer/ComposerCancel.tsx

@@ -1,9 +1,11 @@
-import type { ReactNode } from "react";
 import { Pressable, type PressableProps } from "react-native";
 import { useComposerCancel } from "@assistant-ui/core/react";
 
-export type ComposerCancelProps = Omit<PressableProps, "onPress"> & {
-  children: ReactNode;
+export type ComposerCancelProps = Omit<
+  PressableProps,
+  "onPress" | "children"
+> & {
+  children: PressableProps["children"];
 };
 
 export const ComposerCancel = ({
@@ -17,6 +19,7 @@ export const ComposerCancel = ({
     <Pressable
       onPress={cancel}
       disabled={disabled ?? hookDisabled}
+      accessibilityRole="button"
       {...pressableProps}
     >
       {children}

package/src/primitives/composer/ComposerQueue.test.tsx

@@ -0,0 +1,9 @@
+import { describe, expect, it } from "vitest";
+import { ComposerPrimitiveQueue } from "@assistant-ui/core/react";
+import { ComposerQueue } from "./ComposerQueue";
+
+describe("ComposerPrimitive.Queue", () => {
+  it("re-exports the shared core queue primitive", () => {
+    expect(ComposerQueue).toBe(ComposerPrimitiveQueue);
+  });
+});

package/src/primitives/composer/ComposerQueue.tsx

@@ -0,0 +1 @@
+export { ComposerPrimitiveQueue as ComposerQueue } from "@assistant-ui/core/react";