fix: add focused styling to tabs (#714)

chanzuckerberg · Nov 29, 2023 · eb6870f · eb6870f
1 parent ac8a72b
commit eb6870f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 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
@@ -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
@@ -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;