react-focus-lock

react-focus-lock copied to clipboard

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