Repository navigation
fix(site/src): make text-only tooltip triggers keyboard focusable - #30403
Conversation
Several tooltips used non-focusable triggers (div, span, bare svg), so keyboard and screen reader users could never open them or hear their content. Render those triggers as native buttons so Radix exposes the tooltip via aria-describedby on focus. Covers the deployment banner stats, notification delivery method icons, and the AI Gateway threads info, session summary info, and token usage badges.
aqandrew
left a comment
There was a problem hiding this comment.
Very nice! Just 2 small non-blocking nits about how classnames are written + a focus ring that looks off
| <button | ||
| type="button" | ||
| aria-label="Deployment status" | ||
| className={`${tooltipTriggerClassName} ml-3 flex items-center justify-center`} |
There was a problem hiding this comment.
nit: Prefer combining classnames with cn instead of interpolating strings. This goes for all 6 usages of tooltipTriggerClassName in this file
There was a problem hiding this comment.
Switched all 6 usages to cn(tooltipTriggerClassName, ...) in 93a27e9.
Generated by Coder Agents.
| <button | ||
| type="button" | ||
| aria-label="About sessions" | ||
| className="m-0 shrink-0 flex items-center border-0 bg-transparent p-0 text-inherit rounded-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-content-link" | ||
| > | ||
| {children} | ||
| </button> |
There was a problem hiding this comment.
nit: IMO the focus ring should not include the margin to the left of the info icon
There was a problem hiding this comment.
Moved the ml-2 from the icon onto the trigger button, so the focus ring now wraps only the icon. Fixed in 93a27e9.
Generated by Coder Agents.
Several tooltips used non-focusable triggers (
div,span, baresvg), so keyboard and screen reader users could never open them or hear their content. Radix only links tooltip content to its trigger viaaria-describedbywhile open, and it opens on hover or focus. These triggers are now native<button type="button">elements with a focus ring, following the existingNetworkCallBadgesand #30342 pattern.Addresses the text-only tooltips from the Deque audit (
custom-tooltiprule, WCAG 4.1.2):DEQ-393 (
+N moreroles) was already fixed by #30342. The tooltips in DEQ-287, DEQ-473 and DEQ-378 that contain links need a popover/toggletip pattern and will follow in a separate PR.Before / after (keyboard Tab)
Implementation notes and verification
aria-label, so its visible counts stay in the accessible name (WCAG 2.5.3 Label in Name). The full breakdown is exposed through the tooltip description.mainexactly. Converted triggers are 16px tall (was 12 to 14px) with the same vertical center, matching the existing Active Connections buttons.aria-describedbyresolves to the tooltip text.DeploymentBannerView.test.tsx. It fails onmainand passes here.