fix: addressed high contrast visual on web components (#20418)

* addressed high contrast on components and storybook controls * fixed step icon in numberfield * Change files * fixed import order * fixed disable button * removed high contrast query in storybook files
microsoft · Nov 2, 2021 · 2cb0ac3 · 2cb0ac3
1 parent 71d4e11
commit 2cb0ac3
Show file tree

Hide file tree

Showing 25 changed files with 386 additions and 325 deletions.
diff --git a/change/@fluentui-web-components-ca1288ec-4452-45cb-b910-05525a7400f0.json b/change/@fluentui-web-components-ca1288ec-4452-45cb-b910-05525a7400f0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fixed high contrast visual for web components",
+  "packageName": "@fluentui/web-components",
+  "email": "khamu@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts
@@ -102,12 +102,26 @@ export const breadcrumbItemStyles: (
         .start,
         .end,
         .separator {
+          background: ${SystemColors.ButtonFace};
           color: ${SystemColors.ButtonText};
           fill: currentcolor;
         }
         .separator {
           fill: ${SystemColors.ButtonText};
         }
+        :host([href]) {
+          forced-color-adjust: none;
+          background: ${SystemColors.ButtonFace};
+          color: ${SystemColors.LinkText};
+        }
+        :host([href]) .control:hover {
+          background: ${SystemColors.LinkText};
+          color: ${SystemColors.HighlightText};
+          fill: currentcolor;
+        }
+        :host([href]) .control:${focusVisible}::after {
+          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.LinkText} inset;
+        }
       `,
     ),
   );
diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
@@ -5,6 +5,7 @@ import {
   forcedColorsStylesheetBehavior,
   FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
+import { SystemColors } from "@microsoft/fast-web-utilities";
 import {
   AccentButtonStyles,
   baseButtonStyles,
@@ -35,10 +36,67 @@ export const buttonStyles: (
         :host([disabled]) {
           opacity: 1;
         }
+        :host([disabled]) .control {
+          border-color: ${SystemColors.GrayText};
+          color: ${SystemColors.GrayText};
+          fill: currentcolor;
+        }
       `,
     ),
-    appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
-    appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
-    appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
-    appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)),
+    appearanceBehavior(
+      'accent',
+      css`
+      ${AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},
+      `.withBehaviors(
+        forcedColorsStylesheetBehavior(
+          css`
+            :host([disabled]) .control {
+              background: ${SystemColors.ButtonFace};
+            }
+          `,
+        ),
+      )
+    ),
+    appearanceBehavior(
+      'lightweight',
+      css`
+      ${LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)},
+      `.withBehaviors(
+        forcedColorsStylesheetBehavior(
+          css`
+            :host([disabled]) .control {
+              border-color: ${SystemColors.ButtonFace};
+            }
+          `,
+        ),
+      )
+    ),
+    appearanceBehavior(
+      'outline',
+      css`
+      ${OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
+      `.withBehaviors(
+        forcedColorsStylesheetBehavior(
+          css`
+            :host([disabled]) .control {
+              border-color: ${SystemColors.GrayText};
+            }
+          `,
+        ),
+      )
+    ),
+    appearanceBehavior(
+      'stealth',
+      css`
+      ${StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
+      `.withBehaviors(
+        forcedColorsStylesheetBehavior(
+          css`
+            :host([disabled]) .control {
+              border-color: ${SystemColors.ButtonFace};
+            }
+          `,
+        ),
+      )
+    )
   );
diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts
@@ -40,9 +40,8 @@ export const cardStyles: (
     forcedColorsStylesheetBehavior(
       css`
         :host {
-          forced-color-adjust: none;
           background: ${SystemColors.Canvas};
-          box-shadow: 0 0 0 1px ${SystemColors.CanvasText};
+          color: ${SystemColors.CanvasText};
         }
       `,
     ),

diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts
@@ -151,64 +151,55 @@ export const checkboxStyles: (context: ElementDefinitionContext, definition: Che
     forcedColorsStylesheetBehavior(
       css`
         .control {
-          forced-color-adjust: none;
           border-color: ${SystemColors.FieldText};
           background: ${SystemColors.Field};
         }
-        :host(:not(.disabled)) .control:hover,
-        .control:active {
+        :host(:not(.disabled):hover) .control,
+        :host(:not(.disabled):active) .control {
           border-color: ${SystemColors.Highlight};
           background: ${SystemColors.Field};
         }
-        slot[name='checked-indicator'] {
-          fill: ${SystemColors.FieldText};
-        }
+        slot[name='checked-indicator'],
         slot[name='indeterminate-indicator'] {
           fill: ${SystemColors.FieldText};
         }
         :host(:${focusVisible}) .control {
+          forced-color-adjust: none;
+          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
+          background: ${SystemColors.Field};
           border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
-        }
-        :host(.checked:${focusVisible}:not(.disabled)) .control {
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
         }
         :host(.checked) .control {
           background: ${SystemColors.Highlight};
           border-color: ${SystemColors.Highlight};
         }
-        :host(.checked) .control:hover,
-        .control:active {
+        :host(.checked:not(.disabled):hover) .control,
+        :host(.checked:not(.disabled):active) .control {
           background: ${SystemColors.HighlightText};
+          border-color: ${SystemColors.Highlight};
         }
-        :host(.checked) slot[name='checked-indicator'] {
-          fill: ${SystemColors.HighlightText};
-        }
-        :host(.checked) .control:hover slot[name='checked-indicator'] {
-          fill: ${SystemColors.Highlight};
+        :host(.checked:${focusVisible}) .control {
+          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
         }
+        :host(.checked) slot[name='checked-indicator'],
         :host(.checked) slot[name='indeterminate-indicator'] {
           fill: ${SystemColors.HighlightText};
         }
-        :host(.checked) .control:hover slot[name='indeterminate-indicator'] {
+        :host(.checked:hover ) .control slot[name='checked-indicator'],
+        :host(.checked:hover ) .control slot[name='indeterminate-indicator'] {
           fill: ${SystemColors.Highlight};
         }
         :host(.disabled) {
           opacity: 1;
         }
         :host(.disabled) .control {
-          forced-color-adjust: none;
           border-color: ${SystemColors.GrayText};
           background: ${SystemColors.Field};
         }
-        :host(.disabled) slot[name='indeterminate-indicator'],
-        :host(.checked.disabled) .control:hover slot[name='indeterminate-indicator'] {
-          forced-color-adjust: none;
-          fill: ${SystemColors.GrayText};
-        }
         :host(.disabled) slot[name='checked-indicator'],
-        :host(.checked.disabled) .control:hover slot[name='checked-indicator'] {
-          forced-color-adjust: none;
+        :host(.checked.disabled:hover) .control slot[name='checked-indicator'],
+        :host(.disabled) slot[name='indeterminate-indicator'],
+        :host(.checked.disabled:hover) .control slot[name='indeterminate-indicator'] {
           fill: ${SystemColors.GrayText};
         }
       `,

diff --git a/packages/web-components/src/combobox/combobox.styles.ts b/packages/web-components/src/combobox/combobox.styles.ts
@@ -1,5 +1,6 @@
 import { css, ElementStyles } from '@microsoft/fast-element';
-import { ComboboxOptions, disabledCursor, ElementDefinitionContext, focusVisible } from '@microsoft/fast-foundation';
+import { ComboboxOptions, disabledCursor, ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { SystemColors } from "@microsoft/fast-web-utilities";
 import { selectFilledStyles, selectStyles } from '../select/select.styles';
 import { appearanceBehavior } from '../utilities/behaviors';
 import { strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';
@@ -43,4 +44,5 @@ export const comboboxStyles: (context: ElementDefinitionContext, definition: Com
     .selected-value:active {
         outline: none;
     }
-`.withBehaviors(appearanceBehavior('filled', selectFilledStyles(context, definition)));
+`.withBehaviors(
+  appearanceBehavior('filled', selectFilledStyles(context, definition)));
diff --git a/packages/web-components/src/flipper/flipper.styles.ts b/packages/web-components/src/flipper/flipper.styles.ts
@@ -76,48 +76,36 @@ export const flipperStyles: (context: ElementDefinitionContext, definition: Flip
     forcedColorsStylesheetBehavior(
       css`
         :host {
-          background: ${SystemColors.Canvas};
+          background: ${SystemColors.ButtonFace};
+          border-color: ${SystemColors.ButtonText};
         }
         :host .next,
         :host .previous {
           color: ${SystemColors.ButtonText};
           fill: currentcolor;
         }
-        :host {
-          background: ${SystemColors.Canvas};
-          border-color: ${SystemColors.ButtonText};
-        }
         :host(:not(.disabled):hover) {
-          forced-color-adjust: none;
           background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.ButtonText};
-          opacity: 1;
         }
         :host(:not(.disabled):hover) .next,
         :host(:not(.disabled):hover) .previous {
-          forced-color-adjust: none;
           color: ${SystemColors.HighlightText};
           fill: currentcolor;
         }
         :host(.disabled) {
           opacity: 1;
         }
         :host(.disabled),
-        :host(.disabled:hover),
         :host(.disabled) .next,
-        :host(.disabled) .previous,
-        :host(.disabled:hover) .next,
-        :host(.disabled:hover) .previous {
-          forced-color-adjust: none;
-          background: ${SystemColors.Canvas};
+        :host(.disabled) .previous {
           border-color: ${SystemColors.GrayText};
           color: ${SystemColors.GrayText};
-          fill: ${SystemColors.GrayText};
+          fill: currentcolor;
         }
         :host(:${focusVisible}) {
           forced-color-adjust: none;
           border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
+          box-shadow: 0 0 0 2px ${SystemColors.ButtonFace}, 0 0 0 4px ${SystemColors.ButtonText};
         }
       `,
     ),

diff --git a/packages/web-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/src/listbox-option/listbox-option.styles.ts
@@ -139,17 +139,21 @@ export const optionStyles: (
     forcedColorsStylesheetBehavior(
       css`
         :host {
-          border-color: transparent;
+          background: ${SystemColors.ButtonFace};
+          border-color: ${SystemColors.ButtonFace};
           color: ${SystemColors.ButtonText};
-          forced-color-adjust: none;
         }
-
-        :host(:not([aria-selected='true']):hover),
-        :host([aria-selected='true']) {
+        :host(:not([disabled]):not([aria-selected="true"]):hover),
+        :host(:not([disabled])[aria-selected="true"]:hover),
+        :host([aria-selected="true"]) {
+          forced-color-adjust: none;
           background: ${SystemColors.Highlight};
           color: ${SystemColors.HighlightText};
         }
-
+        :host(:not([disabled]):active)::before,
+        :host([aria-selected='true'])::before {
+          background: ${SystemColors.HighlightText};
+        }
         :host([disabled]),
         :host([disabled]:not([aria-selected='true']):hover) {
           background: ${SystemColors.Canvas};

diff --git a/packages/web-components/src/listbox/listbox.styles.ts b/packages/web-components/src/listbox/listbox.styles.ts
@@ -2,16 +2,12 @@ import { css, ElementStyles } from '@microsoft/fast-element';
 import {
   display,
   ElementDefinitionContext,
-  focusVisible,
-  forcedColorsStylesheetBehavior,
   FoundationElementDefinition,
 } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
   controlCornerRadius,
   designUnit,
   focusStrokeOuter,
-  focusStrokeWidth,
   neutralStrokeRest,
   strokeWidth,
 } from '../design-tokens';
@@ -34,32 +30,4 @@ export const listboxStyles: (
       border-color: ${focusStrokeOuter};
       box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;
     }
-  `.withBehaviors(
-    forcedColorsStylesheetBehavior(
-      css`
-        :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]) {
-          background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.ButtonText};
-          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText};
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-
-        :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]) {
-          background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.ButtonText};
-          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText};
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-
-        ::slotted([role='option']:not([aria-selected='true']):not([disabled]):hover) {
-          forced-color-adjust: none;
-          color: ${SystemColors.ButtonText};
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.Highlight};
-          box-shadow: none;
-        }
-      `,
-    ),
-  );
+  `