Tooltip appear on its own after closing a Modal.

[mathieu-fournier]

Describe the bug (actual behavior)

A tooltip wrapping a Button that opens a Modal will re-appear when closing the modal.

Image taken after the modal is closed:

Expected behavior

The tooltip should not re-appear since the cursor is no longer on the button.

Reproduction

Link to a minimal repro:
https://codesandbox.io/s/itwinui-react-modal-tooltip-demo-l88z9

Steps to reproduce

1. Open the Modal
2. Close the Modal

[veekeys]

Hello @mathieu-fournier,

This is expected behavior, because after modal is closed, focus is returned to the previously focused element. And of course, as a result, tooltip appears.
Could you describe your use case? Why would you need to show a tooltip over button, which is an action to open up modal? Maybe having a descriptive label on the button would be enough.
Could we firstly review the case and have some better UX suggestions, because it is not that we are going to disable the "focus-back" functionality and instead would need to look for some not nice workarounds..

[mathieu-fournier]

Hi @veekeys o/,

I am displaying a button bar on the top of the page.
Since the button displays only an icon, I am showing a tooltip to clarify what the button does and avoid any confusion.
For example, Youtube has the same functionnaly (image):

Adding a label instead of a tooltip on each button would take too much horizontal space.

I inspected the button and no focus event is triggered on it when closing the button.
What is the use case for needing a "focus-back" functionality ?

Thanks (:

[mayank99]

"focus-back" is a common accessibility pattern for keyboard users, to preserve their position in the tab order. This is the expected flow:

1. Tab to the modal trigger button, press Enter.
2. Focus is trapped in the modal. Perform some action in the modal, which ultimately closes the modal.
3. Focus is set on the trigger again, continue using the app as normal without having to start over.

It is not enough to look to popular sites as examples, because a lot of them are inaccessible.

Ideally, the fix here would be to only show tooltip on focus for keyboard users, so that mouse users are unaffected. But that might not be achievable, which is why we asked for more details on your use case to see if it was valid. But your use case seems valid, so we would need to research this a bit more to find a better fix.

[mathieu-fournier]

Hey @mayank99 o/,

I just found a workaround.
Wrapping the button in a span prevents the tootlip from re-opening.

I think it might break the accessibility pattern tho.
Wrapping the button in a span is an "official" workaround mentionned for this other bug.

[mayank99]

update: this is still not fixed in v3 (after #1231 and #1311).

one difference i noticed is the tooltip doesn't show up when pressing esc to close the modal. https://codesandbox.io/s/itwinui-react-modal-tooltip-demo-forked-rvl7rl?file=/src/AModalBtn.tsx

also the workaround discussed above is not screenreader-friendly. a generic wrapper <div> is the wrong place to add the aria-describedby attribute. we will need to look into this issue more deeply.

[r100-stack]

After confirming in the latest version of v3 (3.8.1) (sandbox), clicking the close button also now no longer re-shows the tooltip.

Screen-recording

Enregistrement.de.l.ecran.2024-04-04.a.3.42.05.PM.mov

And as @mayank99 mentioned, pressing the Esc also does not re-show the tooltip:

Screen-recording

Enregistrement.de.l.ecran.2024-04-04.a.3.46.05.PM.mov

The case where it does not work is when the keyboard focus is on the X button or the "Close" blue button and then pressing Space/Enter:

Screen-recording

Enregistrement.de.l.ecran.2024-04-04.a.3.51.00.PM.mov

In the future, we would likely also try to cover this third case.

But for now, since the main two cases are covered, I believe we can close this issue. Feel free to reopen it if you feel differently.