[EuiModal] Adjust position of close button, end

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.

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

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

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>