React focus lock breaks when using web components in a react wrapper

[daBack]

Hello!

In our projects, we have a component library, which is written in web components. That is later wrapped with a react wrapper, in order to support React applications.

When our react applications use the react focus lock in combination with our components, this is what happens:

Mockup code imagining this is a modal

<FocusLock>
  <button>Go back</button>
    <div>
      <WebCReactComponentCard/>
      <WebCReactComponentCard/>
      <WebCReactComponentCard/>
      <WebCReactComponentCard/>
      <WebCReactComponentCard/>
      <WebCReactComponentCard/>
    </div>
</FocusLock

Expected behaviour:

Focused element when tabbing through the cards:

1. Go back
2. WebCReactComponentCard.
3. Internal focusable elements in the WebCReactComponentCard.
4. Next WebCReactComponentCard.

Focused element when shift-tab through the cards:

1. E.g WebCReactComponentCard number 4
2. Internal focusable elements in the WebCReactComponentCard.
3. WebCReactComponentCard number 3.

Actual behaviour: Focused element when tabbing through the cards:

1. Go back
2. WebCReactComponentCard.
3. Skipping some of the internal focusable elements in the WebCReactComponentCard showing the WebCReactComponentCard focus twice instead of internal focusable elements.
4. Next WebCReactComponentCard.

Focused element when shift-tab through the cards:

1. E.g WebCReactComponentCard number 4
2. Go back

Issue: It skips the "previous" component, and goes straight to the Go back button.

Theory I believe that since the React components contains a web component with a shadowroot, the react-focus-lock believes it leaves the focus lock, and therefor goes back to the first element in the locked region. I suppose the issue when tabbing is related to why it is buggy when doing shift-tab as well.

Question: Is this supported, supposed to be working today? Or a feature request?

Regards, Daback (:

[stale[bot]]

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.

[daBack]

Re-igniting!!

[cscheffauer]

I do see the same as @daBack mentioned, can someone please have a look? this is a blocker @theKashey

[theKashey]

Is this supported, supposed to be working today?

Yes, it is supported and expected to work today. More importantly focus-lock will not do anything while focus is seen "within" a top level component.

The check is performed by https://github.com/theKashey/focus-lock/blob/ab0a54559ab3db3ce53fbe82fe73abe3475027d1/src/focusInside.ts#L17 which supports both iframes and ShadowDom.

If something need to be correct - that is focusInside function.

---

Please provide a reproducible example by creating a failing test at https://github.com/theKashey/focus-lock/blob/master/tests/shadow-dom.spec.ts

[stale[bot]]

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.