refactor(v2): remove focus outline from mouse users (#3626)

* refactor(v2): remove focus outline from mouse users

* Improvements

* Cleanup

packages/docusaurus-theme-classic/src/theme/Layout/index.tsx

@@ -14,11 +14,14 @@ import Footer from '@theme/Footer';
 import LayoutProviders from '@theme/LayoutProviders';
 import LayoutHead from '@theme/LayoutHead';
 import type {Props} from '@theme/Layout';
+import useKeyboardNavigation from '@theme/hooks/useKeyboardNavigation';
 import './styles.css';
 
 function Layout(props: Props): JSX.Element {
   const {children, noFooter, wrapperClassName} = props;
 
+  useKeyboardNavigation();
+
   return (
     <LayoutProviders>
       <LayoutHead {...props} />

packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState, Children, ReactElement, useEffect} from 'react';
+import React, {useState, Children, ReactElement} from 'react';
 import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
 import type {Props} from '@theme/Tabs';
 
@@ -16,14 +16,12 @@ import styles from './styles.module.css';
 const keys = {
   left: 37,
   right: 39,
-  tab: 9,
 };
 
 function Tabs(props: Props): JSX.Element {
   const {block, children, defaultValue, values, groupId, className} = props;
   const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
   const [selectedValue, setSelectedValue] = useState(defaultValue);
-  const [keyboardPress, setKeyboardPress] = useState(false);
 
   if (groupId != null) {
     const relevantTabGroupChoice = tabGroupChoices[groupId];
@@ -78,28 +76,6 @@ function Tabs(props: Props): JSX.Element {
     }
   };
 
-  const handleKeyboardEvent = (event) => {
-    if (event.metaKey || event.altKey || event.ctrlKey) {
-      return;
-    }
-
-    setKeyboardPress(true);
-  };
-
-  const handleMouseEvent = () => {
-    setKeyboardPress(false);
-  };
-
-  useEffect(() => {
-    window.addEventListener('keydown', handleKeyboardEvent);
-    window.addEventListener('mousedown', handleMouseEvent);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyboardEvent);
-      window.removeEventListener('mousedown', handleMouseEvent);
-    };
-  }, []);
-
   return (
     <div>
       <ul
@@ -120,19 +96,15 @@ function Tabs(props: Props): JSX.Element {
             className={clsx('tabs__item', styles.tabItem, {
               'tabs__item--active': selectedValue === value,
             })}
-            style={keyboardPress ? {} : {outline: 'none'}}
             key={value}
             ref={(tabControl) => tabRefs.push(tabControl)}
             onKeyDown={(event) => {
               handleKeydown(tabRefs, event.target, event);
-              handleKeyboardEvent(event);
             }}
             onFocus={() => changeSelectedValue(value)}
             onClick={() => {
               changeSelectedValue(value);
-              setKeyboardPress(false);
-            }}
-            onPointerDown={() => setKeyboardPress(false)}>
+            }}>
             {label}
           </li>
         ))}

packages/docusaurus-theme-classic/src/theme/hooks/styles.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+body:not(.navigation-with-keyboard) *:not(input):focus {
+  outline: none;
+}

packages/docusaurus-theme-classic/src/theme/hooks/useKeyboardNavigation.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {useEffect} from 'react';
+
+import './styles.css';
+
+// This hook detect keyboard focus indicator to not show outline for mouse users
+// Inspired by https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
+function useKeyboardNavigation(): void {
+  useEffect(() => {
+    const keyboardFocusedClassName = 'navigation-with-keyboard';
+
+    function handleOutlineStyles(e: MouseEvent | KeyboardEvent) {
+      if (e.type === 'keydown' && (e as KeyboardEvent).key === 'Tab') {
+        document.body.classList.add(keyboardFocusedClassName);
+      }
+
+      if (e.type === 'mousedown') {
+        document.body.classList.remove(keyboardFocusedClassName);
+      }
+    }
+
+    document.addEventListener('keydown', handleOutlineStyles);
+    document.addEventListener('mousedown', handleOutlineStyles);
+
+    return () => {
+      document.body.classList.remove(keyboardFocusedClassName);
+      document.removeEventListener('keydown', handleOutlineStyles);
+      document.removeEventListener('mousedown', handleOutlineStyles);
+    };
+  }, []);
+}
+
+export default useKeyboardNavigation;

packages/docusaurus-theme-classic/src/types.d.ts

@@ -236,6 +236,12 @@ declare module '@theme/hooks/useWindowSize' {
   export default function useWindowSize(): WindowSize | undefined;
 }
 
+declare module '@theme/hooks/useKeyboardNavigation' {
+  const useKeyboardNavigation: () => void;
+
+  export default useKeyboardNavigation;
+}
+
 declare module '@theme/Layout' {
   import type {ReactNode} from 'react';