From 86d85d5a11799468cfeac246aaef568e62b2b0a6 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Wed, 30 Aug 2023 09:34:13 -0400
Subject: [PATCH] fix(Modal): Prevent duplicate ids within Modal

---
 .../react-core/src/components/Modal/ModalContent.tsx   | 10 ++++------
 .../cypress/integration/modal.spec.ts                  |  8 ++++++++
 .../src/components/demos/ModalDemo/ModalDemo.tsx       |  3 +++
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/Modal/ModalContent.tsx b/packages/react-core/src/components/Modal/ModalContent.tsx
index 2ae5a134fce..af6050ee5f3 100644
--- a/packages/react-core/src/components/Modal/ModalContent.tsx
+++ b/packages/react-core/src/components/Modal/ModalContent.tsx
@@ -148,15 +148,13 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
 
   const defaultModalBodyAriaRole = bodyAriaLabel ? 'region' : undefined;
 
+  const hasNoDescription = !description && !ariaDescribedby;
+  const id = hasNoDescription ? descriptorId : undefined;
+
   const modalBody = hasNoBodyWrapper ? (
     children
   ) : (
-    <ModalBoxBody
-      aria-label={bodyAriaLabel}
-      role={bodyAriaRole || defaultModalBodyAriaRole}
-      {...props}
-      {...(!description && !ariaDescribedby && { id: descriptorId })}
-    >
+    <ModalBoxBody aria-label={bodyAriaLabel} role={bodyAriaRole || defaultModalBodyAriaRole} {...props} id={id}>
       {children}
     </ModalBoxBody>
   );
diff --git a/packages/react-integration/cypress/integration/modal.spec.ts b/packages/react-integration/cypress/integration/modal.spec.ts
index d5c08b00dac..e196b3bdc31 100644
--- a/packages/react-integration/cypress/integration/modal.spec.ts
+++ b/packages/react-integration/cypress/integration/modal.spec.ts
@@ -95,4 +95,12 @@ describe('Modal Test', () => {
     cy.get('#modal-custom-focus-confirm-button').should('have.focus');
     cy.get('#modal-custom-focus-cancel-button').click();
   });
+
+  it("Verify the same id doesn't appear multiple times", () => {
+    cy.get('#showDescriptionModalButton').click();
+
+    cy.get('body').find('div#test-modal-id').should('have.length', 1);
+
+    cy.get('.pf-v5-c-modal-box__close > .pf-v5-c-button.pf-m-plain').click();
+  });
 });
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ModalDemo/ModalDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ModalDemo/ModalDemo.tsx
index 24c94181eca..0bd620d3af0 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ModalDemo/ModalDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ModalDemo/ModalDemo.tsx
@@ -18,8 +18,10 @@ interface ModalDemoState {
   isCustomFocusModalOpen: boolean;
 }
 
+// eslint-disable-next-line patternfly-react/no-anonymous-functions
 export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>, ModalDemoState> {
   static displayName = 'ModalDemo';
+
   state = {
     isModalOpen: false,
     isModalDescriptionOpen: false,
@@ -158,6 +160,7 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
             Confirm
           </Button>
         ]}
+        id="test-modal-id"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
         magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo