@patternfly/react-core 6.0.0-alpha.65 → 6.0.0-alpha.67

package/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -9,67 +9,16 @@ exports[`Modal Content Test description 1`] = `
       class="pf-v6-l-bullseye"
     >
       <div
-        aria-describedby="descriptorId"
-        aria-labelledby="labelId"
         aria-modal="true"
         class="pf-v6-c-modal-box"
         data-ouia-component-type="PF6/ModalContent"
         data-ouia-safe="true"
+        descriptorid="descriptorId"
         id="boxId"
+        labelid="labelId"
         role="dialog"
       >
-        <div
-          class="pf-v6-c-modal-box__close"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Close"
-            class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-3"
-            data-ouia-component-type="PF6/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 352 512"
-              width="1em"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </button>
-        </div>
-        <header
-          class="pf-v6-c-modal-box__header"
-        >
-          <h1
-            class="pf-v6-c-modal-box__title"
-            id="labelId"
-          >
-            <span
-              class="pf-v6-c-modal-box__title-text"
-            >
-              Test Modal Content title
-            </span>
-          </h1>
-          <div
-            class="pf-v6-c-modal-box__description"
-            id="descriptorId"
-          >
-            This is a test description.
-          </div>
-        </header>
-        <div
-          class="pf-v6-c-modal-box__body"
-        >
-          This is a ModalBox header
-        </div>
+        This is a ModalBox header
       </div>
     </div>
   </div>
@@ -85,62 +34,16 @@ exports[`Modal Content Test isOpen 1`] = `
       class="pf-v6-l-bullseye"
     >
       <div
-        aria-describedby="descriptorId"
-        aria-labelledby="labelId"
         aria-modal="true"
         class="pf-v6-c-modal-box"
         data-ouia-component-type="PF6/ModalContent"
         data-ouia-safe="true"
+        descriptorid="descriptorId"
         id="boxId"
+        labelid="labelId"
         role="dialog"
       >
-        <div
-          class="pf-v6-c-modal-box__close"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Close"
-            class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-2"
-            data-ouia-component-type="PF6/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 352 512"
-              width="1em"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </button>
-        </div>
-        <header
-          class="pf-v6-c-modal-box__header"
-        >
-          <h1
-            class="pf-v6-c-modal-box__title"
-            id="labelId"
-          >
-            <span
-              class="pf-v6-c-modal-box__title-text"
-            >
-              Test Modal Content title
-            </span>
-          </h1>
-        </header>
-        <div
-          class="pf-v6-c-modal-box__body"
-          id="descriptorId"
-        >
-          This is a ModalBox header
-        </div>
+        This is a ModalBox header
       </div>
     </div>
   </div>
@@ -156,138 +59,16 @@ exports[`Modal Content Test only body 1`] = `
       class="pf-v6-l-bullseye"
     >
       <div
-        aria-describedby="descriptorId"
-        aria-labelledby="labelId"
         aria-modal="true"
         class="pf-v6-c-modal-box"
         data-ouia-component-type="PF6/ModalContent"
         data-ouia-safe="true"
+        descriptorid="descriptorId"
         id="boxId"
+        labelid="labelId"
         role="dialog"
       >
-        <div
-          class="pf-v6-c-modal-box__close"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Close"
-            class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-1"
-            data-ouia-component-type="PF6/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 352 512"
-              width="1em"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </button>
-        </div>
-        <header
-          class="pf-v6-c-modal-box__header"
-        >
-          <h1
-            class="pf-v6-c-modal-box__title"
-            id="labelId"
-          >
-            <span
-              class="pf-v6-c-modal-box__title-text"
-            >
-              Test Modal Content title
-            </span>
-          </h1>
-        </header>
-        <div
-          class="pf-v6-c-modal-box__body"
-          id="descriptorId"
-        >
-          This is a ModalBox header
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Modal Content Test with footer 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-backdrop"
-  >
-    <div
-      class="pf-v6-l-bullseye"
-    >
-      <div
-        aria-describedby="descriptorId"
-        aria-labelledby="labelId"
-        aria-modal="true"
-        class="pf-v6-c-modal-box"
-        data-ouia-component-type="PF6/ModalContent"
-        data-ouia-safe="true"
-        id="boxId"
-        role="dialog"
-      >
-        <div
-          class="pf-v6-c-modal-box__close"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Close"
-            class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-4"
-            data-ouia-component-type="PF6/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 352 512"
-              width="1em"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </button>
-        </div>
-        <header
-          class="pf-v6-c-modal-box__header"
-        >
-          <h1
-            class="pf-v6-c-modal-box__title"
-            id="labelId"
-          >
-            <span
-              class="pf-v6-c-modal-box__title-text"
-            >
-              Test Modal Content title
-            </span>
-          </h1>
-        </header>
-        <div
-          class="pf-v6-c-modal-box__body"
-          id="descriptorId"
-        >
-          This is a ModalBox header
-        </div>
-        <footer
-          class="pf-v6-c-modal-box__footer"
-        >
-          Testing
-        </footer>
+        This is a ModalBox header
       </div>
     </div>
   </div>
@@ -303,13 +84,13 @@ exports[`Modal Content Test with onclose 1`] = `
       class="pf-v6-l-bullseye"
     >
       <div
