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 ( 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 (

( - ({ className, ...props }, ref) => { - const { - strings: { - threadList: { - item: { archive: { label = "Archive thread" } = {} } = {}, - } = {}, - } = {}, - } = useThreadConfig(); +const ThreadListItemArchive = forwardRef< + HTMLButtonElement, + Partial +>(({ className, ...props }, ref) => { + const config = useThreadConfig(); + const tooltip = + config.strings?.threadList?.item?.archive?.tooltip ?? "Archive thread"; - return ( - - - - - - ); - }, - ), - {}, -); + return ( + + + + + + ); +}); 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 (