Managing the Accessibility Tree

[elHornair]

Hey! 👋

I've noticed, that Headless UI components seem to not actively manage the accessibility tree outside of the current component. The result is, that while the focus is properly trapped inside the component, screen readers still can still jump out of the currently active component (tested with VoiceOver on both iOS and OSX).

Ally.js has a good summary on the matter in regard to modals. Their suggested solution is to actively manage the accessibility tree, namely setting aria-hidden="true" on all parental siblings of the component. I've found this to mostly work, although it brings its own set of drawbacks. Before digging further into it, a couple of questions:

1. Are you aware of this problem?
2. If yes: is there a plan to address that in the future? Or was it a conscious decision to leave that out of the scope of Headless UI?
3. If there is a plan: is there anything I can do to help?

Thanks in advance for your thoughts on the matter!