From 945983ccee908e5f18a50486864c067cb7f47818 Mon Sep 17 00:00:00 2001 From: Jannik Bertram Date: Thu, 21 Aug 2025 13:51:37 +0200 Subject: [PATCH 1/2] Allow aria-description to describe Dialog and AlertDialog The aria-description attribute can now be used instead of passing a DialogDescription component as a child or using aria-describedby. A warning is only logged if all of those options are missing. --- packages/react/alert-dialog/src/alert-dialog.tsx | 7 ++++++- packages/react/dialog/src/dialog.tsx | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/react/alert-dialog/src/alert-dialog.tsx b/packages/react/alert-dialog/src/alert-dialog.tsx index 9ba643999..2f3c2e168 100644 --- a/packages/react/alert-dialog/src/alert-dialog.tsx +++ b/packages/react/alert-dialog/src/alert-dialog.tsx @@ -248,11 +248,16 @@ const DescriptionWarning: React.FC = ({ contentRef }) = You can add a description to the \`${CONTENT_NAME}\` by passing a \`${DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog. -Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component. +Alternatively, you can either use the \`aria-description\` attribute or your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component. For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`; React.useEffect(() => { + if (contentRef.current?.getAttribute('aria-description')) { + // the alert dialog is described by the aria-description attribute + return; + } + const hasDescription = document.getElementById( contentRef.current?.getAttribute('aria-describedby')! ); diff --git a/packages/react/dialog/src/dialog.tsx b/packages/react/dialog/src/dialog.tsx index 7bf964798..ce89794e1 100644 --- a/packages/react/dialog/src/dialog.tsx +++ b/packages/react/dialog/src/dialog.tsx @@ -533,9 +533,14 @@ type DescriptionWarningProps = { const DescriptionWarning: React.FC = ({ contentRef, descriptionId }) => { const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME); - const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`; + const MESSAGE = `Warning: Missing \`Description\` or \`aria-description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`; React.useEffect(() => { + if (contentRef.current?.getAttribute('aria-description')) { + // the dialog is described by the aria-description attribute + return; + } + const describedById = contentRef.current?.getAttribute('aria-describedby'); // if we have an id and the user hasn't set aria-describedby={undefined} if (descriptionId && describedById) { From b98b854a4275ca4538d9f06996cbcfbad3fb06e7 Mon Sep 17 00:00:00 2001 From: Jannik Bertram Date: Thu, 21 Aug 2025 14:34:53 +0200 Subject: [PATCH 2/2] Add changeset --- .changeset/new-otters-bet.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/new-otters-bet.md diff --git a/.changeset/new-otters-bet.md b/.changeset/new-otters-bet.md new file mode 100644 index 000000000..8fb36e0ef --- /dev/null +++ b/.changeset/new-otters-bet.md @@ -0,0 +1,6 @@ +--- +'@radix-ui/react-alert-dialog': patch +'@radix-ui/react-dialog': patch +--- + +Allow aria-description attribute to describe the dialog>wq