-        aria-describedby="descriptorId"
-        aria-labelledby="labelId"
         aria-modal="true"
         class="pf-v6-c-modal-box pf-m-lg"
         data-ouia-component-type="PF6/ModalContent"
         data-ouia-safe="true"
+        descriptorid="descriptorId"
         id="boxId"
+        labelid="labelId"
         role="dialog"
       >
         <div
@@ -319,234 +100,7 @@ exports[`Modal Content Test with onclose 1`] = `
             aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-6"
-            data-ouia-component-type="PF6/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 352 512"
-              width="1em"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </button>
-        </div>
-        <header
-          class="pf-v6-c-modal-box__header"
-        >
-          <h1
-            class="pf-v6-c-modal-box__title"
-            id="labelId"
-          >
-            <span
-              class="pf-v6-c-modal-box__title-text"
-            >
-              Test Modal Content title
-            </span>
-          </h1>
-        </header>
-        <div
-          class="pf-v6-c-modal-box__body"
-          id="descriptorId"
-        >
-          This is a ModalBox header
-        </div>
-        <footer
-          class="pf-v6-c-modal-box__footer"
-        >
-          Testing footer
-        </footer>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Modal Content test without footer 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-backdrop"
-  >
-    <div
-      class="pf-v6-l-bullseye"
-    >
-      <div
-        aria-describedby="descriptorId"
-        aria-labelledby="labelId"
-        aria-modal="true"
-        class="pf-v6-c-modal-box"
-        data-ouia-component-type="PF6/ModalContent"
-        data-ouia-safe="true"
-        id="boxId"
-        role="dialog"
-      >
-        <div
-          class="pf-v6-c-modal-box__close"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Close"
-            class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-5"
-            data-ouia-component-type="PF6/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 352 512"
-              width="1em"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </button>
-        </div>
-        <header
-          class="pf-v6-c-modal-box__header"
-        >
-          <h1
-            class="pf-v6-c-modal-box__title"
-            id="labelId"
-          >
-            <span
-              class="pf-v6-c-modal-box__title-text"
-            >
-              Test Modal Content title
-            </span>
-          </h1>
-        </header>
-        <div
-          class="pf-v6-c-modal-box__body"
-          id="descriptorId"
-        >
-          This is a ModalBox header
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Modal Test with custom footer 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-backdrop"
-  >
-    <div
-      class="pf-v6-l-bullseye"
-    >
-      <div
-        aria-describedby="descriptorId"
-        aria-labelledby="labelId"
-        aria-modal="true"
-        class="pf-v6-c-modal-box pf-m-lg"
-        data-ouia-component-type="PF6/ModalContent"
-        data-ouia-safe="true"
-        id="boxId"
-        role="dialog"
-      >
-        <div
-          class="pf-v6-c-modal-box__close"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Close"
-            class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-8"
-            data-ouia-component-type="PF6/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 352 512"
-              width="1em"
-            >
-              <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-              />
-            </svg>
-          </button>
-        </div>
-        <header
-          class="pf-v6-c-modal-box__header"
-        >
-          <h1
-            class="pf-v6-c-modal-box__title"
-            id="labelId"
-          >
-            <span
-              class="pf-v6-c-modal-box__title-text"
-            >
-              Test Modal Custom Footer
-            </span>
-          </h1>
-        </header>
-        <div
-          class="pf-v6-c-modal-box__body"
-          id="descriptorId"
-        >
-          This is a ModalBox header
-        </div>
-        <footer
-          class="pf-v6-c-modal-box__footer"
-        >
-          <span
-            id="test-custom-footer"
-          >
-            TEST
-          </span>
-        </footer>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Modal Test with custom header 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-backdrop"
-  >
-    <div
-      class="pf-v6-l-bullseye"
-    >
-      <div
-        aria-describedby="descriptorId"
-        aria-labelledby="labelId"
-        aria-modal="true"
-        class="pf-v6-c-modal-box pf-m-lg"
-        data-ouia-component-type="PF6/ModalContent"
-        data-ouia-safe="true"
-        id="boxId"
-        role="dialog"
-      >
-        <div
-          class="pf-v6-c-modal-box__close"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Close"
-            class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-7"
+            data-ouia-component-id="OUIA-Generated-Button-plain-1"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -566,26 +120,7 @@ exports[`Modal Test with custom header 1`] = `
             </svg>
           </button>
         </div>
