[Dialogs] Fix missing ids on Title and Description (mui#1326)

Author: mj12albert

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

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useAlertDialogRootContext } from '../root/AlertDialogRootContext';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useBaseUiId } from '../../utils/useBaseUiId';
@@ -31,7 +32,16 @@ const AlertDialogDescription = React.forwardRef(function AlertDialogDescription(
     };
   }, [id, setDescriptionElementId]);
 
+  const getProps = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps(externalProps, {
+        id,
+      }),
+    [id],
+  );
+
   const { renderElement } = useComponentRenderer({
+    propGetter: getProps,
     render: render ?? 'p',
     className,
     state,

packages/react/src/alert-dialog/root/AlertDialogRoot.test.tsx

@@ -8,6 +8,32 @@ import { spy } from 'sinon';
 describe('<AlertDialog.Root />', () => {
   const { render } = createRenderer();
 
+  it('ARIA attributes', async () => {
+    const { queryByRole, getByText } = await render(
+      <AlertDialog.Root open>
+        <AlertDialog.Trigger />
+        <AlertDialog.Portal>
+          <AlertDialog.Backdrop />
+          <AlertDialog.Popup>
+            <AlertDialog.Title>title text</AlertDialog.Title>
+            <AlertDialog.Description>description text</AlertDialog.Description>
+          </AlertDialog.Popup>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>,
+    );
+
+    const popup = queryByRole('alertdialog');
+    expect(popup).not.to.equal(null);
+    expect(popup).to.have.attribute('aria-modal', 'true');
+
+    expect(getByText('title text').getAttribute('id')).to.equal(
+      popup?.getAttribute('aria-labelledby'),
+    );
+    expect(getByText('description text').getAttribute('id')).to.equal(
+      popup?.getAttribute('aria-describedby'),
+    );
+  });
+
   describe('prop: onOpenChange', () => {
     it('calls onOpenChange with the new open state', async () => {
       const handleOpenChange = spy();

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

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useAlertDialogRootContext } from '../root/AlertDialogRootContext';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useBaseUiId } from '../../utils/useBaseUiId';
@@ -31,7 +32,16 @@ const AlertDialogTitle = React.forwardRef(function AlertDialogTitle(
     };
   }, [id, setTitleElementId]);
 
+  const getProps = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps(externalProps, {
+        id,
+      }),
+    [id],
+  );
+
   const { renderElement } = useComponentRenderer({
+    propGetter: getProps,
     render: render ?? 'h2',
     className,
     state,

packages/react/src/dialog/description/DialogDescription.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDialogRootContext } from '../root/DialogRootContext';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useBaseUiId } from '../../utils/useBaseUiId';
@@ -31,7 +32,16 @@ const DialogDescription = React.forwardRef(function DialogDescription(
     };
   }, [id, setDescriptionElementId]);
 
+  const getProps = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps(externalProps, {
+        id,
+      }),
+    [id],
+  );
+
   const { renderElement } = useComponentRenderer({
+    propGetter: getProps,
     render: render ?? 'p',
     className,
     state,

packages/react/src/dialog/root/DialogRoot.test.tsx

@@ -14,6 +14,32 @@ describe('<Dialog.Root />', () => {
 
   const { render } = createRenderer();
 
+  it('ARIA attributes', async () => {
+    const { queryByRole, getByText } = await render(
+      <Dialog.Root modal={false} open>
+        <Dialog.Trigger />
+        <Dialog.Portal>
+          <Dialog.Backdrop />
+          <Dialog.Popup>
+            <Dialog.Title>title text</Dialog.Title>
+            <Dialog.Description>description text</Dialog.Description>
+          </Dialog.Popup>
+        </Dialog.Portal>
+      </Dialog.Root>,
+    );
+
+    const popup = queryByRole('dialog');
+    expect(popup).not.to.equal(null);
+    expect(popup).to.not.have.attribute('aria-modal');
+
+    expect(getByText('title text').getAttribute('id')).to.equal(
+      popup?.getAttribute('aria-labelledby'),
+    );
+    expect(getByText('description text').getAttribute('id')).to.equal(
+      popup?.getAttribute('aria-describedby'),
+    );
+  });
+
   describe('uncontrolled mode', () => {
     it('should open the dialog with the trigger', async () => {
       const { queryByRole, getByRole } = await render(

packages/react/src/dialog/title/DialogTitle.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDialogRootContext } from '../root/DialogRootContext';
+import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useBaseUiId } from '../../utils/useBaseUiId';
@@ -31,7 +32,16 @@ const DialogTitle = React.forwardRef(function DialogTitle(
     };
   }, [id, setTitleElementId]);
 
+  const getProps = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps(externalProps, {
+        id,
+      }),
+    [id],
+  );
+
   const { renderElement } = useComponentRenderer({
+    propGetter: getProps,
     render: render ?? 'h2',
     className,
     state,