From 91aaa06290433126815c065d382b4261fb7b1c7d Mon Sep 17 00:00:00 2001
From: Edbury Enegren <36284167+edburyenegren-okta@users.noreply.github.com>
Date: Wed, 10 Aug 2022 11:39:07 -0700
Subject: [PATCH] fix(odyssey-react-mui): fix Button :focus-visible styles

---
 .../src/themes/odyssey/components.ts             | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/odyssey-react-mui/src/themes/odyssey/components.ts b/packages/odyssey-react-mui/src/themes/odyssey/components.ts
index 7a67ec0504..763d9f3b99 100644
--- a/packages/odyssey-react-mui/src/themes/odyssey/components.ts
+++ b/packages/odyssey-react-mui/src/themes/odyssey/components.ts
@@ -124,6 +124,10 @@ export const components: ThemeOptions["components"] = {
             backgroundColor: theme.palette.primary.dark,
           },
 
+          "&:focus-visible": {
+            outlineColor: theme.palette.primary.main,
+          },
+
           "&:active": {
             backgroundColor: theme.palette.primary.main,
           },
@@ -140,15 +144,14 @@ export const components: ThemeOptions["components"] = {
           backgroundColor: theme.palette.grey[50],
           borderColor: theme.palette.grey[200],
           color: theme.palette.text.primary,
-          "&:hover": {
-            background: theme.palette.primary.lighter,
+          "&:hover, &:focus-visible": {
+            backgroundColor: theme.palette.primary.lighter,
             borderColor: theme.palette.primary.light,
             color: theme.palette.primary.main,
           },
 
           "&:focus-visible": {
-            backgroundColor: theme.palette.primary.main,
-            color: theme.palette.primary.main,
+            outlineColor: theme.palette.primary.main,
           },
 
           "&:active": {
@@ -174,7 +177,7 @@ export const components: ThemeOptions["components"] = {
           },
 
           "&:focus-visible": {
-            outlineColor: theme.palette.error.light,
+            outlineColor: theme.palette.error.main,
             backgroundColor: theme.palette.error.dark,
           },
 
@@ -199,6 +202,9 @@ export const components: ThemeOptions["components"] = {
             backgroundColor: "rgba(29, 29, 33, 0.1)",
             borderColor: "transparent",
           },
+          "&:focus-visible": {
+            outlineColor: theme.palette.primary.main,
+          },
           "&:active": {
             backgroundColor: "rgba(29, 29, 33, 0.2)",
             borderColor: "transparent",