fix: react tabs focus styling

Closes D2IQ-94906
d2iq · Dec 19, 2022 · 1b0eccb · 1b0eccb
1 parent 5a3e31e
commit 1b0eccb
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "react-focus-lock": "2.9.2",
     "react-id-generator": "3.0.2",
     "react-popper": "2.3.0",
-    "react-tabs": "5.1.0",
+    "react-tabs": "6.0.0",
     "react-transition-group": "4.4.5",
     "relative-luminance": "2.0.1"
   },

diff --git a/packages/tabs/components/Tabs.tsx b/packages/tabs/components/Tabs.tsx
@@ -43,9 +43,15 @@ injectGlobal`
   }
 }
 
-.react-tabs__tab:focus {
-  outline: none;
-  background: ${themeBgHover}
+/* Focusing on tabs with a mouse will not display an outline */
+.react-tabs__tab:focus:not(:focus-visible)   {
+  outline: 0;
+}
+
+/* Focusing tabs with a keyboard will add a light gray background color */
+.react-tabs__tab:focus-visible {
+  outline: 0;
+  background-color: ${themeBgHover}
 }
 
 .react-tabs__tab--selected {
@@ -147,6 +153,7 @@ const Tabs = ({
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       onSelect={onSelect ? onSelect : () => {}}
       data-cy="tabs"
+      focusTabOnClick={false}
     >
       <TabList>{tabs}</TabList>
       {tabsContent}