radix-ui / themes

Radix Themes is an open-source component library optimized for fast development, easy maintenance, and accessibility. Maintained by @workos.
https://radix-ui.com/themes
MIT License
5.67k stars 204 forks source link

Misleading error log for Dialog Title #556

Open nedkelly opened 3 months ago

nedkelly commented 3 months ago

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.