[EuiModal] Adjust position of close button

packages/eui/changelogs/upcoming/8202.md

@@ -0,0 +1,3 @@
+**Accessibility**
+
+- In `EuiModal` the close button is now placed **after** the header, in the DOM, for correctness in reading order.

packages/eui/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap

@@ -18,6 +18,16 @@ exports[`EuiConfirmModal renders EuiConfirmModal 1`] = `
       role="alertdialog"
       tabindex="0"
     >
+      <div
+        class="euiModalHeader emotion-euiModalHeader"
+      >
+        <h1
+          class="euiTitle euiModalHeader__title emotion-euiTitle-m"
+          data-test-subj="confirmModalTitleText"
+        >
+          A confirmation modal
+        </h1>
+      </div>
       <button
         aria-label="Closes this modal window"
         class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
@@ -30,16 +40,6 @@ exports[`EuiConfirmModal renders EuiConfirmModal 1`] = `
           data-euiicon-type="cross"
         />
       </button>
-      <div
-        class="euiModalHeader emotion-euiModalHeader"
-      >
-        <h1
-          class="euiTitle euiModalHeader__title emotion-euiTitle-m"
-          data-test-subj="confirmModalTitleText"
-        >
-          A confirmation modal
-        </h1>
-      </div>
       <div
         class="euiModalBody emotion-euiModalBody"
       >
@@ -118,6 +118,16 @@ exports[`EuiConfirmModal renders EuiConfirmModal without EuiModalBody, if empty
       role="alertdialog"
       tabindex="0"
     >
+      <div
+        class="euiModalHeader emotion-euiModalHeader"
+      >
+        <h1
+          class="euiTitle euiModalHeader__title emotion-euiTitle-m"
+          data-test-subj="confirmModalTitleText"
+        >
+          A confirmation modal
+        </h1>
+      </div>
       <button
         aria-label="Closes this modal window"
         class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
@@ -130,16 +140,6 @@ exports[`EuiConfirmModal renders EuiConfirmModal without EuiModalBody, if empty
           data-euiicon-type="cross"
         />
       </button>
-      <div
-        class="euiModalHeader emotion-euiModalHeader"
-      >
-        <h1
-          class="euiTitle euiModalHeader__title emotion-euiTitle-m"
-          data-test-subj="confirmModalTitleText"
-        >
-          A confirmation modal
-        </h1>
-      </div>
       <div
         class="euiModalFooter emotion-euiModalFooter"
       >

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.test.tsx

@@ -12,6 +12,7 @@ import { requiredProps } from '../../test';
 import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiModal } from './modal';
+import { EuiHeader } from '../header';
 
 describe('EuiModal', () => {
   shouldRenderCustomStyles(<EuiModal onClose={() => {}}>children</EuiModal>);
@@ -80,4 +81,16 @@ describe('EuiModal', () => {
       expect(modalB.getAttribute('style')).toEqual('max-inline-size: 50%;');
     });
   });
+
+  test('button is placed after header', () => {
+    const { getByTestSubject } = render(
+      <EuiModal onClose={() => null}>
+        <EuiHeader data-test-subj="header">Title</EuiHeader>
+        children
+      </EuiModal>
+    );
+
+    const header = getByTestSubject('header');
+    expect(header.nextElementSibling?.tagName).toBe('BUTTON');
+  });
 });

packages/eui/src/components/modal/modal.tsx

@@ -6,13 +6,20 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
+import React, {
+  FunctionComponent,
+  ReactNode,
+  ReactElement,
+  HTMLAttributes,
+  Children,
+} from 'react';
 import classnames from 'classnames';
 
 import { keys, useEuiTheme } from '../../services';
 import { isDOMNode } from '../../utils';
 
 import { EuiButtonIcon } from '../button';
+import { EuiModalHeader } from './modal_header';
 
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
@@ -91,6 +98,39 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
 
   const cssCloseIconStyles = [styles.euiModal__closeIcon];
 
+  const closeButton = (
+    <EuiI18n
+      token="euiModal.closeModal"
+      default="Closes this modal window"
+      key="closeButton"
+    >
+      {(closeModal: string) => (
+        <EuiButtonIcon
+          iconType="cross"
+          onClick={onClose}
+          css={cssCloseIconStyles}
+          className="euiModal__closeIcon"
+          color="text"
+          aria-label={closeModal}
+        />
+      )}
+    </EuiI18n>
+  );
+
+  // Note: for accessibility reasons we need the close button
+  // to be placed **after** the header, so screen reader users will
+  // know _what_ they're closing before they reach the button
+  // https://github.com/elastic/eui/pull/7156#discussion_r1334931714
+  const childrenArray = Children.toArray(children);
+  const headerIndex = childrenArray.findIndex(
+    (child) => (child as ReactElement).type === EuiModalHeader
+  );
+  if (headerIndex > -1) {
+    childrenArray.splice(headerIndex + 1, 0, closeButton);
+  } else {
+    childrenArray.push(closeButton);
+  }
+
   return (
     <EuiOverlayMask>
       <EuiFocusTrap initialFocus={initialFocus} scrollLock preventScrollOnFocus>
@@ -104,22 +144,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
           aria-modal={true}
           {...rest}
         >
-          <EuiI18n
-            token="euiModal.closeModal"
-            default="Closes this modal window"
-          >
-            {(closeModal: string) => (
-              <EuiButtonIcon
-                iconType="cross"
-                onClick={onClose}
-                css={cssCloseIconStyles}
-                className="euiModal__closeIcon"
-                color="text"
-                aria-label={closeModal}
-              />
-            )}
-          </EuiI18n>
-          {children}
+          {childrenArray}
         </div>
       </EuiFocusTrap>
     </EuiOverlayMask>