From f9ff62ea59e9b368751492bec3260ecef0413cc7 Mon Sep 17 00:00:00 2001
From: Trevor Pierce <1Copenut@users.noreply.github.com>
Date: Tue, 12 Mar 2024 10:55:05 -0500
Subject: [PATCH] [BUG][EuiModal] Fix VoiceOver + Safari escaping focus trap
 (#7564)

Co-authored-by: Cee Chen <constance.chen@elastic.co>
---
 changelogs/upcoming/7564.md                   |   5 +
 src-docs/src/views/modal/confirm_modal.tsx    |  84 +++++----
 .../src/views/modal/confirm_modal_loading.tsx |  64 +++----
 src-docs/src/views/modal/modal.tsx            |  62 +++----
 src-docs/src/views/modal/modal_example.js     |  16 +-
 src-docs/src/views/modal/modal_form.tsx       | 167 ++++++++++--------
 src-docs/src/views/modal/modal_width.tsx      |  62 ++++---
 .../__snapshots__/confirm_modal.test.tsx.snap |   4 +
 .../modal/__snapshots__/modal.test.tsx.snap   |   2 +
 src/components/modal/confirm_modal.tsx        |   8 +-
 src/components/modal/modal.tsx                |   8 +
 11 files changed, 262 insertions(+), 220 deletions(-)
 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..c65b672ceee
--- /dev/null
+++ b/changelogs/upcoming/7564.md
@@ -0,0 +1,5 @@
+**Accessibility**
+
+- 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
diff --git a/src-docs/src/views/modal/confirm_modal.tsx b/src-docs/src/views/modal/confirm_modal.tsx
index ea7b94008ee..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,48 +18,11 @@ export default () => {
   const closeDestroyModal = () => setIsDestroyModalVisible(false);
   const showDestroyModal = () => setIsDestroyModalVisible(true);
 
-  let modal;
-
-  if (isModalVisible) {
-    modal = (
-      <EuiConfirmModal
-        style={{ width: 600 }}
-        title="Update subscription to Platinum?"
-        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;
-
-  if (isDestroyModalVisible) {
-    destroyModal = (
-      <EuiConfirmModal
-        title="Discard dashboard changes?"
-        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>
@@ -69,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 86214b49fb2..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,40 +37,39 @@ export default () => {
     setValue(e.target.value);
   };
 
-  let modal;
-
-  if (isModalVisible) {
-    modal = (
-      <EuiConfirmModal
-        title="Delete the EUI repo?"
-        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 78ec5578e2b..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,22 +18,27 @@ export default () => {
   const closeModal = () => setIsModalVisible(false);
   const showModal = () => setIsModalVisible(true);
 
-  let modal;
+  const modalTitleId = useGeneratedHtmlId();
 
-  if (isModalVisible) {
-    modal = (
-      <EuiModal onClose={closeModal}>
-        <EuiModalHeader>
-          <EuiModalHeaderTitle>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>
@@ -45,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 bdf037a15c2..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,36 +101,50 @@ export default () => {
       </EuiFormRow>
     </EuiForm>
   );
+};
 
-  const onSuperSelectChange = (value: string) => {
-    setSuperSelectValue(value);
-  };
-
-  let modal;
-
-  if (isModalVisible) {
-    modal = (
-      <EuiModal onClose={closeModal} initialFocus="[name=popswitch]">
-        <EuiModalHeader>
-          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
-        </EuiModalHeader>
-
-        <EuiModalBody>{formSample}</EuiModalBody>
+export default () => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const closeModal = () => setIsModalVisible(false);
+  const showModal = () => setIsModalVisible(true);
 
-        <EuiModalFooter>
-          <EuiButtonEmpty onClick={closeModal}>Cancel</EuiButtonEmpty>
+  const modalFormId = useGeneratedHtmlId({ prefix: 'modalForm' });
+  const modalTitleId = useGeneratedHtmlId();
 
-          <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 9896b72352d..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,22 +18,31 @@ export default () => {
   const closeModal = () => setIsModalVisible(false);
   const showModal = () => setIsModalVisible(true);
 
-  let modal;
+  const modalTitle = useGeneratedHtmlId();
 
-  if (isModalVisible) {
-    modal = (
-      <EuiModal style={{ width: 800 }} onClose={closeModal}>
-        <EuiModalHeader>
-          <EuiModalHeaderTitle>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>
@@ -45,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>
+      )}
+    </>
   );
 };
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index ac5c6906ba4..279e2aa4019 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="alertdialog"
       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="alertdialog"
       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
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 18090f91a08..ffbaf9e9402 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".
+   */
+  role?: 'dialog' | 'alertdialog';
 }
 
 export const EuiModal: FunctionComponent<EuiModalProps> = ({
@@ -51,6 +56,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
   initialFocus,
   onClose,
   maxWidth = true,
+  role = 'dialog',
   style,
   ...rest
 }) => {
@@ -88,6 +94,8 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
           onKeyDown={onKeyDown}
           tabIndex={0}
           style={newStyle}
+          role={role}
+          aria-modal={true}
           {...rest}
         >
           <EuiI18n