search

iTwin / iTwinUI

A design system for building beautiful and well-working web interfaces.
https://itwin.github.io/iTwinUI/
MIT License
107 stars 38 forks source link

Tooltip appear on its own after closing a Modal. #916

Closed mathieu-fournier closed 7 months ago

mathieu-fournier commented 2 years ago

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: image

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 commented 2 years ago

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 commented 2 years ago

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): 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 commented 2 years ago

"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 commented 2 years ago

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 commented 2 years ago

Awesome. It looks like the button still gets focus back, so the a11y pattern is not broken.

mayank99 commented 1 year ago

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 commented 7 months ago

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 https://github.com/iTwin/iTwinUI/assets/45748283/5e37c6c4-2b66-4cae-b3bb-6918fee728e2

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

Screen-recording https://github.com/iTwin/iTwinUI/assets/45748283/8fddc238-bbb6-488e-9124-5d989044ed66

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 https://github.com/iTwin/iTwinUI/assets/45748283/da5d1a19-1fc2-4e4d-a366-e1de6c09af02

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.