fix(ModalClose): don't s show focus outline if it's not focus by Tab (#…

…2565)
skbkontur · Oct 27, 2021 · b589014 · b589014
1 parent fbc9ced
commit b589014
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git 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
@@ -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>