Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Misleading error log for Dialog Title #556

Open
nedkelly opened this issue Jul 30, 2024 · 0 comments
Open

Misleading error log for Dialog Title #556

nedkelly opened this issue Jul 30, 2024 · 0 comments

Comments

@nedkelly
Copy link

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!

Cheers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant