From 529f22667fad4c11900b9a237445855453222482 Mon Sep 17 00:00:00 2001
From: nataliepina <npina@d2iq.com>
Date: Mon, 19 Dec 2022 13:35:33 -0600
Subject: [PATCH] fix: react tabs focus styling

Closes D2IQ-94906
---
 package-lock.json                 | 14 +++++++-------
 package.json                      |  2 +-
 packages/tabs/components/Tabs.tsx | 13 ++++++++++---
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 981fa2bac..edc42f30a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,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"
       },
@@ -31818,9 +31818,9 @@
       }
     },
     "node_modules/react-tabs": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-5.1.0.tgz",
-      "integrity": "sha512-jsPVEPuhG7JljTo8Q4ujz4UKRpG90nHlDClAdvV5KrLxCHU+MT/kg7dmhq8fDv8+frciDtaYeFFlTVRLm4N5AQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.0.tgz",
+      "integrity": "sha512-8jKLKrlwxmn5/+xsa76yi27ZdB8E/WhlhQZw739O5UlOeUGtVoVeWnpqIewv/KbjTw7gQf/uA51zWUNt4IVygQ==",
       "dependencies": {
         "clsx": "^1.1.0",
         "prop-types": "^15.5.0"
@@ -60719,9 +60719,9 @@
       }
     },
     "react-tabs": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-5.1.0.tgz",
-      "integrity": "sha512-jsPVEPuhG7JljTo8Q4ujz4UKRpG90nHlDClAdvV5KrLxCHU+MT/kg7dmhq8fDv8+frciDtaYeFFlTVRLm4N5AQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.0.tgz",
+      "integrity": "sha512-8jKLKrlwxmn5/+xsa76yi27ZdB8E/WhlhQZw739O5UlOeUGtVoVeWnpqIewv/KbjTw7gQf/uA51zWUNt4IVygQ==",
       "requires": {
         "clsx": "^1.1.0",
         "prop-types": "^15.5.0"
diff --git a/package.json b/package.json
index b54d2e2b0..f7798820e 100644
--- 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
index 1a9422d50..a70f9aa4b 100644
--- 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}