fix(Dialog): forward id, data-testid, and other unknown attributes to root element

.changeset/dialog-forward-props.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Dialog: forward `id`, `data-testid`, and other unrecognized DOM/`aria-*`/`data-*` attributes to the root `role="dialog"` element

packages/react/src/Dialog/Dialog.test.tsx

@@ -67,6 +67,19 @@ describe('Dialog', () => {
     expect(getByRole('dialog')).toHaveAttribute('data-component', 'ConfirmationDialog')
   })
 
+  it('forwards id, data-testid, and other unknown attributes to the root dialog element', () => {
+    const {getByRole, getByTestId} = render(
+      <Dialog id="my-dialog" data-testid="my-dialog" data-custom="value" aria-keyshortcuts="Escape" onClose={() => {}}>
+        Content
+      </Dialog>,
+    )
+    const dialog = getByRole('dialog')
+    expect(dialog).toHaveAttribute('id', 'my-dialog')
+    expect(dialog).toHaveAttribute('data-custom', 'value')
+    expect(dialog).toHaveAttribute('aria-keyshortcuts', 'Escape')
+    expect(getByTestId('my-dialog')).toBe(dialog)
+  })
+
   it('renders data-component hooks for Dialog subcomponents', () => {
     const {getByRole} = render(
       <Dialog

packages/react/src/Dialog/Dialog.tsx

@@ -59,7 +59,7 @@ export type DialogButtonProps = Omit<ButtonProps, 'content'> & {
 /**
  * Props to customize the rendering of the Dialog.
  */
-export interface DialogProps {
+export interface DialogProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'role' | 'onClose'> {
   'data-component'?: string
   /**
    * Title of the Dialog. Also serves as the aria-label for this Dialog.
@@ -293,6 +293,8 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
     initialFocusRef,
     className,
     style,
+    children,
+    ...rest
   } = props
   const dialogLabelId = useId()
   const dialogDescriptionId = useId()
@@ -314,7 +316,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
     },
     [onClose, lastMouseDownIsBackdrop],
   )
-  const [slots, childrenWithoutSlots] = useSlots(props.children, {
+  const [slots, childrenWithoutSlots] = useSlots(children, {
     body: Dialog.Body,
     header: Dialog.Header,
     footer: Dialog.Footer,
@@ -418,6 +420,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
             aria-labelledby={dialogLabelId}
             aria-describedby={dialogDescriptionId}
             aria-modal
+            {...rest}
             {...positionDataAttributes}
             {...(align && {'data-align': align})}
             data-width={isWidthMapKey(width) ? width : undefined}