KEMBAR78
[DevTools] Stop using native `title` for buttons/icons by eps1lon · Pull Request #34379 · facebook/react · GitHub
Skip to content

Conversation

@eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented Sep 4, 2025

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 Toggle without a change handler. Probably just so that Reach's <Tooltip> was wrapped around a Component that forwarded the props Reach UI injects via cloneElement. The trick is to make the Component Tooltip is wrapping also forward rest props.

CleanShot.2025-09-04.at.13.30.07.mp4

@meta-cla meta-cla bot added the CLA Signed label Sep 4, 2025
@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Sep 4, 2025
href={bugURL}
rel="noopener noreferrer"
target="_blank"
title="Report bug">
Copy link
Collaborator Author

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">
Copy link
Collaborator Author

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.

@eps1lon eps1lon requested a review from hoxyq September 4, 2025 11:40
@eps1lon eps1lon marked this pull request as ready for review September 4, 2025 11:40
@sebmarkbage
Copy link
Collaborator

sebmarkbage commented Sep 4, 2025

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.

@sebmarkbage
Copy link
Collaborator

There are a few examples that don't use the Button nor links and therefore aren't properly accessible.

https://github.com/facebook/react/blob/main/packages/react-devtools-shared/src/devtools/views/Components/StackTraceView.js#L77-L78

@eps1lon
Copy link
Collaborator Author

eps1lon commented Sep 4, 2025

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.

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.

Copy link
Contributor

@hoxyq hoxyq left a 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?

@eps1lon
Copy link
Collaborator Author

eps1lon commented Sep 11, 2025

We agreed that having the Reach one is better for buttons since Reach tooltips activates on keyboard focus whereas native title doesn't.

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 title within a related group is problematic since both tooltip implementations don't use the same activation timer. So when you switch from an area with a Reach tooltip to one with a native title, you have to wait a bit before you get the next tooltip. What we want though is that tooltips immediately activate if you just had one displayed. That's the case that motivated this change because I was hovering from Forget badge to No-StrictMode badge and didn't get a tooltip immediately

@eps1lon eps1lon changed the title [DevTools] Stop using native title [DevTools] Stop using native title for buttons Sep 11, 2025
@eps1lon eps1lon changed the title [DevTools] Stop using native title for buttons [DevTools] Stop using native title for buttons/icons Sep 11, 2025
@eps1lon eps1lon merged commit 67415c8 into facebook:main Sep 11, 2025
250 checks passed
@eps1lon eps1lon deleted the sebbie/09-04-_devtools_stop_using_native_title_ branch September 11, 2025 16:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants