From 13a19dc0d2019093222fa41f65225dbaca18e157 Mon Sep 17 00:00:00 2001
From: Arturo Castillo Delgado <arturo.castillo@elastic.co>
Date: Thu, 12 Dec 2024 15:51:48 +0100
Subject: [PATCH 1/3] [EuiModal] Adjust position of close button

---
 packages/eui/src/components/modal/modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/eui/src/components/modal/modal.tsx b/packages/eui/src/components/modal/modal.tsx
index 36fbdbc5c52..438d92ef4ec 100644
--- a/packages/eui/src/components/modal/modal.tsx
+++ b/packages/eui/src/components/modal/modal.tsx
@@ -104,6 +104,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
           aria-modal={true}
           {...rest}
         >
+          {children}
           <EuiI18n
             token="euiModal.closeModal"
             default="Closes this modal window"
@@ -119,7 +120,6 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
               />
             )}
           </EuiI18n>
-          {children}
         </div>
       </EuiFocusTrap>
     </EuiOverlayMask>

From 60cf5d3cfcd0423f9c9ff1fc201bb12bb1902ac6 Mon Sep 17 00:00:00 2001
From: Arturo Castillo Delgado <arturo.castillo@elastic.co>
Date: Thu, 12 Dec 2024 15:55:52 +0100
Subject: [PATCH 2/3] [EuiModal] Update snapshots

---
 .../__snapshots__/confirm_modal.test.tsx.snap | 48 +++++++++----------
 .../modal/__snapshots__/modal.test.tsx.snap   |  2 +-
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/eui/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/packages/eui/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index 8817c20828f..43c481df263 100644
--- a/packages/eui/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/packages/eui/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -18,18 +18,6 @@ exports[`EuiConfirmModal renders EuiConfirmModal 1`] = `
       role="alertdialog"
       tabindex="0"
     >
-      <button
-        aria-label="Closes this modal window"
-        class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="euiButtonIcon__icon"
-          color="inherit"
-          data-euiicon-type="cross"
-        />
-      </button>
       <div
         class="euiModalHeader emotion-euiModalHeader"
       >
@@ -90,6 +78,18 @@ exports[`EuiConfirmModal renders EuiConfirmModal 1`] = `
           </span>
         </button>
       </div>
+      <button
+        aria-label="Closes this modal window"
+        class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="euiButtonIcon__icon"
+          color="inherit"
+          data-euiicon-type="cross"
+        />
+      </button>
     </div>
   </div>,
   <div
@@ -118,18 +118,6 @@ exports[`EuiConfirmModal renders EuiConfirmModal without EuiModalBody, if empty
       role="alertdialog"
       tabindex="0"
     >
-      <button
-        aria-label="Closes this modal window"
-        class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="euiButtonIcon__icon"
-          color="inherit"
-          data-euiicon-type="cross"
-        />
-      </button>
       <div
         class="euiModalHeader emotion-euiModalHeader"
       >
@@ -174,6 +162,18 @@ exports[`EuiConfirmModal renders EuiConfirmModal without EuiModalBody, if empty
           </span>
         </button>
       </div>
+      <button
+        aria-label="Closes this modal window"
+        class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="euiButtonIcon__icon"
+          color="inherit"
+          data-euiicon-type="cross"
+        />
+      </button>
     </div>
   </div>,
   <div
diff --git a/packages/eui/src/components/modal/__snapshots__/modal.test.tsx.snap b/packages/eui/src/components/modal/__snapshots__/modal.test.tsx.snap
index 60b64fc75fa..43a3ee0b9d6 100644
--- a/packages/eui/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/packages/eui/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -24,6 +24,7 @@ exports[`EuiModal renders 1`] = `
         role="dialog"
         tabindex="0"
       >
+        children
         <button
           aria-label="Closes this modal window"
           class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
@@ -36,7 +37,6 @@ exports[`EuiModal renders 1`] = `
             data-euiicon-type="cross"
           />
         </button>
-        children
       </div>
     </div>
     <div

From 33e9fa7a6f66a307e2b6ff395e1d9219a4dbb625 Mon Sep 17 00:00:00 2001
From: Arturo Castillo Delgado <arturo.castillo@elastic.co>
Date: Thu, 12 Dec 2024 16:04:13 +0100
Subject: [PATCH 3/3] Changelog

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

diff --git a/packages/eui/changelogs/upcoming/8230.md b/packages/eui/changelogs/upcoming/8230.md
new file mode 100644
index 00000000000..aa9bd8c0460
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8230.md
@@ -0,0 +1,3 @@
+**Accessibility**
+
+- In `EuiModal` the close button is now placed last in the DOM, for correctness in reading order.