I'm currently developing a custom Tooltip/Popover component. The way it works is basically a customized React-Popper wrapping a Trigger element. When the user focuses on the Trigger, the tooltip opens. When they blur, it closes.
The problem is, the tooltip is generated at a top-level in the DOM structure. It is not attached to the Trigger element but instead is created as a div at the root level. This obviously messes up the focus sequence as it puts the tooltip content at the end of the focus queue.
I can control the tooltip content, as I know it will always have the same structure (some action buttons and a Close button). I've managed to force .focus() on the first button whenever the tooltip is visible. This, however, does not solve my problem, because it is in fact skipping over all the other focusable elements on the page (which I have no control over).
What I need is a way to alter the focus order to make the tooltip content be at the same "level" as the Trigger component so they will be focused next to each other, and then resume the sequence with the next elements displayed on the page.
The only thing I've found is this similar question with absolutely zero answers.
I missed the simplest solution. The Popper library includes the usePortal prop. Setting it to false keeps the DOM structure unaltered, thus fixing my focus navigation problem.