From 73868fbaf810b48d79dede8f911124f0237f4278 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Tue, 14 Oct 2025 13:31:08 -0400
Subject: [PATCH 1/3] chore(docs): Update ModalWithDropdown example

Example was using out-of-date PatternFly syntax from a prior version. It should now show how to properly add a dropdown to a modal that allows for keyboard accessibility.
---
 .../src/components/Modal/examples/Modal.md    | 10 ++---
 .../Modal/examples/ModalWithDropdown.tsx      | 37 +++++++++++++++----
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md
index 9577b2ede69..e2ab63c122a 100644
--- a/packages/react-core/src/components/Modal/examples/Modal.md
+++ b/packages/react-core/src/components/Modal/examples/Modal.md
@@ -17,7 +17,7 @@ import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ### Basic modals
 
-Basic modals give users the option to either confirm or cancel an action. 
+Basic modals give users the option to either confirm or cancel an action.
 
 To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
 
@@ -71,7 +71,7 @@ To choose a specific width for a modal, use the `width` property. The following
 
 ### Custom header
 
-To add a custom header to a modal, your custom content must be passed as a child of the `<ModalHeader>` component. Do not pass the `title` property to `<ModalHeader>` when using a custom header. 
+To add a custom header to a modal, your custom content must be passed as a child of the `<ModalHeader>` component. Do not pass the `title` property to `<ModalHeader>` when using a custom header.
 
 ```ts file="./ModalCustomHeader.tsx"
 
@@ -113,9 +113,9 @@ To guide users through a series of steps in a modal, you can add a [wizard](/com
 
 ### With dropdown
 
-To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal. 
+To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal.
 
-To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+To allow the dropdown to visually break out of the modal container, set the `popperProps appendTo` property to one of the parent content items in the modal. Otherwise you can use `inline` to allow it to scroll within the modal itself. Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's built-in focus trap. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
 
 ```ts file="./ModalWithDropdown.tsx"
 
@@ -141,7 +141,7 @@ To enable form submission from a button in the modal's footer (outside of the `<
 
 ### Custom focus
 
