fix(Modal): Prevent duplicate ids within Modal (#9555)

Author: wise-king-sullyman

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>
   );

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();
+  });
 });

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