How do children update props on their parents in SSR?

[bryanmylee]

Radix UI has been a huge source of inspiration for me when building my own tools.

I'm currently building a UI library of my own, and I'm currently working on a Dialog as a proof of concept. Recently, I ran into the issue of updating the aria-labelledby and aria-describedby properties of the dialog content element based on the existence of a title and description component.

Ideally, if the user doesn't use a Dialog.Title or Dialog.Description, I want to remove the aria-labelledby or aria-describedby attribute from the dialog. The only way I've managed to do that in React is by initially omitting the attributes, then accessing the dialog's state via context in the Title and Description component to update the dialog's state and "enable" the attributes.

However, this doesn't seem to work when using ReactDOMServer.renderToString, which invalidates this method for SSR.

I'm wondering how the Radix team solved this issue, as it seems like you also use context.

[jjenzz]

radix always adds the aria-labelledby and aria-describedby attributes and instead checks if parts with those ids are rendered. If not, it logs warnings explaining that:

• DialogTitle is required for a11y but they can wrap it with VisuallyHidden if they don't want it to be visible.
• DialogDescription must be used unless they pass aria-describedby={undefined} to the DialogContent part.

code is here.

[bryanmylee]

Thank you for the clear explanation! I really appreciate the help.