-To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`. 
+To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`.
 
 ```ts file="./ModalCustomFocus.tsx"
 
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
index 1e2104dbb69..91b1a3d2de8 100644
--- a/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
@@ -32,8 +32,10 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
   };
 
   const onFocus = () => {
-    const element = document.getElementById('modal-dropdown-toggle');
-    (element as HTMLElement).focus();
+    if (typeof document !== 'undefined') {
+      const element = document.getElementById('modal-dropdown-toggle');
+      (element as HTMLElement)?.focus();
+    }
   };
 
   const onEscapePress = (event: KeyboardEvent) => {
@@ -45,6 +47,16 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
     }
   };
 
+  const getAppendLocation = () => {
+    // document doesn't exist when PatternFly website docs framework gets pre-rendered
+    // this is just to avoid that issue - works fine at runtime without it
+    if (typeof document !== 'undefined' && document.getElementById) {
+      return document.getElementById('modal-box-body-with-dropdown');
+    } else {
+      return 'inline';
+    }
+  };
+
   return (
     <Fragment>
       <Button variant="primary" onClick={handleModalToggle}>
@@ -61,10 +73,13 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
         <ModalHeader title="Dropdown modal" labelId="modal-with-dropdown" />
         <ModalBody id="modal-box-body-with-dropdown">
           <div>
-            Set the dropdown <strong>menuAppendTo</strong> prop to <em>parent</em> in order to allow the dropdown menu
-            break out of the modal container. You'll also want to handle closing of the modal yourself, by listening to
-            the <strong>onEscapePress</strong> callback on the Modal component, so you can close the Dropdown first if
-            it's open without closing the entire modal.
+            Set the Dropdown's popperProps appendTo prop to <em>inline</em> if you want the dropdown to scroll within
+            the modal. Set the popperProps appendTo prop to the id of the <em>parent modal or modal body</em> in order
+            to allow the dropdown menu to break out of the modal container. Using the default dropdown location will
+            break keyboard control over the dropdown due to the modal's built-in focus trap. You'll also want to handle
+            closing of the modal yourself, by listening to the
+            <strong>onEscapePress</strong> callback on the Modal component, so you can close the Dropdown first if it's
+            open without closing the entire modal.
           </div>
           <br />
           <div>
@@ -73,10 +88,18 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
               onSelect={onSelect}
               onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
               toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                <MenuToggle ref={toggleRef} onClick={handleDropdownToggle} isExpanded={isDropdownOpen}>
+                <MenuToggle
+                  id="modal-dropdown-toggle"
+                  ref={toggleRef}
+                  onClick={handleDropdownToggle}
+                  isExpanded={isDropdownOpen}
+                >
                   Dropdown
                 </MenuToggle>
               )}
+              popperProps={{
+                appendTo: getAppendLocation()
+              }}
             >
               <DropdownList>
                 <DropdownItem value={0} key="action">

From bca47fb6b1aeefc887b12f5ef11100ef58dd088a Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Thu, 16 Oct 2025 16:50:50 -0400
Subject: [PATCH 2/3] Switch to using focus trap as location

---
 .../react-core/src/components/Modal/Modal.tsx |  2 ++
 .../src/components/Modal/ModalContent.tsx     |  4 ++++
 .../components/Modal/__tests__/Modal.test.tsx |  9 +++++++
 .../Modal/__tests__/ModalContent.test.tsx     | 18 +++++++++++++-
 .../src/components/Modal/examples/Modal.md    | 11 ++++++++-
 .../Modal/examples/ModalWithDropdown.tsx      | 20 +++++++++-------
 .../src/helpers/FocusTrap/FocusTrap.tsx       |  2 ++
 .../__tests__/Generated/FocusTrap.test.tsx    | 24 ++++++++++++++++---
 8 files changed, 77 insertions(+), 13 deletions(-)

diff --git a/packages/react-core/src/components/Modal/Modal.tsx b/packages/react-core/src/components/Modal/Modal.tsx
index 852c0a6dcd3..99a12d77b48 100644
--- a/packages/react-core/src/components/Modal/Modal.tsx
+++ b/packages/react-core/src/components/Modal/Modal.tsx
@@ -27,6 +27,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
    * focusable element will receive focus.
    */
   elementToFocus?: HTMLElement | SVGElement | string;
+  /** Id of the focus trap in the ModalContent component */
+  focusTrapId?: string;
   /** An id to use for the modal box container. */
   id?: string;
   /** Flag to show the modal. */
diff --git a/packages/react-core/src/components/Modal/ModalContent.tsx b/packages/react-core/src/components/Modal/ModalContent.tsx
index 935a7ccf230..38e311c8cfa 100644
--- a/packages/react-core/src/components/Modal/ModalContent.tsx
+++ b/packages/react-core/src/components/Modal/ModalContent.tsx
@@ -29,6 +29,8 @@ export interface ModalContentProps extends OUIAProps {
    * focusable element will receive focus.
    */
   elementToFocus?: HTMLElement | SVGElement | string;
+  /** Id of the focus trap */
+  focusTrapId?: string;
   /** Flag to show the modal. */
   isOpen?: boolean;
   /** A callback for when the close button is clicked. */
@@ -69,6 +71,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   ouiaId,
   ouiaSafe = true,
   elementToFocus,
+  focusTrapId,
   ...props
 }: ModalContentProps) => {
   if (!isOpen) {
@@ -122,6 +125,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
           initialFocus: elementToFocus || undefined
         }}
         className={css(bullsEyeStyles.bullseye)}
+        id={focusTrapId}
       >
         {modalBox}
       </FocusTrap>
diff --git a/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx b/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx
index 4fda267e141..7c1c768008c 100644
--- a/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx
+++ b/packages/react-core/src/components/Modal/__tests__/Modal.test.tsx
@@ -172,4 +172,13 @@ describe('Modal', () => {
     expect(asideSibling).not.toHaveAttribute('aria-hidden');
     expect(articleSibling).not.toHaveAttribute('aria-hidden');
   });
+
+  test('Modal can add id to focus trap correctly for use with dropdowns', () => {
+    render(<Modal focusTrapId="focus-trap" isOpen onClose={jest.fn()} children="modal content" />);
+    expect(screen.getByRole('dialog', { name: /modal content/i }).parentElement).toHaveAttribute('id', 'focus-trap');
+    expect(screen.getByRole('dialog', { name: /modal content/i }).parentElement).toHaveAttribute(
+      'class',
+      'pf-v6-l-bullseye'
+    );
+  });
 });
diff --git a/packages/react-core/src/components/Modal/__tests__/ModalContent.test.tsx b/packages/react-core/src/components/Modal/__tests__/ModalContent.test.tsx
index 8f2d272982a..c75a3eadecb 100644
--- a/packages/react-core/src/components/Modal/__tests__/ModalContent.test.tsx
+++ b/packages/react-core/src/components/Modal/__tests__/ModalContent.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { ModalContent } from '../ModalContent';
 
@@ -43,3 +43,19 @@ test('Modal Content Test with onclose', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Modal content can add id to focus trap correctly for use with dropdowns', () => {
+  render(
+    <ModalContent focusTrapId="focus-trap" isOpen {...modalContentProps}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(screen.getByRole('dialog', { name: /This is a ModalBox header/i }).parentElement).toHaveAttribute(
+    'id',
+    'focus-trap'
+  );
+  expect(screen.getByRole('dialog', { name: /This is a ModalBox header/i }).parentElement).toHaveAttribute(
+    'class',
+    'pf-v6-l-bullseye'
+  );
+});
diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md
index e2ab63c122a..db5c1557c64 100644
--- a/packages/react-core/src/components/Modal/examples/Modal.md
+++ b/packages/react-core/src/components/Modal/examples/Modal.md
@@ -115,7 +115,16 @@ To guide users through a series of steps in a modal, you can add a [wizard](/com
 
 To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal.
 
-To allow the dropdown to visually break out of the modal container, set the `popperProps appendTo` property to one of the parent content items in the modal. Otherwise you can use `inline` to allow it to scroll within the modal itself. Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's built-in focus trap. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's
+built-in focus trap. To allow the dropdown to visually break out of the modal container, set the Dropdown's
+`popperProps appendTo` property to id of the focus trap for the modal. This can be done by adding prop
+`focusTrapId` to the modal, and then setting the append location to that as per this example. Otherwise you
+can use `inline` to allow it to scroll within the modal itself. Appending to the focus trap should allow the
+menu to expand visually outside the Modal (no scrollbar created in the Modal itself), and still allow
+focusing the content within that menu via keyboard. You should also handle the modal's closing behavior by
+listening to the
+`onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the
+dropdown without closing the entire modal.
 
 ```ts file="./ModalWithDropdown.tsx"
 
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
index 91b1a3d2de8..dde57f3cc06 100644
--- a/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
@@ -51,7 +51,7 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
     // document doesn't exist when PatternFly website docs framework gets pre-rendered
     // this is just to avoid that issue - works fine at runtime without it
     if (typeof document !== 'undefined' && document.getElementById) {
-      return document.getElementById('modal-box-body-with-dropdown');
+      return document.getElementById('modal-with-dropdown-focus-trap');
     } else {
       return 'inline';
     }
@@ -69,17 +69,21 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
         onEscapePress={onEscapePress}
         aria-labelledby="modal-with-dropdown"
         aria-describedby="modal-box-body-with-dropdown"
+        focusTrapId="modal-with-dropdown-focus-trap"
       >
         <ModalHeader title="Dropdown modal" labelId="modal-with-dropdown" />
         <ModalBody id="modal-box-body-with-dropdown">
           <div>
-            Set the Dropdown's popperProps appendTo prop to <em>inline</em> if you want the dropdown to scroll within
-            the modal. Set the popperProps appendTo prop to the id of the <em>parent modal or modal body</em> in order
-            to allow the dropdown menu to break out of the modal container. Using the default dropdown location will
-            break keyboard control over the dropdown due to the modal's built-in focus trap. You'll also want to handle
-            closing of the modal yourself, by listening to the
-            <strong>onEscapePress</strong> callback on the Modal component, so you can close the Dropdown first if it's
-            open without closing the entire modal.
+            Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's
+            built-in focus trap. To allow the dropdown to visually break out of the modal container, set the Dropdown's
+            popperProps appendTo property to id of the focus trap for the modal. This can be done by adding prop
+            focusTrapId to the modal, and then setting the append location to that as per this example. Otherwise you
+            can use "inline" to allow it to scroll within the modal itself. Appending to the focus trap should allow the
+            menu to expand visually outside the Modal (no scrollbar created in the Modal itself), and still allow
+            focusing the content within that menu via keyboard. You should also handle the modal's closing behavior by
+            listening to the
+            <em>onEscapePress</em> callback on the Modal component. This allows the "escape" key to collapse the
+            dropdown without closing the entire modal.
           </div>
           <br />
           <div>
diff --git a/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx b/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx
index ecb59526b9d..d7431695b4b 100644
--- a/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx
+++ b/packages/react-core/src/helpers/FocusTrap/FocusTrap.tsx
@@ -8,6 +8,8 @@ export interface FocusTrapProps extends ComponentPropsWithRef<'div'> {
   focusTrapOptions?: FocusTrapOptions;
   /** Prevent from scrolling to the previously focused element on deactivation */
   preventScrollOnDeactivate?: boolean;
+  /** Unique id that can optionally be applied to focus trap */
+  id?: string;
 }
 
 export const FocusTrap = forwardRef<HTMLDivElement, FocusTrapProps>(function FocusTrap(
diff --git a/packages/react-core/src/helpers/FocusTrap/__tests__/Generated/FocusTrap.test.tsx b/packages/react-core/src/helpers/FocusTrap/__tests__/Generated/FocusTrap.test.tsx
index 44bc762eaec..24adde3e33e 100644
--- a/packages/react-core/src/helpers/FocusTrap/__tests__/Generated/FocusTrap.test.tsx
+++ b/packages/react-core/src/helpers/FocusTrap/__tests__/Generated/FocusTrap.test.tsx
@@ -1,9 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { FocusTrap } from '../../FocusTrap';
+
 /**
  * This test was generated
  */
-import { render } from '@testing-library/react';
-import { FocusTrap } from '../../FocusTrap';
-
 it('FocusTrap should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
     <FocusTrap
@@ -16,3 +16,21 @@ it('FocusTrap should match snapshot (auto-generated)', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+/**
+ * This test was not generated
+ */
+test('Focus trap can have an id added', () => {
+  render(
+    <FocusTrap
+      children={<div>ReactNode</div>}
+      className={'string'}
+      active={false}
+      paused={false}
+      focusTrapOptions={undefined}
+      id="focus-trap-id"
+      data-testid="focus-trap"
+    />
+  );
+  expect(screen.getByTestId('focus-trap')).toHaveAttribute('id', 'focus-trap-id');
+});

From b066d8dcad510a2ed9b991327f95c2c53cf06622 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Mon, 20 Oct 2025 14:16:41 -0400
Subject: [PATCH 3/3] Update test

---
 .../FocusTrap/__tests__/FocusTrap.test.tsx    | 17 ++++++++++++++++
 .../__tests__/Generated/FocusTrap.test.tsx    | 20 +------------------
 2 files changed, 18 insertions(+), 19 deletions(-)
 create mode 100644 packages/react-core/src/helpers/FocusTrap/__tests__/FocusTrap.test.tsx

diff --git a/packages/react-core/src/helpers/FocusTrap/__tests__/FocusTrap.test.tsx b/packages/react-core/src/helpers/FocusTrap/__tests__/FocusTrap.test.tsx
new file mode 100644
index 00000000000..1401e8fe793
--- /dev/null
+++ b/packages/react-core/src/helpers/FocusTrap/__tests__/FocusTrap.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import { FocusTrap } from '../FocusTrap';
+
+test('Focus trap can have an id added', () => {
+  render(
+    <FocusTrap
+      children={<div>ReactNode</div>}
+      className={'string'}
+      active={false}
+      paused={false}
+      focusTrapOptions={undefined}
+      id="focus-trap-id"
+      data-testid="focus-trap"
+    />
+  );
+  expect(screen.getByTestId('focus-trap')).toHaveAttribute('id', 'focus-trap-id');
+});
diff --git a/packages/react-core/src/helpers/FocusTrap/__tests__/Generated/FocusTrap.test.tsx b/packages/react-core/src/helpers/FocusTrap/__tests__/Generated/FocusTrap.test.tsx
index 24adde3e33e..b75e87788ba 100644
--- a/packages/react-core/src/helpers/FocusTrap/__tests__/Generated/FocusTrap.test.tsx
+++ b/packages/react-core/src/helpers/FocusTrap/__tests__/Generated/FocusTrap.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { FocusTrap } from '../../FocusTrap';
 
 /**
@@ -16,21 +16,3 @@ it('FocusTrap should match snapshot (auto-generated)', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
-
-/**
- * This test was not generated
- */
-test('Focus trap can have an id added', () => {
-  render(
-    <FocusTrap
-      children={<div>ReactNode</div>}
-      className={'string'}
-      active={false}
-      paused={false}
-      focusTrapOptions={undefined}
-      id="focus-trap-id"
-      data-testid="focus-trap"
-    />
-  );
-  expect(screen.getByTestId('focus-trap')).toHaveAttribute('id', 'focus-trap-id');
-});