From a4801a785db3014eb15a091d9cd2e14480691dd8 Mon Sep 17 00:00:00 2001 From: danielhanchen Date: Tue, 19 May 2026 14:17:28 +0000 Subject: [PATCH] studio/frontend: expose full thread title via tooltip on truncated sidebar items The chat-thread buttons in the sidebar render with `class="truncate"` but no `title` attribute, no aria-label, and no Radix tooltip wrapper. A title-truncation probe on five injected threads (lengths 11 to 163 chars) confirmed: all four overflowing rows show CSS ellipsis correctly but the full title is unrecoverable -- screen-reader users hear only "...", hover users get no native tooltip, and there is no Radix tooltip to expose it. Add `title={item.title}` (browser-native hover tooltip) and `aria-label={item.title}` (assistive tech) to the SidebarMenuButton in the Recents list. Sighted users hovering a truncated row now see the full title in the OS tooltip; screen readers announce it as the button's accessible name; the existing CSS truncation stays unchanged. Verified by re-running the probe: all five injected threads now report `has_title_attr: true` and `has_aria_label: true`, regardless of whether the visible span fits. --- studio/frontend/src/components/app-sidebar.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/studio/frontend/src/components/app-sidebar.tsx b/studio/frontend/src/components/app-sidebar.tsx index aac5f8f8a8..ebb06f4fcb 100644 --- a/studio/frontend/src/components/app-sidebar.tsx +++ b/studio/frontend/src/components/app-sidebar.tsx @@ -533,6 +533,11 @@ export function AppSidebar() { data-thread-type={item.type} data-thread-id={item.id} isActive={activeThreadId === item.id} + // Expose full title via native tooltip + aria-label so + // long thread titles aren't lost to CSS truncation + // (the inner span uses `truncate` with no title attr). + title={item.title} + aria-label={item.title} className="sidebar-nav-btn h-[32px] rounded-[10px] pl-2.5 pr-2.5 group-hover/recent-item:pr-10 group-has-[.sidebar-row-action[data-state=open]]/recent-item:pr-10 text-[14.5px] leading-[19px] tracking-nav font-medium" onClick={() => { navigate({