From eb6870f6d8bfe213555a5e0c0040308833510ab9 Mon Sep 17 00:00:00 2001
From: Andrew Huth <stuff@huth.me>
Date: Wed, 29 Nov 2023 14:16:31 -0500
Subject: [PATCH] fix: add focused styling to tabs (#714)

---
 .../src/core/Tabs/__snapshots__/index.test.tsx.snap          | 4 ++--
 packages/components/src/core/Tabs/style.tsx                  | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/core/Tabs/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Tabs/__snapshots__/index.test.tsx.snap
index 5c3e0129f..63dbb5e2a 100644
--- a/packages/components/src/core/Tabs/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Tabs/__snapshots__/index.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
     >
       <button
         aria-selected="true"
-        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-17rzz1x-MuiButtonBase-root-MuiTab-root"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected css-1jnyyyh-MuiButtonBase-root-MuiTab-root"
         role="tab"
         tabindex="0"
         type="button"
@@ -26,7 +26,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
       </button>
       <button
         aria-selected="false"
-        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-17rzz1x-MuiButtonBase-root-MuiTab-root"
+        class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary css-1jnyyyh-MuiButtonBase-root-MuiTab-root"
         role="tab"
         tabindex="-1"
         type="button"
diff --git a/packages/components/src/core/Tabs/style.tsx b/packages/components/src/core/Tabs/style.tsx
index 3722d3996..40048fd99 100644
--- a/packages/components/src/core/Tabs/style.tsx
+++ b/packages/components/src/core/Tabs/style.tsx
@@ -94,6 +94,11 @@ export const StyledTab = styled(RawTab, {
         color: black;
       }
 
+      &.Mui-focusVisible {
+        outline: 5px auto Highlight;
+        outline: 5px auto -webkit-focus-ring-color;
+      }
+
       &.Mui-selected {
         color: black;