focus-trap: Web components with ShadowDOM, unable to focus on elements in slot (LightDOM)
I’m using focus-trap in a web components library but I am unable to make the package work with elements within a ShadowDOM slot. Is there a way to have a single focus trap contain elements from both the ShadowDOM and elements passed in via the slot?
Example:
// modal.js
const Modal = (props) => {
const trapFocus = (element) => {
const trap = focusTrap.createFocusTrap(element)
trap.activate()
}
return (
<div ref={trapFocus}>
<a href="#">These items</a>
<a href="#">get trapped</a>
<slot /> // Elements in slot don't get trapped
</div>
);
}
// index.html
<custom-modal>
<button>This goes in the slot and isn't included in the focus trap</button>
</custom-modal>
Thank you!
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 18 (9 by maintainers)
Commits related to this issue
- Add support for closed shadow DOMs Fixed #601 (I hope) This change exposes Tabbable's new `getShadowRoot()` configuration option, which makes it possible for Tabbable to walk even closed shadows by ... — committed to focus-trap/focus-trap by stefcameron 2 years ago
- Add support for closed shadow DOMs Fixed #601 (I hope) This change exposes Tabbable's new `getShadowRoot()` configuration option, which makes it possible for Tabbable to walk even closed shadows by ... — committed to focus-trap/focus-trap by stefcameron 2 years ago
- Add support for closed shadow DOMs Fixed #601 (I hope) This change exposes Tabbable's new `getShadowRoot()` configuration option, which makes it possible for Tabbable to walk even closed shadows by ... — committed to focus-trap/focus-trap by stefcameron 2 years ago
- Add support for closed shadow DOMs Fixes #601 (I hope) This change exposes Tabbable's new `getShadowRoot()` configuration option, which makes it possible for Tabbable to walk even closed shadows by ... — committed to focus-trap/focus-trap by stefcameron 2 years ago
- Add support for closed shadow DOMs Fixes #601 (I hope) This change exposes Tabbable's new `getShadowRoot()` configuration option, which makes it possible for Tabbable to walk even closed shadows by ... — committed to focus-trap/focus-trap by stefcameron 2 years ago
- Add support for closed shadow DOMs Fixes #601 (I hope) This change exposes Tabbable's new `getShadowRoot()` configuration option, which makes it possible for Tabbable to walk even closed shadows by ... — committed to focus-trap/focus-trap by stefcameron 2 years ago
- Add support for closed shadow DOMs (#610) * Add support for closed shadow DOMs Fixes #601 (I hope) This change exposes Tabbable's new `getShadowRoot()` configuration option, which makes it pos... — committed to focus-trap/focus-trap by stefcameron 2 years ago
Thanks for the recording. I’m wondering if this is somehow related to #643
Also, at minimum with the new tabbable beta, you should have
That will activate tabbable’s shadow DOM support and will find everything in open shadows.
@stefcameron Thanks for much for the work on this! I’ll give this a try shortly 👍
@andresriveratoro Nice, glad to hear you were successful with it!
@stefcameron Thanks so much! 🎉
@stefcameron And just to point out, this library does work in the situation I need. It’s just not really maintained and I’d like to switch my projects to use your package since it is clearly maintained and has a larger community:
https://www.npmjs.com/package/@a11y/focus-trap
Thanks!