[EuiModal] Ensure Modal closes in correct order for nested EuiPopover

packages/eui/changelogs/upcoming/7939.md

@@ -0,0 +1,4 @@
+**Accessibility**
+
+- Improved the experience of `EuiModal` by ensuring nested `EuiPopover` closes on `Escape` keypress instead of the modal
+

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

@@ -10,7 +10,7 @@
 /// <reference types="cypress-real-events" />
 /// <reference types="../../../cypress/support" />
 
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import {
   EuiModal,
   EuiModalHeader,
@@ -20,16 +20,17 @@ import {
   EuiModalProps,
 } from './index';
 import { EuiButton } from '../button';
+import { EuiPopover } from '../popover';
 
-const Modal = () => {
+const Modal = ({ content }: { content?: ReactNode }) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const closeModal = () => setIsModalVisible(false);
   const showModal = () => setIsModalVisible(true);
 
   const modalProps: EuiModalProps = {
     title: 'Do this thing',
     onClose: closeModal,
-    children: React,
+    children: null,
   };
 
   return (
@@ -42,7 +43,7 @@ const Modal = () => {
           </EuiModalHeader>
 
           <EuiModalBody>
-            <p>This is a simple modal body</p>
+            {content ?? <p>This is a simple modal body</p>}
           </EuiModalBody>
 
           <EuiModalFooter>
@@ -82,22 +83,75 @@ describe('EuiModal', () => {
       cy.get('div.euiModal').should('not.exist');
     });
 
-    it('responds to button keypresses', () => {
-      cy.realMount(<Modal />);
-      cy.realPress('Tab');
-      cy.focused().contains('Show confirm modal');
-      cy.realPress('Enter');
-      cy.focused().contains('Title of modal');
-      cy.realPress('Tab');
-      cy.realPress('Enter');
-      cy.focused().contains('Show confirm modal');
-      cy.get('div.euiModal').should('not.exist');
-      cy.realPress('Enter');
-      cy.focused().contains('Title of modal');
-      cy.repeatRealPress('Tab');
-      cy.realPress('Enter');
-      cy.focused().contains('Show confirm modal');
-      cy.get('div.euiModal').should('not.exist');
+    describe('key navigation', () => {
+      it('responds to button keypresses', () => {
+        cy.realMount(<Modal />);
+        cy.realPress('Tab');
+        cy.focused().contains('Show confirm modal');
+        cy.realPress('Enter');
+        cy.focused().contains('Title of modal');
+        cy.realPress('Tab');
+        cy.realPress('Enter');
+        cy.focused().contains('Show confirm modal');
+        cy.get('div.euiModal').should('not.exist');
+        cy.realPress('Enter');
+        cy.focused().contains('Title of modal');
+        cy.repeatRealPress('Tab');
+        cy.realPress('Enter');
+        cy.focused().contains('Show confirm modal');
+        cy.get('div.euiModal').should('not.exist');
+      });
+
+      it('closes on Escape key press', () => {
+        cy.realMount(<Modal />);
+        cy.realPress('Tab');
+        cy.focused().contains('Show confirm modal');
+        cy.realPress('Enter');
+        cy.focused().contains('Title of modal');
+        cy.realPress('Tab');
+        cy.realPress('Tab');
+        cy.focused().contains('Close');
+        cy.realPress('Escape');
+        cy.focused().contains('Show confirm modal');
+      });
+
+      it('closes opened content before closing the modal on Escape key press', () => {
+        const PopoverContent = () => {
+          const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+          return (
+            <EuiPopover
+              button={
+                <EuiButton onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
+                  Show Popover
+                </EuiButton>
+              }
+              isOpen={isPopoverOpen}
+              closePopover={() => {
+                setIsPopoverOpen(false);
+              }}
+              panelPaddingSize="none"
+            >
+              Popover content
+            </EuiPopover>
+          );
+        };
+
+        cy.realMount(<Modal content={<PopoverContent />} />);
+        cy.realPress('Tab');
+        cy.focused().contains('Show confirm modal');
+        cy.realPress('Enter');
+        cy.focused().contains('Title of modal');
+        cy.realPress('Tab');
+        cy.realPress('Tab');
+        cy.focused().contains('Show Popover');
+        cy.realPress('Enter');
+        cy.focused().contains('Popover content');
+        cy.realPress('Escape');
+        cy.focused().contains('Show Popover');
+        cy.realPress('Escape');
+        cy.focused().contains('Show confirm modal');
+      });
     });
   });
 });

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

@@ -10,6 +10,7 @@ import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 
 import { keys, useEuiTheme } from '../../services';
+import { isDOMNode } from '../../utils';
 
 import { EuiButtonIcon } from '../button';
 
@@ -62,9 +63,14 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
 }) => {
   const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (event.key === keys.ESCAPE) {
-      event.preventDefault();
-      event.stopPropagation();
-      onClose(event);
+      if (
+        isDOMNode(event.target) &&
+        event.currentTarget.contains(event.target)
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClose(event);
+      }
     }
   };
 

packages/eui/src/utils/index.ts

@@ -8,3 +8,4 @@
 
 export * from './prop_types';
 export * from './is_jest';
+export * from './type_guards';

packages/eui/src/utils/type_guards.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const isDOMNode = (el: any): el is Node => el instanceof Node;