[react-aria] FocusScope with contain doesn't show focus ring on nested focusable elements

[noahbald]

Provide a general summary of the issue here

I've run into this issue (which may be similar to #4288) wherein the focus ring does not show for elements nested within a tabindex="0" Works fine within Firefox.

🤔 Expected Behavior?

Both the elements with tabindex="0" and nested elements which are keyboard-focusable should have a visible difference when focused via keyboard

😯 Current Behavior

Only the element with tabindex="0" is visible focused

💁 Possible Solution

No response

🔦 Context

I'm making an error summary within a modal, because of this issue it's failing accessibility tests, as there is no visible focus state.

🖥️ Steps to Reproduce

I have a minimal reproduction here

import { FocusScope } from 'react-aria'

export default () => (
  <FocusScope contain>
    <div tabIndex={0}>
      <p>Try clicking on me, then pressing tab</p>
      <a href="#">I'm focusable, but I won't have a focus ring</a>
    </div>
  </FocusScope>
)

Version

3.33.1

What browsers are you seeing the problem on?

Chrome, Safari

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[noahbald]

Adding tabindex="0" in the link in my example seems to fix the issue for me