From e8752acb95220ef06eec20d299b18f5d147e372a Mon Sep 17 00:00:00 2001
From: Simon Farshid <simon.farshid@outlook.com>
Date: Sun, 24 Nov 2024 16:31:08 -0800
Subject: [PATCH] fix: ThreadList a11y improvements (#1221)

---
 .changeset/green-actors-warn.md               |  5 ++
 .../primitives/threadList/ThreadListNew.tsx   |  2 +-
 .../threadListItem/ThreadListItemRoot.tsx     |  2 +-
 .../react/src/styles/tailwindcss/thread.css   |  2 +-
 packages/react/src/ui/index.ts                | 12 ++--
 packages/react/src/ui/thread-config.tsx       |  2 +-
 packages/react/src/ui/thread-list-item.tsx    | 56 ++++++++-----------
 packages/react/src/ui/thread-list.tsx         | 20 ++++---
 8 files changed, 52 insertions(+), 49 deletions(-)
 create mode 100644 .changeset/green-actors-warn.md

diff --git a/.changeset/green-actors-warn.md b/.changeset/green-actors-warn.md
new file mode 100644
index 000000000..8c0b7c546
--- /dev/null
+++ b/.changeset/green-actors-warn.md
@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+fix: ThreadList a11y improvements
diff --git a/packages/react/src/primitives/threadList/ThreadListNew.tsx b/packages/react/src/primitives/threadList/ThreadListNew.tsx
index 8d49ca350..2f01f6735 100644
--- a/packages/react/src/primitives/threadList/ThreadListNew.tsx
+++ b/packages/react/src/primitives/threadList/ThreadListNew.tsx
@@ -31,7 +31,7 @@ export const ThreadListPrimitiveNew = forwardRef<
   return (
     <Primitive.button
       type="button"
-      {...(isMain ? { "data-active": "true" } : null)}
+      {...(isMain ? { "data-active": "true", "aria-current": "true" } : null)}
       {...props}
       ref={forwardedRef}
       disabled={disabled || !callback}
diff --git a/packages/react/src/primitives/threadListItem/ThreadListItemRoot.tsx b/packages/react/src/primitives/threadListItem/ThreadListItemRoot.tsx
index a6fc5753a..2b26eb8e6 100644
--- a/packages/react/src/primitives/threadListItem/ThreadListItemRoot.tsx
+++ b/packages/react/src/primitives/threadListItem/ThreadListItemRoot.tsx
@@ -19,7 +19,7 @@ export const ThreadListItemPrimitiveRoot = forwardRef<
 
   return (
     <Primitive.div
-      {...(isMain ? { "data-active": "true" } : null)}
+      {...(isMain ? { "data-active": "true", "aria-current": "true" } : null)}
       {...props}
       ref={ref}
     />
diff --git a/packages/react/src/styles/tailwindcss/thread.css b/packages/react/src/styles/tailwindcss/thread.css
index 67d09a61b..c51860556 100644
--- a/packages/react/src/styles/tailwindcss/thread.css
+++ b/packages/react/src/styles/tailwindcss/thread.css
@@ -227,7 +227,7 @@
 }
 
 .aui-thread-list-item {
-  @apply data-[active]:bg-aui-muted hover:bg-aui-muted flex items-center gap-2 rounded-lg transition-all;
+  @apply data-[active]:bg-aui-muted hover:bg-aui-muted focus-visible:bg-aui-muted focus-visible:ring-aui-ring flex items-center gap-2 rounded-lg transition-all focus-visible:outline-none focus-visible:ring-2;
 }
 
 .aui-thread-list-new {
diff --git a/packages/react/src/ui/index.ts b/packages/react/src/ui/index.ts
index 2345dfd84..583fb2cb9 100644
--- a/packages/react/src/ui/index.ts
+++ b/packages/react/src/ui/index.ts
@@ -20,6 +20,8 @@ export { default as BranchPicker } from "./branch-picker";
 
 export { default as Composer } from "./composer";
 
+export { default as ContentPart } from "./content-part";
+
 export {
   default as AttachmentUI, // TODO name collision with Attachment
 } from "./attachment-ui";
@@ -28,14 +30,12 @@ export { default as EditComposer } from "./edit-composer";
 
 export { default as Thread } from "./thread";
 
-export { default as UserMessage } from "./user-message";
+export { default as ThreadList } from "./thread-list";
 
-export { default as UserActionBar } from "./user-action-bar";
+export { default as ThreadListItem } from "./thread-list-item";
 
 export { default as ThreadWelcome } from "./thread-welcome";
 
-export { default as ContentPart } from "./content-part";
-
-export { default as ThreadList } from "./thread-list";
+export { default as UserMessage } from "./user-message";
 
-export { default as ThreadListItem } from "./thread-list-item";
+export { default as UserActionBar } from "./user-action-bar";
diff --git a/packages/react/src/ui/thread-config.tsx b/packages/react/src/ui/thread-config.tsx
index 8efcfc57c..d05ad2359 100644
--- a/packages/react/src/ui/thread-config.tsx
+++ b/packages/react/src/ui/thread-config.tsx
@@ -74,7 +74,7 @@ export type StringsConfig = {
         fallback?: string | undefined;
       };
       archive?: {
-        label?: string | undefined;
+        tooltip?: string | undefined;
       };
     };
   };
diff --git a/packages/react/src/ui/thread-list-item.tsx b/packages/react/src/ui/thread-list-item.tsx
index c7a533b5e..deefeca80 100644
--- a/packages/react/src/ui/thread-list-item.tsx
+++ b/packages/react/src/ui/thread-list-item.tsx
@@ -39,11 +39,9 @@ const ThreadListItemTitle = forwardRef<
   ThreadListItemPrimitiveTitle.Element,
   ThreadListItemPrimitiveTitle.Props
 >(({ className, ...props }, ref) => {
-  const {
-    strings: {
-      threadList: { item: { title: { fallback = "New Chat" } = {} } = {} } = {},
-    } = {},
-  } = useThreadConfig();
+  const config = useThreadConfig();
+  const fallback =
+    config.strings?.threadList?.item?.title?.fallback ?? "New Chat";
 
   return (
     <p
@@ -58,34 +56,28 @@ const ThreadListItemTitle = forwardRef<
 
 ThreadListItemTitle.displayName = "ThreadListItemTitle";
 
-const ThreadListItemArchive = withDefaults(
-  forwardRef<HTMLButtonElement, TooltipIconButton.Props>(
-    ({ className, ...props }, ref) => {
-      const {
-        strings: {
-          threadList: {
-            item: { archive: { label = "Archive thread" } = {} } = {},
-          } = {},
-        } = {},
-      } = useThreadConfig();
+const ThreadListItemArchive = forwardRef<
+  HTMLButtonElement,
+  Partial<TooltipIconButton.Props>
+>(({ className, ...props }, ref) => {
+  const config = useThreadConfig();
+  const tooltip =
+    config.strings?.threadList?.item?.archive?.tooltip ?? "Archive thread";
 
-      return (
-        <ThreadListItemPrimitive.Archive asChild>
-          <TooltipIconButton
-            {...props}
-            ref={ref}
-            className={classNames("aui-thread-list-item-archive", className)}
-            variant="ghost"
-            tooltip={label}
-          >
-            <ArchiveIcon />
-          </TooltipIconButton>
-        </ThreadListItemPrimitive.Archive>
-      );
-    },
-  ),
-  {},
-);
+  return (
+    <ThreadListItemPrimitive.Archive asChild>
+      <TooltipIconButton
+        ref={ref}
+        className={classNames("aui-thread-list-item-archive", className)}
+        variant="ghost"
+        tooltip={tooltip}
+        {...props}
+      >
+        <ArchiveIcon />
+      </TooltipIconButton>
+    </ThreadListItemPrimitive.Archive>
+  );
+});
 
 ThreadListItemArchive.displayName = "ThreadListItemArchive";
 
diff --git a/packages/react/src/ui/thread-list.tsx b/packages/react/src/ui/thread-list.tsx
index 09cf5048f..12153b2cc 100644
--- a/packages/react/src/ui/thread-list.tsx
+++ b/packages/react/src/ui/thread-list.tsx
@@ -27,17 +27,16 @@ const ThreadListNew = forwardRef<
   HTMLButtonElement,
   ThreadListPrimitive.New.Props & ButtonProps
 >((props, ref) => {
-  const {
-    strings: { threadList: { new: { label = "New Thread" } = {} } = {} } = {},
-  } = useThreadConfig();
+  const config = useThreadConfig();
+  const label = config.strings?.threadList?.new?.label ?? "New Thread";
 
   return (
     <ThreadListPrimitive.New asChild>
       <Button
-        {...props}
         ref={ref}
         className="aui-thread-list-new"
         variant="ghost"
+        {...props}
       >
         <PlusIcon />
         {label}
@@ -47,9 +46,16 @@ const ThreadListNew = forwardRef<
 });
 ThreadListNew.displayName = "ThreadListNew";
 
-const ThreadListItems: FC<{
-  components?: Partial<ThreadListPrimitive.Items.Props["components"]>;
-}> = ({ components }) => {
+namespace ThreadListItems {
+  export type Props = {
+    /**
+     * Optional custom components to override default thread list items
+     */
+    components?: Partial<ThreadListPrimitive.Items.Props["components"]>;
+  };
+}
+
+const ThreadListItems: FC<ThreadListItems.Props> = ({ components }) => {
   return (
     <ThreadListPrimitive.Items
       components={{