Focus not moving when switching to a different widget

[mayank99]

Describe the bug

Today we had someone report an interesting issue in iTwinUI: iTwin/iTwinUI#1122

We offered them a workaround but the root cause of this is that focus stays inside the old widget even after clicking on the new widget.

This can be confirmed by creating a watch expression for document.activeElement in chrome devtools.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://www.itwinjs.org/sandbox/MuthuKalamani/ElevationChange
2. Create a watch expression for document.activeElement
3. Click on the "Elevation" slider to see tooltip. Focus is on slider thumb.
4. Click on "EmptyWidgetProvider".
5. See tooltip still visible. Focus is still on slider thumb.

Expected behavior

Focus should move to the new tab.

Screenshots

N/A

Desktop (please complete the applicable information):

• OS: macOS
• Browser: Chrome
• Version: ?
• iTwin.js Version: 3.5.5

Additional context

This is likely because the tabs are made up of divs rather than buttons.

iTwinUI Tabs can handle all this for you and more (like keyboard navigation). https://itwin.github.io/iTwinUI/react/?path=/story/core-tabs--default-tabs

I'm also not sure if this issue should be opened in appui or in viewer. Let me know if this isn't the right place and I can move it.

[muthubentley]

Partner who reported this bug would like to have this fixed by end of March or early April. Requesting to prioritize.

[raplemie]

Change in behavior have been released in 4.0.0