Compare commits

...
Sign in to create a new pull request.

3 commits

Author SHA1 Message Date
danielhanchen
608a9931ab 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.
2026-05-19 14:51:31 +00:00
danielhanchen
bef097a70e 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.
2026-05-19 14:36:22 +00:00
danielhanchen
a4801a785d 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
"<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.
2026-05-19 14:17:28 +00:00

View file

@ -533,6 +533,12 @@ export function AppSidebar() {
data-thread-type={item.type}
data-thread-id={item.id}
isActive={activeThreadId === item.id}
// 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}
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({
@ -612,6 +618,13 @@ export function AppSidebar() {
<SidebarMenuButton
isActive={isActiveRun}
className="sidebar-nav-btn h-auto flex-col items-start gap-0.5 py-[5px] rounded-[10px] pl-2.5 pr-7 text-[14.5px] tracking-nav font-medium"
// Expose full run/dataset name via native tooltip
// so long titles aren't lost to CSS truncation.
title={
run.dataset_name
? `${run.display_name ?? run.model_name}${run.dataset_name}`
: (run.display_name ?? run.model_name)
}
onClick={() => {
setSelectedHistoryRunId(run.id);
closeMobileIfOpen();