Open Palkess opened 1 month ago
@Palkess is attempting to deploy a commit to the Themesberg Team on Vercel.
A member of the Team first needs to authorize it.
The update enhances the focusTrap
function to support components within shadow roots by improving how the active element is determined. This change ensures better compatibility and functionality in complex DOM structures.
File Path | Change Summary |
---|---|
src/lib/utils/focusTrap.js |
Updated logic to handle shadow roots in active element check |
focusTrap.js
similarly enhances shadow root compatibility, suggesting a shared concern that could benefit from this PR's approach.π°β¨
Oh hooray for the code that now sees,
Through the shadows of DOM trees!
With a hop and a skip in its stride,
Now our elements no longer hide.
Cheers to roots, both deep and wide!
π³ππ»
The latest updates on your projects. Learn more about Vercel for Git βοΈ
Name | Status | Preview | Comments | Updated (UTC) |
---|---|---|---|---|
flowbite-svelte | β Ready (Inspect) | Visit Preview | π¬ Add feedback | May 2, 2024 9:08am |
Any ETA on when someone can check this PR out? Would be swell to have a solution for our web components without having to do some weird workaround :D
Closes #
π Description
When using Svelte-components as custom elements/web components, they're encapsulated with a shadow-root. When using a focus trapped component, like a Modal,
document.activeElement
incorrectly returns the custom element as the active element instead of the actual element inside the component. This causes the focus trap to never change focus whilst tabbing.The solution I'm suggesting checks if
document.activeElement
has a shadow root and uses the correctdocument.activeElement.shadowRoot.activeElement
to get the actual active element inside the component.Status
β Checks
βΉ Additional Information
Summary by CodeRabbit