I'm using a Dialog from Radix UI Themes inside a Web Component Shadow DOM, and it's working well, except for an error message related to the DialogTitle:
`DialogContent` requires a `DialogTitle` for the component to be accessible for screen reader users.
If you want to hide the `DialogTitle`, you can wrap it with our VisuallyHidden component.
For more information, see https://radix-ui.com/primitives/docs/components/dialog
Looking at the code, it's easy to see why this error is being logged, the check for title it looking in the document, but my title is in the Shadow DOM.
React.useEffect(() => {
if (titleId) {
const hasTitle = document.getElementById(titleId);
if (!hasTitle) console.error(MESSAGE);
}
}, [MESSAGE, titleId]);
I've tested my ARIA output and despite this error message my title is perfectly accessible based on the implementation of aria-labelby within the Radix UI component.
I think the error message should be revised to a warning because document.getElementById doesn't guarantee a missing title in some scenarios.
Otherwise, I'm loving Radix UI, thanks for all your hard work!
I'm using a
Dialog
from Radix UI Themes inside a Web Component Shadow DOM, and it's working well, except for an error message related to theDialogTitle
:Looking at the code, it's easy to see why this error is being logged, the check for title it looking in the
document
, but my title is in the Shadow DOM.I've tested my ARIA output and despite this error message my title is perfectly accessible based on the implementation of
aria-labelby
within the Radix UI component.I think the error message should be revised to a warning because
document.getElementById
doesn't guarantee a missing title in some scenarios.Otherwise, I'm loving Radix UI, thanks for all your hard work!
Cheers.