From b58901428b7bfdf52727de1345e44d1d0cd35b8e Mon Sep 17 00:00:00 2001
From: HelenaIsh <32093844+HelenaIsh@users.noreply.github.com>
Date: Wed, 27 Oct 2021 11:04:08 +0500
Subject: [PATCH] fix(ModalClose): don't s show focus outline if it's not focus
 by Tab (#2565)

---
 .../react-ui/components/Modal/Modal.styles.ts | 12 ++++++-----
 .../react-ui/components/Modal/ModalClose.tsx  | 20 +++++++++++++++++++
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/react-ui/components/Modal/Modal.styles.ts b/packages/react-ui/components/Modal/Modal.styles.ts
index eee533b736f..7c3e1439b7b 100644
--- a/packages/react-ui/components/Modal/Modal.styles.ts
+++ b/packages/react-ui/components/Modal/Modal.styles.ts
@@ -93,15 +93,10 @@ export const styles = memoizeStyle({
       padding: ${t.modalCloseButtonClickArea};
       margin: -${t.modalCloseButtonClickArea};
 
-      &:focus,
       &:hover {
         color: ${t.modalCloseButtonHoverColor};
       }
 
-      &:focus {
-        outline: 2px solid ${t.borderColorFocus};
-      }
-
       & > svg {
         width: ${t.modalCloseIconSize};
         height: ${t.modalCloseIconSize};
@@ -133,6 +128,13 @@ export const styles = memoizeStyle({
     `;
   },
 
+  focus(t: Theme) {
+    return css`
+      color: ${t.modalCloseButtonHoverColor};
+      outline: 2px solid ${t.borderColorFocus};
+    `;
+  },
+
   headerWrapper() {
     return css`
       position: relative;
diff --git a/packages/react-ui/components/Modal/ModalClose.tsx b/packages/react-ui/components/Modal/ModalClose.tsx
index 3717bb2f7cc..a344511e6c3 100644
--- a/packages/react-ui/components/Modal/ModalClose.tsx
+++ b/packages/react-ui/components/Modal/ModalClose.tsx
@@ -3,21 +3,41 @@ import React, { useContext } from 'react';
 import { ThemeContext } from '../../lib/theming/ThemeContext';
 import { CrossIcon } from '../../internal/icons/CrossIcon';
 import { cx } from '../../lib/theming/Emotion';
+import { keyListener } from '../../lib/events/keyListener';
 
 import { CloseProps } from './ModalContext';
 import { styles } from './Modal.styles';
 
 export function ModalClose({ disableClose, requestClose }: CloseProps) {
   const theme = useContext(ThemeContext);
+  const [focusedByTab, setFocusedByTab] = React.useState(false);
+
+  const handleFocus = () => {
+    // focus event fires before keyDown eventlistener
+    // so we should check tabPressed in async way
+    requestAnimationFrame(() => {
+      if (keyListener.isTabPressed) {
+        setFocusedByTab(true);
+      }
+    });
+  };
+
+  const handleBlur = () => {
+    setFocusedByTab(false);
+  };
 
   return (
     <button
       className={cx({
         [styles.close(theme)]: true,
         [styles.disabled(theme)]: disableClose,
+        [styles.focus(theme)]: focusedByTab,
       })}
       onClick={requestClose}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
       data-tid="modal-close"
+      tabIndex={disableClose ? -1 : 0}
     >
       <CrossIcon />
     </button>