fix accessibility contrast

microsoftgraph · Aug 16, 2023 · e61168a · e61168a
1 parent 3106969
commit e61168a
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 4 deletions.
diff --git a/packages/mgt-components/src/components/mgt-file/mgt-file.scss b/packages/mgt-components/src/components/mgt-file/mgt-file.scss
@@ -48,6 +48,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-login/mgt-login.scss b/packages/mgt-components/src/components/mgt-login/mgt-login.scss
@@ -108,6 +108,7 @@ $login-flyout-command-text-color: #{var(--login-flyout-command-text-color, var(-
       margin-top: 4px;
       background: $login-popup-background-color;
       list-style-type: none;
+      cursor: pointer;
 
       &:hover {
         background: $login-account-item-hover-bg-color;

diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss b/packages/mgt-components/src/components/mgt-picker/mgt-picker.scss
@@ -11,11 +11,23 @@
 
 :host {
   --max-height: var(--picker-max-height, 380px);
-  
+
   font-family: $font-family;
 
- .picker {
+  .picker {
     background-color: $picker-background-color;
+
+    fluent-combobox {
+      &::part(control) {
+        .selected-value {
+          color: $picker-text-color;
+        }
+
+        &:hover {
+          --secondary-text-color: var(--secondary-text-hover-color);
+        }
+      }
+    }
   }
 }
 

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,4 @@
 @import '../../styles/shared-sass-variables';
 
 $picker-background-color: var(--picker-background-color, transparent);
+$picker-text-color: var(--picker-text-color, var(--secondary-text-color));