-        <header
-          class="pf-v6-c-modal-box__header"
-        >
-          <span
-            id="test-custom-header"
-          >
-            TEST
-          </span>
-        </header>
-        <div
-          class="pf-v6-c-modal-box__body"
-          id="descriptorId"
-        >
-          This is a ModalBox header
-        </div>
-        <footer
-          class="pf-v6-c-modal-box__footer"
-        >
-          Testing footer
-        </footer>
+        This is a ModalBox header
       </div>
     </div>
   </div>

package/src/components/Modal/examples/Modal.md

@@ -2,22 +2,26 @@
 id: Modal
 section: components
 cssPrefix: pf-v5-c-modal-box
-propComponents: ['Modal']
+propComponents: ['Modal', 'ModalBody', 'ModalHeader', 'ModalFooter']
 ouia: true
+beta: true
 ---
 
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Examples
 
 ### Basic modals
 
-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.
+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.
+
+A modal must have a `<ModalBody>`, containing the main content of the modal. The `<ModalHeader>` and `<ModalFooter>` components are not required, but are typically used to display the modal title and any button actions, respectively. 
 
 ```ts file="./ModalBasic.tsx"
 
@@ -25,7 +29,7 @@ Basic modals give users the option to either confirm or cancel an action. To fla
 
 ### Scrollable modals
 
-To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={0}` to the `<Modal>`.
+To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={0}` to the `<ModalBody>`.
 
 ```ts file="ModalWithOverflowingContent.tsx"
 
@@ -47,29 +51,13 @@ To override a modal's default center alignment, use the `position` property. In
 
 ```
 
-### Small modal
+### Modal sizes
 
 To adjust the size of a modal, use the `variant` property. Modal variants include "small", "medium", "large", and "default".
 
-The following example displays a "small" modal by passing in `variant={ModalVariant.small}`.
-
-```ts file="./ModalSmall.tsx"
-
-```
-
-### Medium modal
-
-The following example displays a "medium" modal by passing in `variant={ModalVariant.medium}`.
+In the following example, you can display each modal size option. To launch a modal with a specific size, first select the respective radio button, followed by the "Show modal" button.
 
-```ts file="./ModalMedium.tsx"
-
-```
-
-### Large modal
-
-The following example displays a "large" modal by passing in `variant={ModalVariant.large}`.
-
-```ts file="./ModalLarge.tsx"
+```ts file="./ModalSize.tsx"
 
 ```
 
@@ -81,17 +69,19 @@ To choose a specific width for a modal, use the `width` property. The following
 
 ```
 
-### Custom header and footer
+### Custom header
 
-To add a custom header and footer to a modal, set the `header` and `footer` properties to a custom implementation. The following example passes title components into both the header and the footer and also passes an icon to the footer.
+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="./ModalCustomHeaderFooter.tsx"
+```ts file="./ModalCustomHeader.tsx"
 
 ```
 
 ### No header or footer
 
-To exclusively present information in a modal, remove the `header` and/or `footer`.
+To exclusively present information in a modal, remove the header and/or footer.
+
+When a modal has no header or footer, make sure to add an `aria-label` explicitly stating this, so that those using assistive technologies can understand this context.
 
 ```ts file="./ModalNoHeaderFooter.tsx"
 
@@ -99,7 +89,7 @@ To exclusively present information in a modal, remove the `header` and/or `foote
 
 ### Title icon
 
-To add an icon before a modal’s title, use the `titleIconVariant`, which can be set to one of the predefined variants -- "success", "danger", "warning", "info", and "custom" -- or to an imported custom icon. The following example uses a "warning" variant.
+To add an icon before a modal’s title, use the `titleIconVariant` property, which can be set to a "success", "danger", "warning", or "info" variant. The following example uses a "warning" variant.
 
 ```ts file="./ModalTitleIcon.tsx"
 
@@ -123,7 +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/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 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.
 
 ```ts file="./ModalWithDropdown.tsx"
 
@@ -139,9 +131,9 @@ To help simplify and explain complex models, add a help [popover](/components/po
 
 ### With form
 
-To collect user input within a modal, you can add a [form](/components/form).
+To collect user input within a modal, you can add a [form](/components/forms/form).
 
-To submit the form from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id.
+To enable form submission from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id.
 
 ```ts file="ModalWithForm.tsx"
 
@@ -149,7 +141,7 @@ To submit the form from a button in the modal's footer (outside of the `<Form>`)
 
 ### Custom focus
 
-Use the `elementToFocus` property to customize which element inside the Modal receives focus when initially opened.
+To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`. 
 
 ```ts file="./ModalCustomFocus.tsx"