Hello! Thanks for maintaining this lib :)
Issue
Currently, the toaster container itself does not have a stable identifier (like a dedicated data attribute or id). In general, having a clear and explicit way to identify a root container element is helpful for integrations, testing and "interoperability". It avoids relying on DOM structure or implementation details that could change over time.
Further details
Ariakit applies the inert attribute to all sibling containers when a dialog opens to prevent other elements to be interactive while the dialog is open. To handle certain cases in which one might need to bring other elements in the DOM to be accessible and interactive, they provide a getPersistentElements prop to pass an array of elements that can remain interactive (like Toaster).
The issue is that Sonner only adds identifying attributes to the children inside the toaster container, not to the container itself. Ariakit needs a reference to the container element directly, not its children.
I could grab the container by doing getPersistentElements={() => [document.querySelector('[data-sonner-toaster]').parentElement] but that won't work if no toasts have been triggered by the time the modal opens, since Ariakit expects the element to be in the DOM by the time the dialog opens.
The only possible workaround would be: document.querySelector('[aria-label^="Notifications"]') but this is flaky, let alone that it won't if you're using i18n.
The side effects of not having a proper grip on the container are explained in the PR I created for this: #741
Thanks a lot!
Hello! Thanks for maintaining this lib :)
Issue
Currently, the toaster container itself does not have a stable identifier (like a dedicated data attribute or id). In general, having a clear and explicit way to identify a root container element is helpful for integrations, testing and "interoperability". It avoids relying on DOM structure or implementation details that could change over time.
Further details
Ariakit applies the
inertattribute to all sibling containers when a dialog opens to prevent other elements to be interactive while the dialog is open. To handle certain cases in which one might need to bring other elements in the DOM to be accessible and interactive, they provide a getPersistentElements prop to pass an array of elements that can remain interactive (like Toaster).The issue is that Sonner only adds identifying attributes to the children inside the toaster container, not to the container itself. Ariakit needs a reference to the container element directly, not its children.
I could grab the container by doing
getPersistentElements={() => [document.querySelector('[data-sonner-toaster]').parentElement]but that won't work if no toasts have been triggered by the time the modal opens, since Ariakit expects the element to be in the DOM by the time the dialog opens.The only possible workaround would be:
document.querySelector('[aria-label^="Notifications"]')but this is flaky, let alone that it won't if you're using i18n.The side effects of not having a proper grip on the container are explained in the PR I created for this: #741
Thanks a lot!