fix(a11y): fix forced colors for file upload button (#3114)

microsoftgraph · Mar 27, 2024 · 81826d9 · 81826d9
1 parent 1e695aa
commit 81826d9
Showing 1 changed file with 55 additions and 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
@@ -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;
+          }
+        }
+      }
+    }
+  }
+}