From 885338be682408fd0c7ad8fb3626726aba382911 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Tue, 27 Dec 2022 11:25:25 -0800
Subject: [PATCH] fix: high contrast mode focus styles are applied

---
 ...-react-button-f9384ea2-7591-4d5c-88a4-44fc94e15575.json | 7 +++++++
 .../src/components/ToggleButton/useToggleButtonStyles.ts   | 7 ++-----
 2 files changed, 9 insertions(+), 5 deletions(-)
 create mode 100644 change/@fluentui-react-button-f9384ea2-7591-4d5c-88a4-44fc94e15575.json

diff --git a/change/@fluentui-react-button-f9384ea2-7591-4d5c-88a4-44fc94e15575.json b/change/@fluentui-react-button-f9384ea2-7591-4d5c-88a4-44fc94e15575.json
new file mode 100644
index 00000000000000..ac0ceb9b1bcc5e
--- /dev/null
+++ b/change/@fluentui-react-button-f9384ea2-7591-4d5c-88a4-44fc94e15575.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: high contrast mode focus styles are applied",
+  "packageName": "@fluentui/react-button",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
index 0dda2727942592..be6139e6219e2c 100644
--- a/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
+++ b/packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
@@ -62,14 +62,11 @@ const useRootCheckedStyles = makeStyles({
       },
 
       ':focus': {
-        ...shorthands.borderColor('Highlight'),
+        ...shorthands.border('1px', 'solid', 'HighlightText'),
+        outlineColor: 'Highlight',
       },
     },
   },
-  highContrastFocusStyles: createCustomFocusIndicatorStyle({
-    ...shorthands.border('1px', 'solid', 'HighlightText'),
-    outlineColor: 'Highlight',
-  }),
 
   // Appearance variations
   outline: {