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.

Author: jannikbertram

packages/react/alert-dialog/src/alert-dialog.tsx

@@ -243,16 +243,21 @@ type DescriptionWarningProps = {
   contentRef: React.RefObject<AlertDialogContentElement | null>;
 };
 
-const DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) => {
+const DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef, descriptionId }) => {
   const MESSAGE = `\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
 
 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 \`aria-description\` 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')!
     );

packages/react/dialog/src/dialog.tsx

@@ -533,9 +533,14 @@ type DescriptionWarningProps = {
 
 const DescriptionWarning: React.FC<DescriptionWarningProps> = ({ 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) {