From 81826d967daad4bf60cc9e7018265c52445a3aeb Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Wed, 27 Mar 2024 10:56:26 -0700
Subject: [PATCH] fix(a11y): fix forced colors for file upload button (#3114)

---
 .../mgt-file-upload/mgt-file-upload.scss      | 59 +++++++++++++++++--
 1 file changed, 55 insertions(+), 4 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.scss b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.scss
index 403a8e98cf..5763d9e025 100644
--- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.scss
+++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.scss
@@ -9,9 +9,11 @@
 @import '../../../styles/shared-sass-variables';
 @import './mgt-file-upload.theme';
 
-
 $file-upload-button-border: var(--file-upload-button-border, none);
-$file-upload-dialog-replace-button-border: var(--file-upload-dialog-replace-button-border, 1px solid var(--neutral-foreground-rest));
+$file-upload-dialog-replace-button-border: var(
+  --file-upload-dialog-replace-button-border,
+  1px solid var(--neutral-foreground-rest)
+);
 $file-upload-dialog-keep-both-button-border: var(--file-upload-dialog-keep-both-button-border, none);
 $file-upload-dialog-border: var(--file-upload-dialog-border, 1px solid var(--neutral-fill-rest));
 $file-upload-dialog-width: var(--file-upload-dialog-width, auto);
@@ -234,9 +236,58 @@ $file-upload-border-drag: var(--file-upload-border-drag, 1px dashed #0078d4);
   }
 }
 
-[dir="rtl"] {
-  :host .file-upload-status{
+[dir='rtl'] {
+  :host .file-upload-status {
     left: 0;
     right: 28px;
   }
 }
+
+@media (forced-colors: active) {
+  :host {
+    fluent-button {
+      .upload-icon {
+        path {
+          fill: highlighttext;
+        }
+      }
+
+      &.file-upload-button {
+        &::part(control) {
+          border-width: 1px;
+          border-style: solid;
+          border-color: buttontext;
+          background: highlight;
+
+          &:hover {
+            background: highlighttext;
+            border-color: highlight;
+          }
+        }
+
+        .upload-text {
+          color: highlighttext;
+        }
+      }
+
+      &:hover {
+        .upload-icon {
+          path {
+            fill: highlight;
+          }
+        }
+
+        &.file-upload-button {
+          &::part(control) {
+            border-color: highlight;
+            background: highlighttext;
+          }
+
+          .upload-text {
+            color: highlight;
+          }
+        }
+      }
+    }
+  }
+}