fix(v2): tab label showing outline & background when clicked (#3171)

* fix: tab label showing outline & background when clicked

* show outline when tab pressed otherwise do not

* listen to all keyboard keys* for outline

* quick fix on typo

* edits on handleMouseEvent func

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} from 'react';
+import React, {useState, Children, ReactElement, useEffect} from 'react';
 import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
 
 import clsx from 'clsx';
@@ -15,6 +15,7 @@ import styles from './styles.module.css';
 const keys = {
   left: 37,
   right: 39,
+  tab: 9,
 };
 
 type Props = {
@@ -29,6 +30,7 @@ function Tabs(props: Props): JSX.Element {
   const {block, children, defaultValue, values, groupId} = props;
   const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
   const [selectedValue, setSelectedValue] = useState(defaultValue);
+  const [keyboardPress, setKeyboardPress] = useState(false);
 
   if (groupId != null) {
     const relevantTabGroupChoice = tabGroupChoices[groupId];
@@ -83,6 +85,23 @@ 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 (
     <div>
       <ul
@@ -99,11 +118,19 @@ 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)}
+            onKeyDown={(event) => {
+              handleKeydown(tabRefs, event.target, event);
+              handleKeyboardEvent(event);
+            }}
             onFocus={() => changeSelectedValue(value)}
-            onClick={() => changeSelectedValue(value)}>
+            onClick={() => {
+              changeSelectedValue(value);
+              setKeyboardPress(false);
+            }}
+            onPointerDown={() => setKeyboardPress(false)}>
             {label}
           </li>
         ))}

packages/docusaurus-theme-classic/src/theme/Tabs/styles.module.css

@@ -9,6 +9,3 @@
   margin-top: 0 !important;
 }
 
-.tabItem:focus {
-  background-color: var(--ifm-hover-overlay);
-}