[Dialog] and "portalled" content

[TrevorRice]

Hi all!

Was curious to get your thoughts on components passed to Dialog that leverage portals.

Here's an example (albeit a bit contrived) that places Reach UI's Listbox inside of Dialog. While very specific, I would imagine the below could be seen in other similar portal usage.

I'm noticing two things:

1. The listbox is closed immediately after opening. I'm guessing this may have to do with the Dialog's trapping logic?
2. Assuming the above could be resolved, the content placed in the portal (in this case the listbox options) would be hidden from assistive technologies since the portal container has aria-hidden="true" applied to it. Is there a way to exclude elements outside of the Dialog's DOM tree from the "hidden" logic? FWIW, Reach's own Dialog has the same issue.
   

Wasn't sure if this is an expected/supported use-case, but I thought I'd bring it up to get your thoughts.

Amazing work on Radix by the way!

[jjenzz]

Hi @TrevorRice 👋

We have a semi related issue on this. We've discussed updating our focus scope logic to consider the React tree instead and I'm keen to give it a go, it's just finding the time at the moment.

In the meantime, you can try any of these workarounds #922 (comment)

Amazing work on Radix by the way!

Thank you 💛

[TrevorRice]

Appreciate the response @jjenzz!

We've discussed updating our focus scope logic to consider the React tree instead

That's awesome! Would this account for the aria-hidden logic as well? From what I've been able to gather, this lives outside of and is decoupled from the focus scope.

... I'm keen to give it a go, it's just finding the time at the moment.

I hear that 🙂

In the meantime, you can try any of these workarounds #922 (comment)

Thank you!

[jjenzz]

That's awesome! Would this account for the aria-hidden logic as well?

Ah yes, any solution would need to solve that too 👍