[Bug] Find Widget Tooltip Issues

Start with the Find widget and tooltip behavior using the supplied Monaco Editor Playground reproduction, including the minimap-disabled and padded-container cases. Trace the editor container anchoring, widget right offset, tooltip wrapping, and the reported aria-hidden warning. Done means the tooltips remain correctly anchored and usable across these layouts without the focus warning.

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.55.1#XQAAAAJ8AQAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscwzixTe_1uhs0-3YGTBOsVJ4S4FwfCDQb5-2uUHXTVAefbVSd9IzaZ_vv9VR9KugsKimARHSWlrTPOQHROITHxmAetfeRrm3VHdSe7_Etv6WpgzlH4vE8EOD3EPhJDl6tDpOO8RxKZbUytKns3T0NFFloo9Q21KsEBT298I6cyZc5-Glup9UHU6QTpv2Hjab6pZzB3ZO2RH-WGhzXse2-hNlgz6zCgsG8AjiqGg0ZzWzND7z09NmCQOQd6pfkNvO2zmMzFvHpTY8RFEy1urlQcQNNKKpN5PQ65iNbUdAnTz6rorT86_gM660qXL1HjWSFfX4pJ_-LdDn8

Monaco Editor Playground Code

const value = /* set from `myEditor.getModel()`: */ `function hello() {
	alert('Hello world!');
}`;

// Hover on each property to see its docs!
const myEditor = monaco.editor.create(document.getElementById("container"), {
	value,
	language: "javascript",
	automaticLayout: true,
	minimap: { enabled: false },
});

Reproduction Steps

There are a few closely related issues involved. You have to manipulate the playground editor's iframe content a bit to match the type of layout where this issue occurs. There's nothing special about the referenced playground other than disabling the minimap.

1. The minimap needs to be disabled, as done in the provided example.
2. Open the Find widget (Ctrl+F) and hover over the options to see the tooltips. They display below the widget, because there isn't room for them to display above the widget (within the iframe). No issue so far, and even without the minimap, the tooltips all have space to display on one line (except not actually - you can see that the two for the options on the far right aren't centered and have to be moved left to fit on one line).
3. However, the editor can't always be expected to extend to the edges of its page. So, simulate an editor that doesn't extend to the edges by using the browser dev tools to inspect the iframe's body tag and give it a style of padding: 50px;. For good measure, give the editor container element (the div with id="container") a border by adding the style border: 1px solid gray;. Now hover over the Find widget options to view the tooltips again.
4. Problem 1: The tooltips no longer show below the widget, because the top padding gives them enough space to display above it. However, they are anchored to the top edge of the page rather than to the editor, because they are absolutely positioned and the editor container does not have position: relative applied.
5. Problem 1 Workaround: Manually apply a style of position: relative to the editor container element. This can be done with the browser dev tools for testing purposes, but developers would need to manually style their containers this way when implementing the editor. So, the editor probably ought to be updated to automatically apply this style to its container element.
6. Now observe the tooltips. They display above the editor with proper anchoring. That's great. But remember those offset tooltips for the options on the right end of the Find widget?
7. Problem 2: When not up against the page edge, tooltips wrap instead of get offset. This isn't too bad when displayed below, but when tooltips are displayed above the widget, that becomes an issue, because their position assumes a single line, and the wrapped line results in the tooltip overlapping the option itself, causing the tooltip to endlessly blink in and out while also blocking attempts to actually click the option.
8. Problem 2 Workaround: Manually apply a style to the Find widget to move it further away from the right edge of the editor. An offset of 33px in total (with no minimap) seems to be the magic number for the playground in my browser, but this is highly dependent on factors like the tooltip font, and I can't guarantee that it would always suffice. The editor really ought to handle the widget's positioning robustly all on its own, perhaps by using getBoundingClientRect() to account for rendered sizes, and tooltip positioning above an anchor would ideally account for if it's wrapped to multiple lines. Also, having tooltips get offset rather than wrap even when not up against the page edge might be a good idea.
9. Note that the editor's vertical scrollbar width can also be configured with the scrollbar: verticalScrollbarSize property. It seems to default to 14 (pixels), and the Find widget's right style value seems to always be set to double the scrollbar size (28px by default) plus the minimap width if enabled (90px, totaling to 118px by default). I don't know what the reasoning may have been for it to be double the scrollbar size, but the Find widget's right offset probably ought to be one times the verticalScrollbarSize, not two, plus some constant offset, with the minimap size added (90px or 0), and should enforce a minimum offset that always ensures enough room for the tooltips to display.

Actual (Problematic) Behavior

With no minimap, notice that tooltips for the rightmost Find widget options are offset to the left, as the widget isn't far enough from the right edge of the editor container to allow them to be both single-line and centered:

Tooltips are anchored to the page's top edge rather than the editor because the editor container doesn't have position: relative:

With the option tooltip anchored above the widget, if it wraps to a second line, it blocks the option itself, and often blinks in and out repeatedly:

A verticalScrollbarSize of 1 causes the Find widget to be only 2px from the container's edge (when minimap is disabled):

A verticalScrollbarSize of 50 causes the Find widget to (unnecessarily) be 100px from the container's edge (when minimap is disabled):

Expected Behavior

The editor container has position: relative applied, and the Find widget has a sufficient right offset applied for the tooltips to display:

Additional Context

See https://github.com/microsoft/monaco-editor/issues/5137 for an initial report of some of these issues. Hopefully enough detail is provided now to be able to implement the necessary fixes.

By the way, every time the Find widget is opened, it produces this console warning about focus being inside an element with aria-hidden. It would be great if that could be resolved as well.

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden. Element with focus: <textarea.input empty> Ancestor with aria-hidden: <div.editor-widget find-widget>