fix: ThreadList a11y improvements (#1221)

.changeset/green-actors-warn.md

@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react": patch
+---
+
+fix: ThreadList a11y improvements

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}

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}
     />

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 {

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";

packages/react/src/ui/thread-config.tsx

@@ -74,7 +74,7 @@ export type StringsConfig = {
         fallback?: string | undefined;
       };
       archive?: {
-        label?: string | undefined;
+        tooltip?: string | undefined;
       };
     };
   };

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";
 

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={{