fix(a11y): mgt-file and mgt-picker visibility issues in dark-mode (#2667

) * fix accessibility contrast * fix placeholder hover * remove login changes * adds pointer cursor to logged in accounts (#2674) Co-authored-by: Musale Martin <[email protected]> * fix build * change picker-text-color * update picker color, update file theme colors * fix people picker colors, remove file-list box shadow * change placeholder color --------- Co-authored-by: Musale Martin <[email protected]> Co-authored-by: Gavin Barron <[email protected]>
microsoftgraph · Oct 3, 2023 · 239bfb0 · 239bfb0
1 parent 80de496
commit 239bfb0
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 20 deletions.
diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss
@@ -39,7 +39,6 @@ $progress-ring-size: var(--progress-ring-size, 24px);
 
 :host .file-list-wrapper {
   background-color: $file-list-background-color;
-  box-shadow: $file-list-box-shadow;
   border: $file-list-border;
   position: relative;
   display: flex;
@@ -76,7 +75,7 @@ $progress-ring-size: var(--progress-ring-size, 24px);
         --file-padding: 10px 20px 10px 20px;
         --file-padding-inline-start: 24px;
         --file-border-radius: 2px;
-        --file-background-color: var(--file-item-background-color, var(--neutral-layer-floating));
+        --file-background-color: var(--file-item-background-color, var(--neutral-layer-1));
       }
     }
   }

diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.theme.scss b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.theme.scss
@@ -9,5 +9,8 @@
 @import '../../components/mgt-file/mgt-file.theme';
 
 $file-list-background-color: var(--file-list-background-color, var(--neutral-layer-floating));
-$show-more-button-background-color: var(--show-more-button-background-color, var(--neutral-layer-floating));
-$show-more-button-background-color--hover: var(--show-more-button-background-color-hover, var(-neutral-fill-hover));
+$show-more-button-background-color: var(--show-more-button-background-color, var(--neutral-stroke-divider-rest));
+$show-more-button-background-color--hover: var(
+  --show-more-button-background-color-hover,
+  var(--neutral-fill-input-alt-active)
+);
diff --git a/packages/mgt-components/src/components/mgt-file/mgt-file.scss b/packages/mgt-components/src/components/mgt-file/mgt-file.scss
@@ -47,6 +47,8 @@ $line3-text-transform: var(--file-line3-text-transform, initial);
     background-color: $file-background-color-hover;
     border-radius: $file-border-radius;
     cursor: pointer;
+
+    --secondary-text-color: var(--secondary-text-hover-color);
   }
 
   &:focus,

diff --git a/packages/mgt-components/src/components/mgt-file/mgt-file.theme.scss b/packages/mgt-components/src/components/mgt-file/mgt-file.theme.scss
@@ -6,8 +6,8 @@
  */
 
 $line1-color: var(--file-line1-color, var(--neutral-foreground-rest));
-$line2-color: var(--file-line2-color, var(--neutral-foreground-hint));
-$line3-color: var(--file-line3-color, var(--neutral-foreground-hint));
+$line2-color: var(--file-line2-color, var(--secondary-text-color));
+$line3-color: var(--file-line3-color, var(--secondary-text-color));
 $file-background-color: var(--file-background-color);
 $file-background-color-focus: var(--file-background-color-focus, var(--neutral-fill-hover));
 $file-background-color-hover: var(--file-background-color-hover, var(--neutral-fill-hover));
diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.theme.scss b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.theme.scss
@@ -7,25 +7,43 @@
 
 @import '../../styles/shared-sass-variables';
 
-$input-background: padding-box linear-gradient(
-  var(--people-picker-input-background, var(--neutral-fill-input-rest)),
-  var(--people-picker-input-background, var(--neutral-fill-input-rest))),
+$input-background: padding-box
+    linear-gradient(
+      var(--people-picker-input-background, var(--neutral-fill-input-rest)),
+      var(--people-picker-input-background, var(--neutral-fill-input-rest))
+    ),
   border-box var(--people-picker-input-border-color, var(--neutral-stroke-input-rest));
