fix(theme): do not show tab content when tabbing over it; show after …

…selection only (#8161)
facebook · Oct 28, 2022 · 08b4caa · 08b4caa
1 parent 55c0abc
commit 08b4caa
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -104,7 +104,10 @@ function TabsComponent(props: Props): JSX.Element {
   }
 
   const handleTabChange = (
-    event: React.FocusEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>,
+    event:
+      | React.FocusEvent<HTMLLIElement>
+      | React.MouseEvent<HTMLLIElement>
+      | React.KeyboardEvent<HTMLLIElement>,
   ) => {
     const newTab = event.currentTarget;
     const newTabIndex = tabRefs.indexOf(newTab);
@@ -124,6 +127,10 @@ function TabsComponent(props: Props): JSX.Element {
     let focusElement: HTMLLIElement | null = null;
 
     switch (event.key) {
+      case 'Enter': {
+        handleTabChange(event);
+        break;
+      }
       case 'ArrowRight': {
         const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
         focusElement = tabRefs[nextTab] ?? tabRefs[0]!;
@@ -161,7 +168,6 @@ function TabsComponent(props: Props): JSX.Element {
             key={value}
             ref={(tabControl) => tabRefs.push(tabControl)}
             onKeyDown={handleKeydown}
-            onFocus={handleTabChange}
             onClick={handleTabChange}
             {...attributes}
             className={clsx(