Dialog abstraction throws`DialogContent` requires a `DialogTitle` since last update

[Zerebokep]

Bug report

Current Behavior

Doing a abstraction with {children} as parameter requires the use of Dialog.Title now, I'm basically using this example: https://www.radix-ui.com/primitives/docs/components/dialog#abstract-the-overlay-and-the-close-button

Expected behavior

No error

Suggested solution

It worked until the last update, so I suggest to remove the error when the component is abstracted.

[Zerebokep]

nvm, I'm dumb.

[felipedeboni]

@Zerebokep I don't think they should ignore this. I have a use case where I need to wrap everything inside an iframe to avoid CSS conflicts with the host site, there's too many different css resets out there or even crazy important rules.

A little explanation:

• Host site asks to open an app.
• The app opens and renders it's contents inside an iframe using srcdoc
• document as expected does not have the iframe context, given React is on main doc, just rendering inside an iframe.
• Then it logs an error in console when it does not have an error.

I understand this an edge case, but at the very least we should have a way to disable such console.errors and warnings given everything works as expected.

[mririgoyen]

We are also now seeing this warning. We have parts of the Dialog abstracted, basically into two components:

• A generic "Modal" component that orchestrates the Root, Portal, and Content of a Dialog. This components is a foundation for us to build other modal-type components.
• A more specific "Dialog" component that utilizes our "Modal" component and sets the Title and Description in a more controlled and expected way.

Before whatever change went in, no errors were output to the console. Starting recently, we are seeing console errors. I have confirmed several times over that the nesting of Dialog components are correct in our implementation. If I go directly into our "Modal" component and insert a Title there directly, the error goes away. It is definitely the abstraction causing the error, whereas it wasn't previously.

---

Lucky enough, it seems that this warning only is output in non-production builds: https://github.com/radix-ui/primitives/blob/8175208cdbb8577e53f1165678ee0ce28a801837/packages/react/dialog/src/Dialog.tsx#L412

However, a fix would be nice as it adds noise to the debug console when developing.

[Zerebokep]

No idea if it fits your component, but you could just use the radix VisuallyHidden component:

      <VisuallyHidden.Root>
        <Dialog.Title>{title}</Dialog.Title>
      </VisuallyHidden.Root>

and for the other warning (Dialog.Content) add aria-describedby={undefined}