From a76a5018576c7159ec15310193e1e6b3e592bbdb Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Thu, 7 Mar 2024 19:36:08 -0600
Subject: [PATCH 01/10] Added ARIA role and modal attrs to EuiModal.

---
 src/components/modal/modal.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 18090f91a08..4fd47682482 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -43,6 +43,11 @@ export interface EuiModalProps extends HTMLAttributes<HTMLDivElement> {
    * Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node.
    */
   initialFocus?: HTMLElement | (() => HTMLElement) | string;
+  /**
+   * Identifies a modal dialog to screen readers. Modal dialogs that confirm destructive actions
+   * or need a user's attention should use "alertdialog".
+   */
+  ariaRole?: 'dialog' | 'alertdialog';
 }
 
 export const EuiModal: FunctionComponent<EuiModalProps> = ({
@@ -51,6 +56,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
   initialFocus,
   onClose,
   maxWidth = true,
+  ariaRole = 'dialog',
   style,
   ...rest
 }) => {
@@ -88,6 +94,8 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
           onKeyDown={onKeyDown}
           tabIndex={0}
           style={newStyle}
+          role={ariaRole}
+          aria-modal={true}
           {...rest}
         >
           <EuiI18n

From 315f1dcf3a0cabe24c857ad30ad5be6fe422ed01 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Thu, 7 Mar 2024 19:36:39 -0600
Subject: [PATCH 02/10] Updated Jest snapshots for a11y attrs.

---
 .../modal/__snapshots__/confirm_modal.test.tsx.snap           | 4 ++++
 src/components/modal/__snapshots__/modal.test.tsx.snap        | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index ac5c6906ba4..584687241bb 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -12,8 +12,10 @@ Array [
   >
     <div
       aria-label="aria-label"
+      aria-modal="true"
       class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-defaultMaxWidth-confirmation-euiTestCss"
       data-test-subj="test subject string"
+      role="dialog"
       tabindex="0"
     >
       <button
@@ -110,8 +112,10 @@ Array [
   >
     <div
       aria-label="aria-label"
+      aria-modal="true"
       class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-defaultMaxWidth-confirmation-euiTestCss"
       data-test-subj="test subject string"
+      role="dialog"
       tabindex="0"
     >
       <button
diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
index 522de5e7a76..60b64fc75fa 100644
--- a/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -18,8 +18,10 @@ exports[`EuiModal renders 1`] = `
     >
       <div
         aria-label="aria-label"
+        aria-modal="true"
         class="euiModal testClass1 testClass2 emotion-euiModal-defaultMaxWidth-euiTestCss"
         data-test-subj="test subject string"
+        role="dialog"
         tabindex="0"
       >
         <button

From 2afd81c92c27b9f7b5bf69f1023a800c0f4b6724 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Fri, 8 Mar 2024 09:41:08 -0600
Subject: [PATCH 03/10] Adding changelog for PR #7564.

---
 changelogs/upcoming/7564.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 changelogs/upcoming/7564.md

diff --git a/changelogs/upcoming/7564.md b/changelogs/upcoming/7564.md
new file mode 100644
index 00000000000..e5b526976f7
--- /dev/null
+++ b/changelogs/upcoming/7564.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiModal` to properly trap Safari + VoiceOver virtual cursor

From 1fe835b3373a09a70b90799ffa877a36c5f5e0d5 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Fri, 8 Mar 2024 12:15:38 -0600
Subject: [PATCH 04/10] Renaming ariaRole to match HTML attr.

---
 src/components/modal/confirm_modal.tsx | 8 +++++++-
 src/components/modal/modal.tsx         | 6 +++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/modal/confirm_modal.tsx b/src/components/modal/confirm_modal.tsx
index c20f9d7796d..1a3a848de95 100644
--- a/src/components/modal/confirm_modal.tsx
+++ b/src/components/modal/confirm_modal.tsx
@@ -138,7 +138,13 @@ export const EuiConfirmModal: FunctionComponent<EuiConfirmModalProps> = ({
   }
 
   return (
-    <EuiModal className={classes} css={cssStyles} onClose={onCancel} {...rest}>
+    <EuiModal
+      className={classes}
+      css={cssStyles}
+      onClose={onCancel}
+      role="alertdialog"
+      {...rest}
+    >
       {modalTitle}
 
       {message && (
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 4fd47682482..ffbaf9e9402 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -47,7 +47,7 @@ export interface EuiModalProps extends HTMLAttributes<HTMLDivElement> {
    * Identifies a modal dialog to screen readers. Modal dialogs that confirm destructive actions
    * or need a user's attention should use "alertdialog".
    */
-  ariaRole?: 'dialog' | 'alertdialog';
+  role?: 'dialog' | 'alertdialog';
 }
 
 export const EuiModal: FunctionComponent<EuiModalProps> = ({
@@ -56,7 +56,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
   initialFocus,
   onClose,
   maxWidth = true,
-  ariaRole = 'dialog',
+  role = 'dialog',
   style,
   ...rest
 }) => {
@@ -94,7 +94,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
           onKeyDown={onKeyDown}
           tabIndex={0}
           style={newStyle}
-          role={ariaRole}
+          role={role}
           aria-modal={true}
           {...rest}
         >

From fcee44eb91fdd252c1d4ec711d66ad55cf56bd3f Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Fri, 8 Mar 2024 12:17:06 -0600
Subject: [PATCH 05/10] Bumping two snapshot tests.

---
 .../modal/__snapshots__/confirm_modal.test.tsx.snap           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index 584687241bb..279e2aa4019 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -15,7 +15,7 @@ Array [
       aria-modal="true"
       class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-defaultMaxWidth-confirmation-euiTestCss"
       data-test-subj="test subject string"
-      role="dialog"
+      role="alertdialog"
       tabindex="0"
     >
       <button
@@ -115,7 +115,7 @@ Array [
       aria-modal="true"
       class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-defaultMaxWidth-confirmation-euiTestCss"
       data-test-subj="test subject string"
-      role="dialog"
+      role="alertdialog"
       tabindex="0"
     >
       <button

From 52622ce290f01344321ed0986f0007214b288e94 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Fri, 8 Mar 2024 12:56:14 -0600
Subject: [PATCH 06/10] Adding aria-labels to example modals.

---
 src-docs/src/views/modal/confirm_modal.tsx         | 2 ++
 src-docs/src/views/modal/confirm_modal_loading.tsx | 1 +
 src-docs/src/views/modal/modal.tsx                 | 2 +-
 src-docs/src/views/modal/modal_form.tsx            | 6 +++++-
 src-docs/src/views/modal/modal_width.tsx           | 6 +++++-
 5 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/views/modal/confirm_modal.tsx b/src-docs/src/views/modal/confirm_modal.tsx
index ea7b94008ee..cb780c9613d 100644
--- a/src-docs/src/views/modal/confirm_modal.tsx
+++ b/src-docs/src/views/modal/confirm_modal.tsx
@@ -22,6 +22,7 @@ export default () => {
   if (isModalVisible) {
     modal = (
       <EuiConfirmModal
+        aria-label="EuiModal confirm example"
         style={{ width: 600 }}
         title="Update subscription to Platinum?"
         onCancel={closeModal}
@@ -44,6 +45,7 @@ export default () => {
   if (isDestroyModalVisible) {
     destroyModal = (
       <EuiConfirmModal
+        aria-label="EuiModal confirm example two"
         title="Discard dashboard changes?"
         onCancel={closeDestroyModal}
         onConfirm={closeDestroyModal}
diff --git a/src-docs/src/views/modal/confirm_modal_loading.tsx b/src-docs/src/views/modal/confirm_modal_loading.tsx
index 86214b49fb2..9f64d2afe88 100644
--- a/src-docs/src/views/modal/confirm_modal_loading.tsx
+++ b/src-docs/src/views/modal/confirm_modal_loading.tsx
@@ -41,6 +41,7 @@ export default () => {
   if (isModalVisible) {
     modal = (
       <EuiConfirmModal
+        aria-label="EuiModal confirm loading"
         title="Delete the EUI repo?"
         onCancel={closeModal}
         onConfirm={() => {
diff --git a/src-docs/src/views/modal/modal.tsx b/src-docs/src/views/modal/modal.tsx
index 78ec5578e2b..f639f90dcd0 100644
--- a/src-docs/src/views/modal/modal.tsx
+++ b/src-docs/src/views/modal/modal.tsx
@@ -21,7 +21,7 @@ export default () => {
 
   if (isModalVisible) {
     modal = (
-      <EuiModal onClose={closeModal}>
+      <EuiModal aria-label="EuiModal example" onClose={closeModal}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>
diff --git a/src-docs/src/views/modal/modal_form.tsx b/src-docs/src/views/modal/modal_form.tsx
index bdf037a15c2..5fee41b9c17 100644
--- a/src-docs/src/views/modal/modal_form.tsx
+++ b/src-docs/src/views/modal/modal_form.tsx
@@ -113,7 +113,11 @@ export default () => {
 
   if (isModalVisible) {
     modal = (
-      <EuiModal onClose={closeModal} initialFocus="[name=popswitch]">
+      <EuiModal
+        aria-label="EuiModal form example"
+        onClose={closeModal}
+        initialFocus="[name=popswitch]"
+      >
         <EuiModalHeader>
           <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>
diff --git a/src-docs/src/views/modal/modal_width.tsx b/src-docs/src/views/modal/modal_width.tsx
index 9896b72352d..a1d1149890a 100644
--- a/src-docs/src/views/modal/modal_width.tsx
+++ b/src-docs/src/views/modal/modal_width.tsx
@@ -21,7 +21,11 @@ export default () => {
 
   if (isModalVisible) {
     modal = (
-      <EuiModal style={{ width: 800 }} onClose={closeModal}>
+      <EuiModal
+        aria-label="EuiModal modal width"
+        style={{ width: 800 }}
+        onClose={closeModal}
+      >
         <EuiModalHeader>
           <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>

From 322324417b87a1ca3986d0fd2d38093866882d81 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Mon, 11 Mar 2024 10:42:43 -0500
Subject: [PATCH 07/10] Added id to EuiModalHeaderTitleProps for
 aria-labelledby relationship to heading.

---
 src-docs/src/views/modal/confirm_modal.tsx         | 8 ++++++--
 src-docs/src/views/modal/confirm_modal_loading.tsx | 4 +++-
 src-docs/src/views/modal/modal.tsx                 | 6 ++++--
 src-docs/src/views/modal/modal_form.tsx            | 6 ++++--
 src-docs/src/views/modal/modal_width.tsx           | 6 ++++--
 src/components/modal/modal_header_title.tsx        | 1 +
 6 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src-docs/src/views/modal/confirm_modal.tsx b/src-docs/src/views/modal/confirm_modal.tsx
index cb780c9613d..ddb74060538 100644
--- a/src-docs/src/views/modal/confirm_modal.tsx
+++ b/src-docs/src/views/modal/confirm_modal.tsx
@@ -18,13 +18,15 @@ export default () => {
   const showDestroyModal = () => setIsDestroyModalVisible(true);
 
   let modal;
+  const confirmTitleProps = { id: 'euiModal-confirmModalExample' };
 
   if (isModalVisible) {
     modal = (
       <EuiConfirmModal
-        aria-label="EuiModal confirm example"
+        aria-labelledby="euiModal-confirmModalExample"
         style={{ width: 600 }}
         title="Update subscription to Platinum?"
+        titleProps={confirmTitleProps}
         onCancel={closeModal}
         onConfirm={closeModal}
         cancelButtonText="Cancel"
@@ -41,12 +43,14 @@ export default () => {
   }
 
   let destroyModal;
+  const destroyTitleProps = { id: 'euiModal-destroyModalExample' };
 
   if (isDestroyModalVisible) {
     destroyModal = (
       <EuiConfirmModal
-        aria-label="EuiModal confirm example two"
+        aria-labelledby="euiModal-destroyModalExample"
         title="Discard dashboard changes?"
+        titleProps={destroyTitleProps}
         onCancel={closeDestroyModal}
         onConfirm={closeDestroyModal}
         cancelButtonText="Keep editing"
diff --git a/src-docs/src/views/modal/confirm_modal_loading.tsx b/src-docs/src/views/modal/confirm_modal_loading.tsx
index 9f64d2afe88..91f661aaa6b 100644
--- a/src-docs/src/views/modal/confirm_modal_loading.tsx
+++ b/src-docs/src/views/modal/confirm_modal_loading.tsx
@@ -37,12 +37,14 @@ export default () => {
   };
 
   let modal;
+  const confirmTitleProps = { id: 'euiModal-confirmLoadingExample' };
 
   if (isModalVisible) {
     modal = (
       <EuiConfirmModal
-        aria-label="EuiModal confirm loading"
+        aria-labelledby="euiModal-confirmLoadingExample"
         title="Delete the EUI repo?"
+        titleProps={confirmTitleProps}
         onCancel={closeModal}
         onConfirm={() => {
           closeModal();
diff --git a/src-docs/src/views/modal/modal.tsx b/src-docs/src/views/modal/modal.tsx
index f639f90dcd0..d85a34a8a94 100644
--- a/src-docs/src/views/modal/modal.tsx
+++ b/src-docs/src/views/modal/modal.tsx
@@ -21,9 +21,11 @@ export default () => {
 
   if (isModalVisible) {
     modal = (
-      <EuiModal aria-label="EuiModal example" onClose={closeModal}>
+      <EuiModal aria-labelledby="euiModal-example" onClose={closeModal}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle id="euiModal-example">
+            Modal title
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
diff --git a/src-docs/src/views/modal/modal_form.tsx b/src-docs/src/views/modal/modal_form.tsx
index 5fee41b9c17..1e77b853895 100644
--- a/src-docs/src/views/modal/modal_form.tsx
+++ b/src-docs/src/views/modal/modal_form.tsx
@@ -114,12 +114,14 @@ export default () => {
   if (isModalVisible) {
     modal = (
       <EuiModal
-        aria-label="EuiModal form example"
+        aria-labelledby="euiModal-formExample"
         onClose={closeModal}
         initialFocus="[name=popswitch]"
       >
         <EuiModalHeader>
-          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle id="euiModal-formExample">
+            Modal title
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>{formSample}</EuiModalBody>
diff --git a/src-docs/src/views/modal/modal_width.tsx b/src-docs/src/views/modal/modal_width.tsx
index a1d1149890a..07123c9b1fa 100644
--- a/src-docs/src/views/modal/modal_width.tsx
+++ b/src-docs/src/views/modal/modal_width.tsx
@@ -22,12 +22,14 @@ export default () => {
   if (isModalVisible) {
     modal = (
       <EuiModal
-        aria-label="EuiModal modal width"
+        aria-labelledby="euiModal-widthExample"
         style={{ width: 800 }}
         onClose={closeModal}
       >
         <EuiModalHeader>
-          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle id="euiModal-widthExample">
+            Modal title
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
diff --git a/src/components/modal/modal_header_title.tsx b/src/components/modal/modal_header_title.tsx
index 2ea2cb70970..496c7a8e184 100644
--- a/src/components/modal/modal_header_title.tsx
+++ b/src/components/modal/modal_header_title.tsx
@@ -20,6 +20,7 @@ export type EuiModalHeaderTitleProps = FunctionComponent<
        * @default h1
        */
       component?: ElementType;
+      id?: String;
     }
 >;
 

From 525b314aa9b83541fa0a2c556d4b597936826ea5 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 11 Mar 2024 13:22:40 -0700
Subject: [PATCH 08/10] changelog copy tweaks

---
 changelogs/upcoming/7564.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/changelogs/upcoming/7564.md b/changelogs/upcoming/7564.md
index e5b526976f7..c65b672ceee 100644
--- a/changelogs/upcoming/7564.md
+++ b/changelogs/upcoming/7564.md
@@ -1,3 +1,5 @@
-**Bug fixes**
+**Accessibility**
 
-- Fixed `EuiModal` to properly trap Safari + VoiceOver virtual cursor
+- Updated `EuiModal` to set an `aria-modal` attribute and a default `dialog` role
+- Updated `EuiConfirmModal` to set a default `alertdialog` role
+- Fixed `EuiModal` and `EuiConfirmModal` to properly trap Safari+VoiceOver's virtual cursor

From 10d59cdf692e8b4b0a107d605ac6239cad30b93a Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 11 Mar 2024 13:27:07 -0700
Subject: [PATCH 09/10] [PR feedback] Remove unnecessary type

- already inherited from `HTMLAttributes`
---
 src/components/modal/modal_header_title.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/modal/modal_header_title.tsx b/src/components/modal/modal_header_title.tsx
index 496c7a8e184..2ea2cb70970 100644
--- a/src/components/modal/modal_header_title.tsx
+++ b/src/components/modal/modal_header_title.tsx
@@ -20,7 +20,6 @@ export type EuiModalHeaderTitleProps = FunctionComponent<
        * @default h1
        */
       component?: ElementType;
-      id?: String;
     }
 >;
 

From 9e9cffa4692598a72e475953868a62af988cf1ab Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 11 Mar 2024 13:47:50 -0700
Subject: [PATCH 10/10] Docs pass

- use generator ID util instead of static strings

- misc cleanup - replace `<div>`s with fragments, replace `let` jsx with inline conditional JSX
---
 src-docs/src/views/modal/confirm_modal.tsx    |  90 ++++-----
 .../src/views/modal/confirm_modal_loading.tsx |  67 ++++---
 src-docs/src/views/modal/modal.tsx            |  64 ++++---
 src-docs/src/views/modal/modal_example.js     |  16 +-
 src-docs/src/views/modal/modal_form.tsx       | 175 +++++++++---------
 src-docs/src/views/modal/modal_width.tsx      |  68 ++++---
 6 files changed, 237 insertions(+), 243 deletions(-)

diff --git a/src-docs/src/views/modal/confirm_modal.tsx b/src-docs/src/views/modal/confirm_modal.tsx
index ddb74060538..07fd5ae9900 100644
--- a/src-docs/src/views/modal/confirm_modal.tsx
+++ b/src-docs/src/views/modal/confirm_modal.tsx
@@ -5,6 +5,7 @@ import {
   EuiConfirmModal,
   EuiFlexGroup,
   EuiFlexItem,
+  useGeneratedHtmlId,
 } from '../../../../src';
 
 export default () => {
@@ -17,54 +18,11 @@ export default () => {
   const closeDestroyModal = () => setIsDestroyModalVisible(false);
   const showDestroyModal = () => setIsDestroyModalVisible(true);
 
-  let modal;
-  const confirmTitleProps = { id: 'euiModal-confirmModalExample' };
-
-  if (isModalVisible) {
-    modal = (
-      <EuiConfirmModal
-        aria-labelledby="euiModal-confirmModalExample"
-        style={{ width: 600 }}
-        title="Update subscription to Platinum?"
-        titleProps={confirmTitleProps}
-        onCancel={closeModal}
-        onConfirm={closeModal}
-        cancelButtonText="Cancel"
-        confirmButtonText="Update subscription"
-        defaultFocusedButton="confirm"
-      >
-        <p>
-          Your subscription and benefits increase immediately. If you change to
-          a lower subscription later, it will not take affect until the next
-          billing cycle.
-        </p>
-      </EuiConfirmModal>
-    );
-  }
-
-  let destroyModal;
-  const destroyTitleProps = { id: 'euiModal-destroyModalExample' };
-
-  if (isDestroyModalVisible) {
-    destroyModal = (
-      <EuiConfirmModal
-        aria-labelledby="euiModal-destroyModalExample"
-        title="Discard dashboard changes?"
-        titleProps={destroyTitleProps}
-        onCancel={closeDestroyModal}
-        onConfirm={closeDestroyModal}
-        cancelButtonText="Keep editing"
-        confirmButtonText="Discard changes"
-        buttonColor="danger"
-        defaultFocusedButton="confirm"
-      >
-        <p>You will lose all unsaved changes made to this dashboard.</p>
-      </EuiConfirmModal>
-    );
-  }
+  const modalTitleId = useGeneratedHtmlId();
+  const destroyModalTitleId = useGeneratedHtmlId();
 
   return (
-    <div>
+    <>
       <EuiFlexGroup responsive={false} wrap gutterSize="xs">
         <EuiFlexItem grow={false}>
           <EuiButton onClick={showModal}>Show confirm modal</EuiButton>
@@ -75,8 +33,42 @@ export default () => {
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
-      {modal}
-      {destroyModal}
-    </div>
+
+      {isModalVisible && (
+        <EuiConfirmModal
+          aria-labelledby={modalTitleId}
+          style={{ width: 600 }}
+          title="Update subscription to Platinum?"
+          titleProps={{ id: modalTitleId }}
+          onCancel={closeModal}
+          onConfirm={closeModal}
+          cancelButtonText="Cancel"
+          confirmButtonText="Update subscription"
+          defaultFocusedButton="confirm"
+        >
+          <p>
+            Your subscription and benefits increase immediately. If you change
+            to a lower subscription later, it will not take affect until the
+            next billing cycle.
+          </p>
+        </EuiConfirmModal>
+      )}
+
+      {isDestroyModalVisible && (
+        <EuiConfirmModal
+          aria-labelledby={destroyModalTitleId}
+          title="Discard dashboard changes?"
+          titleProps={{ id: destroyModalTitleId }}
+          onCancel={closeDestroyModal}
+          onConfirm={closeDestroyModal}
+          cancelButtonText="Keep editing"
+          confirmButtonText="Discard changes"
+          buttonColor="danger"
+          defaultFocusedButton="confirm"
+        >
+          <p>You will lose all unsaved changes made to this dashboard.</p>
+        </EuiConfirmModal>
+      )}
+    </>
   );
 };
diff --git a/src-docs/src/views/modal/confirm_modal_loading.tsx b/src-docs/src/views/modal/confirm_modal_loading.tsx
index 91f661aaa6b..d49b6797d5d 100644
--- a/src-docs/src/views/modal/confirm_modal_loading.tsx
+++ b/src-docs/src/views/modal/confirm_modal_loading.tsx
@@ -5,6 +5,7 @@ import {
   EuiConfirmModal,
   EuiFormRow,
   EuiFieldText,
+  useGeneratedHtmlId,
 } from '../../../../src';
 
 export default () => {
@@ -36,43 +37,39 @@ export default () => {
     setValue(e.target.value);
   };
 
-  let modal;
-  const confirmTitleProps = { id: 'euiModal-confirmLoadingExample' };
-
-  if (isModalVisible) {
-    modal = (
-      <EuiConfirmModal
-        aria-labelledby="euiModal-confirmLoadingExample"
-        title="Delete the EUI repo?"
-        titleProps={confirmTitleProps}
-        onCancel={closeModal}
-        onConfirm={() => {
-          closeModal();
-          window.alert('Shame on you!');
-        }}
-        confirmButtonText="Delete"
-        cancelButtonText="Cancel"
-        buttonColor="danger"
-        initialFocus="[name=delete]"
-        confirmButtonDisabled={value.toLowerCase() !== 'delete'}
-        isLoading={isLoading}
-      >
-        <EuiFormRow label="Type the word 'delete' to confirm">
-          <EuiFieldText
-            name="delete"
-            isLoading={isLoading}
-            value={value}
-            onChange={onChange}
-          />
-        </EuiFormRow>
-      </EuiConfirmModal>
-    );
-  }
+  const modalTitleId = useGeneratedHtmlId();
 
   return (
-    <div>
+    <>
       <EuiButton onClick={showModal}>Show loading confirm modal</EuiButton>
-      {modal}
-    </div>
+
+      {isModalVisible && (
+        <EuiConfirmModal
+          aria-labelledby={modalTitleId}
+          title="Delete the EUI repo?"
+          titleProps={{ id: modalTitleId }}
+          onCancel={closeModal}
+          onConfirm={() => {
+            closeModal();
+            window.alert('Shame on you!');
+          }}
+          confirmButtonText="Delete"
+          cancelButtonText="Cancel"
+          buttonColor="danger"
+          initialFocus="[name=delete]"
+          confirmButtonDisabled={value.toLowerCase() !== 'delete'}
+          isLoading={isLoading}
+        >
+          <EuiFormRow label="Type the word 'delete' to confirm">
+            <EuiFieldText
+              name="delete"
+              isLoading={isLoading}
+              value={value}
+              onChange={onChange}
+            />
+          </EuiFormRow>
+        </EuiConfirmModal>
+      )}
+    </>
   );
 };
diff --git a/src-docs/src/views/modal/modal.tsx b/src-docs/src/views/modal/modal.tsx
index d85a34a8a94..b59de46465d 100644
--- a/src-docs/src/views/modal/modal.tsx
+++ b/src-docs/src/views/modal/modal.tsx
@@ -8,8 +8,9 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiCodeBlock,
-} from '../../../../src/components';
-import { EuiSpacer } from '../../../../src/components/spacer';
+  EuiSpacer,
+  useGeneratedHtmlId,
+} from '../../../../src';
 
 export default () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -17,24 +18,27 @@ export default () => {
   const closeModal = () => setIsModalVisible(false);
   const showModal = () => setIsModalVisible(true);
 
-  let modal;
+  const modalTitleId = useGeneratedHtmlId();
 
-  if (isModalVisible) {
-    modal = (
-      <EuiModal aria-labelledby="euiModal-example" onClose={closeModal}>
-        <EuiModalHeader>
-          <EuiModalHeaderTitle id="euiModal-example">
-            Modal title
-          </EuiModalHeaderTitle>
-        </EuiModalHeader>
+  return (
+    <>
+      <EuiButton onClick={showModal}>Show modal</EuiButton>
+
+      {isModalVisible && (
+        <EuiModal aria-labelledby={modalTitleId} onClose={closeModal}>
+          <EuiModalHeader>
+            <EuiModalHeaderTitle id={modalTitleId}>
+              Modal title
+            </EuiModalHeaderTitle>
+          </EuiModalHeader>
 
-        <EuiModalBody>
-          This modal has the following setup:
-          <EuiSpacer />
-          <EuiCodeBlock language="html" isCopyable>
-            {`<EuiModal onClose={closeModal}>
+          <EuiModalBody>
+            This modal has the following setup:
+            <EuiSpacer />
+            <EuiCodeBlock language="html" isCopyable>
+              {`<EuiModal aria-labelledby={titleId} onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle title={titleId}><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>
@@ -47,22 +51,16 @@ export default () => {
     </EuiButton>
   </EuiModalFooter>
 </EuiModal>`}
-          </EuiCodeBlock>
-        </EuiModalBody>
+            </EuiCodeBlock>
+          </EuiModalBody>
 
-        <EuiModalFooter>
-          <EuiButton onClick={closeModal} fill>
-            Close
-          </EuiButton>
-        </EuiModalFooter>
-      </EuiModal>
-    );
-  }
-
-  return (
-    <div>
-      <EuiButton onClick={showModal}>Show modal</EuiButton>
-      {modal}
-    </div>
+          <EuiModalFooter>
+            <EuiButton onClick={closeModal} fill>
+              Close
+            </EuiButton>
+          </EuiModalFooter>
+        </EuiModal>
+      )}
+    </>
   );
 };
diff --git a/src-docs/src/views/modal/modal_example.js b/src-docs/src/views/modal/modal_example.js
index ef6a3d5d839..cd741dfe10d 100644
--- a/src-docs/src/views/modal/modal_example.js
+++ b/src-docs/src/views/modal/modal_example.js
@@ -30,9 +30,9 @@ const confirmModalLoadingSource = require('!!raw-loader!./confirm_modal_loading'
 import ModalWidth from './modal_width';
 const modalWidthSource = require('!!raw-loader!./modal_width');
 
-const modalSnippet = `<EuiModal onClose={closeModal}>
+const modalSnippet = `<EuiModal aria-labelledby={titleId} onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle id={titleId}><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>
@@ -44,9 +44,9 @@ const modalSnippet = `<EuiModal onClose={closeModal}>
   </EuiModalFooter>
 </EuiModal>`;
 
-const modalWidthSnippet = `<EuiModal style={{ width: 800 }} onClose={closeModal}>
+const modalWidthSnippet = `<EuiModal style={{ width: 800 }} aria-labelledby={titleId} onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle id={titleId}><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>
@@ -58,9 +58,9 @@ const modalWidthSnippet = `<EuiModal style={{ width: 800 }} onClose={closeModal}
   </EuiModalFooter>
 </EuiModal>`;
 
-const modalFormSnippet = `<EuiModal onClose={closeModal}>
+const modalFormSnippet = `<EuiModal aria-labelledby={titleId} onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle id={titleId><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>
@@ -75,7 +75,9 @@ const modalFormSnippet = `<EuiModal onClose={closeModal}>
 
 const confirmModalSnippet = [
   `<EuiConfirmModal
+  aria-labelledby={titleId}
   title={title}
+  titleProps={{ id: titleId }}
   onCancel={closeModal}
   onConfirm={closeModal}
   cancelButtonText={cancelText}
@@ -95,7 +97,9 @@ const confirmModalSnippet = [
 
 const confirmModalLoadingSnippet = [
   `<EuiConfirmModal
+  aria-labelledby={titleId}
   title={title}
+  id={{ id: titleId }}
   onCancel={closeModal}
   onConfirm={closeModal}
   cancelButtonText={cancelText}
diff --git a/src-docs/src/views/modal/modal_form.tsx b/src-docs/src/views/modal/modal_form.tsx
index 1e77b853895..e71254cf994 100644
--- a/src-docs/src/views/modal/modal_form.tsx
+++ b/src-docs/src/views/modal/modal_form.tsx
@@ -5,6 +5,7 @@ import {
   EuiButtonEmpty,
   EuiFieldText,
   EuiForm,
+  type EuiFormProps,
   EuiFormRow,
   EuiModal,
   EuiModalBody,
@@ -15,66 +16,62 @@ import {
   EuiSwitch,
   EuiSuperSelect,
   EuiText,
+  useGeneratedHtmlId,
 } from '../../../../src';
 
-import { useGeneratedHtmlId } from '../../../../src/services';
-
-export default () => {
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [isSwitchChecked, setIsSwitchChecked] = useState(true);
-  const [superSelectvalue, setSuperSelectValue] = useState('option_one');
-
-  const modalFormId = useGeneratedHtmlId({ prefix: 'modalForm' });
+const superSelectOptions = [
+  {
+    value: 'option_one',
+    inputDisplay: 'Option one',
+    dropdownDisplay: (
+      <>
+        <strong>Option one</strong>
+        <EuiText size="s" color="subdued">
+          <p>Has a short description giving more detail to the option.</p>
+        </EuiText>
+      </>
+    ),
+  },
+  {
+    value: 'option_two',
+    inputDisplay: 'Option two',
+    dropdownDisplay: (
+      <>
+        <strong>Option two</strong>
+        <EuiText size="s" color="subdued">
+          <p>Has a short description giving more detail to the option.</p>
+        </EuiText>
+      </>
+    ),
+  },
+  {
+    value: 'option_three',
+    inputDisplay: 'Option three',
+    dropdownDisplay: (
+      <>
+        <strong>Option three</strong>
+        <EuiText size="s" color="subdued">
+          <p>Has a short description giving more detail to the option.</p>
+        </EuiText>
+      </>
+    ),
+  },
+];
+
+const ExampleForm = ({ id }: Partial<EuiFormProps>) => {
   const modalFormSwitchId = useGeneratedHtmlId({ prefix: 'modalFormSwitch' });
 
+  const [isSwitchChecked, setIsSwitchChecked] = useState(true);
   const onSwitchChange = () =>
     setIsSwitchChecked((isSwitchChecked) => !isSwitchChecked);
 
-  const closeModal = () => setIsModalVisible(false);
-
-  const showModal = () => setIsModalVisible(true);
+  const [superSelectvalue, setSuperSelectValue] = useState('option_one');
+  const onSuperSelectChange = (value: string) => {
+    setSuperSelectValue(value);
+  };
 
-  const superSelectOptions = [
-    {
-      value: 'option_one',
-      inputDisplay: 'Option one',
-      dropdownDisplay: (
-        <>
-          <strong>Option one</strong>
-          <EuiText size="s" color="subdued">
-            <p>Has a short description giving more detail to the option.</p>
-          </EuiText>
-        </>
-      ),
-    },
-    {
-      value: 'option_two',
-      inputDisplay: 'Option two',
-      dropdownDisplay: (
-        <>
-          <strong>Option two</strong>
-          <EuiText size="s" color="subdued">
-            <p>Has a short description giving more detail to the option.</p>
-          </EuiText>
-        </>
-      ),
-    },
-    {
-      value: 'option_three',
-      inputDisplay: 'Option three',
-      dropdownDisplay: (
-        <>
-          <strong>Option three</strong>
-          <EuiText size="s" color="subdued">
-            <p>Has a short description giving more detail to the option.</p>
-          </EuiText>
-        </>
-      ),
-    },
-  ];
-
-  const formSample = (
-    <EuiForm id={modalFormId} component="form">
+  return (
+    <EuiForm id={id} component="form">
       <EuiFormRow>
         <EuiSwitch
           id={modalFormSwitchId}
@@ -104,42 +101,50 @@ export default () => {
       </EuiFormRow>
     </EuiForm>
   );
+};
 
-  const onSuperSelectChange = (value: string) => {
-    setSuperSelectValue(value);
-  };
+export default () => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const closeModal = () => setIsModalVisible(false);
+  const showModal = () => setIsModalVisible(true);
+
+  const modalFormId = useGeneratedHtmlId({ prefix: 'modalForm' });
+  const modalTitleId = useGeneratedHtmlId();
 
-  let modal;
-
-  if (isModalVisible) {
-    modal = (
-      <EuiModal
-        aria-labelledby="euiModal-formExample"
-        onClose={closeModal}
-        initialFocus="[name=popswitch]"
-      >
-        <EuiModalHeader>
-          <EuiModalHeaderTitle id="euiModal-formExample">
-            Modal title
-          </EuiModalHeaderTitle>
-        </EuiModalHeader>
-
-        <EuiModalBody>{formSample}</EuiModalBody>
-
-        <EuiModalFooter>
-          <EuiButtonEmpty onClick={closeModal}>Cancel</EuiButtonEmpty>
-
-          <EuiButton type="submit" form={modalFormId} onClick={closeModal} fill>
-            Save
-          </EuiButton>
-        </EuiModalFooter>
-      </EuiModal>
-    );
-  }
   return (
-    <div>
+    <>
       <EuiButton onClick={showModal}>Show form modal</EuiButton>
-      {modal}
-    </div>
+
+      {isModalVisible && (
+        <EuiModal
+          aria-labelledby={modalTitleId}
+          onClose={closeModal}
+          initialFocus="[name=popswitch]"
+        >
+          <EuiModalHeader>
+            <EuiModalHeaderTitle id={modalTitleId}>
+              Modal title
+            </EuiModalHeaderTitle>
+          </EuiModalHeader>
+
+          <EuiModalBody>
+            <ExampleForm id={modalFormId} />
+          </EuiModalBody>
+
+          <EuiModalFooter>
+            <EuiButtonEmpty onClick={closeModal}>Cancel</EuiButtonEmpty>
+
+            <EuiButton
+              type="submit"
+              form={modalFormId}
+              onClick={closeModal}
+              fill
+            >
+              Save
+            </EuiButton>
+          </EuiModalFooter>
+        </EuiModal>
+      )}
+    </>
   );
 };
diff --git a/src-docs/src/views/modal/modal_width.tsx b/src-docs/src/views/modal/modal_width.tsx
index 07123c9b1fa..20e09ab9e57 100644
--- a/src-docs/src/views/modal/modal_width.tsx
+++ b/src-docs/src/views/modal/modal_width.tsx
@@ -9,6 +9,7 @@ import {
   EuiModalHeaderTitle,
   EuiCodeBlock,
   EuiSpacer,
+  useGeneratedHtmlId,
 } from '../../../../src';
 
 export default () => {
@@ -17,28 +18,31 @@ export default () => {
   const closeModal = () => setIsModalVisible(false);
   const showModal = () => setIsModalVisible(true);
 
-  let modal;
+  const modalTitle = useGeneratedHtmlId();
 
-  if (isModalVisible) {
-    modal = (
-      <EuiModal
-        aria-labelledby="euiModal-widthExample"
-        style={{ width: 800 }}
-        onClose={closeModal}
-      >
-        <EuiModalHeader>
-          <EuiModalHeaderTitle id="euiModal-widthExample">
-            Modal title
-          </EuiModalHeaderTitle>
-        </EuiModalHeader>
+  return (
+    <>
+      <EuiButton onClick={showModal}>Show modal with custom width</EuiButton>
+
+      {isModalVisible && (
+        <EuiModal
+          aria-labelledby={modalTitle}
+          style={{ width: 800 }}
+          onClose={closeModal}
+        >
+          <EuiModalHeader>
+            <EuiModalHeaderTitle id={modalTitle}>
+              Modal title
+            </EuiModalHeaderTitle>
+          </EuiModalHeader>
 
-        <EuiModalBody>
-          This modal has the following setup:
-          <EuiSpacer />
-          <EuiCodeBlock language="html" isCopyable>
-            {`<EuiModal style={{ width: 800 }} onClose={closeModal}>
+          <EuiModalBody>
+            This modal has the following setup:
+            <EuiSpacer />
+            <EuiCodeBlock language="html" isCopyable>
+              {`<EuiModal aria-labelledby={titleId} style={{ width: 800 }} onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle id={titleId}><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>
@@ -51,22 +55,16 @@ export default () => {
     </EuiButton>
   </EuiModalFooter>
 </EuiModal>`}
-          </EuiCodeBlock>
-        </EuiModalBody>
+            </EuiCodeBlock>
+          </EuiModalBody>
 
-        <EuiModalFooter>
-          <EuiButton onClick={closeModal} fill>
-            Close
-          </EuiButton>
-        </EuiModalFooter>
-      </EuiModal>
-    );
-  }
-
-  return (
-    <div>
-      <EuiButton onClick={showModal}>Show modal with custom width</EuiButton>
-      {modal}
-    </div>
+          <EuiModalFooter>
+            <EuiButton onClick={closeModal} fill>
+              Close
+            </EuiButton>
+          </EuiModalFooter>
+        </EuiModal>
+      )}
+    </>
   );
 };