[BUG][EuiModal] Fix VoiceOver + Safari escaping focus trap

changelogs/upcoming/7564.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiModal` to properly trap Safari + VoiceOver virtual cursor

src-docs/src/views/modal/confirm_modal.tsx

@@ -18,12 +18,15 @@ export default () => {
   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"
@@ -40,11 +43,14 @@ export default () => {
   }
 
   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"

src-docs/src/views/modal/confirm_modal_loading.tsx

@@ -37,11 +37,14 @@ export default () => {
   };
 
   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();

src-docs/src/views/modal/modal.tsx

@@ -21,9 +21,11 @@ export default () => {
 
   if (isModalVisible) {
     modal = (
-      <EuiModal onClose={closeModal}>
+      <EuiModal aria-labelledby="euiModal-example" onClose={closeModal}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle id="euiModal-example">
+            Modal title
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>

src-docs/src/views/modal/modal_form.tsx

@@ -113,9 +113,15 @@ export default () => {
 
   if (isModalVisible) {
     modal = (
-      <EuiModal onClose={closeModal} initialFocus="[name=popswitch]">
+      <EuiModal
+        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>

src-docs/src/views/modal/modal_width.tsx

@@ -21,9 +21,15 @@ export default () => {
 
   if (isModalVisible) {
     modal = (
-      <EuiModal style={{ width: 800 }} onClose={closeModal}>
+      <EuiModal
+        aria-labelledby="euiModal-widthExample"
+        style={{ width: 800 }}
+        onClose={closeModal}
+      >
         <EuiModalHeader>
-          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle id="euiModal-widthExample">
+            Modal title
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>

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

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

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 && (

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

src/components/modal/modal_header_title.tsx

@@ -20,6 +20,7 @@ export type EuiModalHeaderTitleProps = FunctionComponent<
        * @default h1
        */
       component?: ElementType;
+      id?: String;
     }
 >;