[Bug]: Focus Indicator missing inside iframe for the first focused item (Probably effects all components)

[nanabear0]

Component

Other...

Package version

9.56.8

React version

18.3.1

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Memory: 31.42 GB / 63.71 GB
  Browsers:
    Edge: Chromium (131.0.2903.99)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @fluentui/react-components: ^9.0.0 => 9.56.8 
    @fluentui/react-icons: latest => 2.0.270 
    @types/react: ^17 => 17.0.83 
    @types/react-dom: ^17 => 17.0.26 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1

Current Behavior

When focus moves to an iframe from outside the focus indicator is not shown for the first element. Second time the focus moves it becomes visible. This effects all iframe's in browsers, and I can see this happening in android webview. I have noticed this happening with buttons but I'm guessing this will effect all components with focus indicators. Confirmed for rating, checkbox and radio.

From a keyboard users perspective it appears as if the focus is skipping the first element in the page. This creates a very confusing experience for users.

Here are some screen recordings:
from stackblitz with iframe
from an android app with webview

From what I can tell this is due to keyborg. I have tried debugging the issue to identify why indicator wasn't showing, from what I can tell it is returning because of this line from the keyborg library. Looks like the relatedTarget is empty when focusing is coming outside the iframe and keyborg doesn't set isNavigatingWithKeyboard to true because of it.

Expected Behavior

Focus indicator should be correctly shown for the first element too.

Reproduction

https://stackblitz.com/edit/xhfkuy6p?file=src%2FApp.tsx,src%2Fexample.tsx

Steps to reproduce

1. Click on the address bar on the right pane in stackblitz
2. Press tab 3 times, the focus should be on Button 1. However the focus indicator is not visible
3. Press tab again, the focus indicator will be on Button 2. This confirms the focus was on button 1 but indicator wasn't visible.
4. Try going back with alt+tab the focus indicators are working just fine. It's only the first time iframe receives focus is the problem.

This can be reproduced with any example from the docs. It isn't specific to this example.

Are you reporting an Accessibility issue?

yes

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.