From a4801a785db3014eb15a091d9cd2e14480691dd8 Mon Sep 17 00:00:00 2001 From: danielhanchen Date: Tue, 19 May 2026 14:17:28 +0000 Subject: [PATCH 1/3] 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({ From bef097a70ed658813ca2b6dd3a1f95b7b4e94dc2 Mon Sep 17 00:00:00 2001 From: danielhanchen Date: Tue, 19 May 2026 14:36:22 +0000 Subject: [PATCH 2/3] studio/frontend: drop redundant aria-label on sidebar thread button Gemini review on #5618 noted that the inner span uses CSS truncate (overflow-hidden + text-overflow:ellipsis), which clips the text visually but keeps the full content in the DOM and the accessibility tree. The full title is already the button's accessible name via that span's text content; the explicit aria-label is redundant. Keep the title attribute -- it's still the only way sighted hover users see the full title past the visual clip. --- studio/frontend/src/components/app-sidebar.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/studio/frontend/src/components/app-sidebar.tsx b/studio/frontend/src/components/app-sidebar.tsx index ebb06f4fcb..93c5ea8eb0 100644 --- a/studio/frontend/src/components/app-sidebar.tsx +++ b/studio/frontend/src/components/app-sidebar.tsx @@ -533,11 +533,12 @@ 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). + // Expose full title via the native browser tooltip so + // sighted users can read titles that the inner span's + // `truncate` clips. The truncated span still carries + // the full text content, so screen readers already + // announce the full title without an explicit aria-label. 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({ From 608a9931ab02e8289a791c1f0d504816575edf8c Mon Sep 17 00:00:00 2001 From: danielhanchen Date: Tue, 19 May 2026 14:51:31 +0000 Subject: [PATCH 3/3] studio/frontend: add native tooltip on Recent Runs entries Gemini review on #5618 suggested applying the same truncation-tooltip fix to the Recent Runs section, since long run names and dataset names are also subject to CSS truncation. Use the same `title` attribute approach as the Recent Chats entries; combine display_name and dataset_name in the tooltip so both lines are surfaced on hover. --- studio/frontend/src/components/app-sidebar.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/studio/frontend/src/components/app-sidebar.tsx b/studio/frontend/src/components/app-sidebar.tsx index 93c5ea8eb0..dec31f005e 100644 --- a/studio/frontend/src/components/app-sidebar.tsx +++ b/studio/frontend/src/components/app-sidebar.tsx @@ -618,6 +618,13 @@ export function AppSidebar() { { setSelectedHistoryRunId(run.id); closeMobileIfOpen();