-
Notifications
You must be signed in to change notification settings - Fork 49.6k
[DevTools] Stop using native title for buttons/icons
#34379
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DevTools] Stop using native title for buttons/icons
#34379
Conversation
| href={bugURL} | ||
| rel="noopener noreferrer" | ||
| target="_blank" | ||
| title="Report bug"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Redundant title. You already have text telling you what this link is doing.
| href={REACT_DEVTOOLS_WORKPLACE_URL} | ||
| rel="noopener noreferrer" | ||
| target="_blank" | ||
| title="Report bug"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Redundant title. You already have text telling you what this link is doing.
|
Tbh, I ended up intentionally using the native title in a bunch of cases because I didn't like the way the reach one looked or where it was placed. For example the long titles for stack traces intentionally doesn't use the reach title. It's too dark and too large. I was considering it for hovering the "Suspended by" row too since the reach tooltip placement is unfortunate for that case. It's especially jarring since it looks very different from other tooltips in the rest of Chrome DevTools. Why do we need the reach one? Shouldn't we only use native? If not, then we should probably both work on better options for placement and making the styling less strong/work better for large lines. |
|
There are a few examples that don't use the Button nor links and therefore aren't properly accessible. |
It enters this mode where tooltips show instantly when you just hovered a TT. There's a smarter name for that behavior. native tooltips don't have that. That's especially useful if you have a items in a collection that all have titles. Native titles also super tiny and can't be styled. The ones with stacktraces should probably use something else. Maybe even a version where you can hover over the tooltip and select content. The one in StacktraceView I just missed. If you're ok with this change, I'll go ahead and convert it as well. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't have a strong opinion on this, seems like having native title still makes sense for generic items like Icons.
Can it be the default, but also allow using custom tooltips in rare cases, when we need the tooltip to be styled or have a custom logic for appearance?
|
We agreed that having the Reach one is better for buttons since Reach tooltips activates on keyboard focus whereas native For larger areas (e.g. Suspense rects), we'll use native titles since the Reach one uses the bounding box which can be out-of-bounds. Switching between Reach and |
titletitle for buttons
title for buttonstitle for buttons/icons
We use Reach UI tooltips for all the buttons already.
Now we use their tooltip implementation for things that aren't (supposed to be) buttons and links. Mostly motivated by the StrictMode badge that used to use native
title.Some badges were seemingly hacking proper tooltips by using
Togglewithout a change handler. Probably just so that Reach's<Tooltip>was wrapped around a Component that forwarded the props Reach UI injects viacloneElement. The trick is to make the ComponentTooltipis wrapping also forward rest props.CleanShot.2025-09-04.at.13.30.07.mp4