From b1c82c1df2635acbffdf3c1a1ade0c7d859a08af Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Thu, 30 Jul 2026 20:19:11 +0200
Subject: [PATCH] fix(Dialog): forward id, data-testid, and other unknown
 attributes to root element

---
 .changeset/dialog-forward-props.md        |  5 +++++
 packages/react/src/Dialog/Dialog.test.tsx | 13 +++++++++++++
 packages/react/src/Dialog/Dialog.tsx      |  7 +++++--
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/dialog-forward-props.md

diff --git a/.changeset/dialog-forward-props.md b/.changeset/dialog-forward-props.md
new file mode 100644
index 00000000000..666ca9c089c
--- /dev/null
+++ b/.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
diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx
index 21f1fc2447c..2f27614c139 100644
--- a/packages/react/src/Dialog/Dialog.test.tsx
+++ b/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
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index ef7b8d888d4..b62c3c81299 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/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}