ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

studio/frontend: expose full thread title via tooltip on truncated sidebar items

Browse source 
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
"<truncated text>...", 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.
This commit is contained in:
danielhanchen 2026-05-19 14:17:28 +00:00
commit a4801a785d
1 changed files with 5 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

5
studio/frontend/src/components/app-sidebar.tsx
View file

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