-$input-hover-background: padding-box linear-gradient(
-  var(--people-picker-input-hover-background, var(--neutral-fill-input-hover)),
-  var(--people-picker-input-hover-background, var(--neutral-fill-input-hover))),
+$input-hover-background: padding-box
+    linear-gradient(
+      var(--people-picker-input-hover-background, var(--neutral-fill-input-hover)),
+      var(--people-picker-input-hover-background, var(--neutral-fill-input-hover))
+    ),
   border-box var(--people-picker-input-hover-border-color, var(--neutral-stroke-input-hover));
-$input-focus-background: padding-box linear-gradient(
-  var(--people-picker-input-focus-background, var(--neutral-fill-input-focus)),
-  var(--people-picker-input-focus-background, var(--neutral-fill-input-focus))),
+$input-focus-background: padding-box
+    linear-gradient(
+      var(--people-picker-input-focus-background, var(--neutral-fill-input-focus)),
+      var(--people-picker-input-focus-background, var(--neutral-fill-input-focus))
+    ),
   border-box var(--people-picker-input-focus-border-color, var(--neutral-stroke-input-focus));
 $placeholder-text-color: var(--people-picker-input-placeholder-text-color, var(--input-placeholder-rest));
 $placeholder-hover-text-color: var(--people-picker-input-placeholder-hover-text-color, var(--input-placeholder-hover));
 $placeholder-focus-text-color: var(--people-picker-input-placeholder-focus-text-color, var(--input-placeholder-filled));
-$selected-option-bg: var(--people-picker-selected-option-background-color, var(--person-background-color, var(--neutral-layer-3)));
+$selected-option-bg: var(
+  --people-picker-selected-option-background-color,
+  var(--person-background-color, var(--neutral-layer-3))
+);
 $selected-option-highlight-bg: var(--people-picker-selected-option-highlight-background-color, var(--accent-fill-rest));
-$dropdown-card-color: var(--people-picker-dropdown-background-color, var(--neutral-fill-rest));
-$dropdown-result-bg-color: var(--people-picker-dropdown-result-background-color, var(--person-background-color, transparent));
-$dropdown-result-hover-bg-color: var(--people-picker-dropdown-result-hover-background-color, var(--person-background-color, var(--neutral-layer-2)));
-$dropdown-result-focus-bg-color: var(--people-picker-dropdown-result-focus-background-color, var(--person-background-color, var(--neutral-layer-2)));
+$dropdown-card-color: var(--people-picker-dropdown-background-color, var(--neutral-layer-card-container));
+$dropdown-result-bg-color: var(
+  --people-picker-dropdown-result-background-color,
+  var(--person-background-color, transparent)
+);
+$dropdown-result-hover-bg-color: var(
+  --people-picker-dropdown-result-hover-background-color,
+  var(--person-background-color, var(--neutral-fill-rest))
+);
+$dropdown-result-focus-bg-color: var(
+  --people-picker-dropdown-result-focus-background-color,
+  var(--person-background-color, var(--neutral-fill-rest))
+);
 $no-results-color: var(--people-picker-no-results-text-color, var(--neutral-foreground-hint));
diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss
@@ -12,9 +12,25 @@
 :host {
   --max-height: var(--picker-max-height, 380px);
 
+  font-family: $font-family;
+
   .picker {
     background-color: $picker-background-color;
   }
+
+  fluent-combobox {
+    &::part(selected-value) {
+      &::placeholder {
+        color: $picker-text-color;
+      }
+
+      &:hover {
+        &::placeholder {
+          color: $picker-text-hover-color;
+        }
+      }
+    }
+  }
 }
 
 [dir='rtl'] {

diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.theme.scss
@@ -8,3 +8,5 @@
 @import '../../styles/shared-sass-variables';
 
 $picker-background-color: var(--picker-background-color, transparent);
+$picker-text-color: var(--picker-text-color, var(--input-filled-placeholder-rest));
+$picker-text-hover-color: var(--picker-text-color-hover, var(--secondary-text-hover-color));