a11y high contrast mode and focus state bug fixes for web components (#…

…28717) * radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * high contrast mode color fixes * removes file * yarn change * high contrast visual fixes * high contrast a11y fixes: optimizes high contrast styles using forcedColorsStylesheetBehavior * hc a11y: addresses feedback * hc a11y: removes dead code * hc a11y: fixes radio colors * hc a11y: fixes switch, togglebutton styles * hc a11y: combines css selectors * hc a11y: updates button styles * hc a11y: updates toggle button styles * hc a11y: fixes button styles --------- Co-authored-by: Chris Holt <[email protected]>
microsoft · Apr 30, 2024 · e2c3e39 · e2c3e39
1 parent 16d660c
commit e2c3e39
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 21 deletions.
diff --git a/change/@fluentui-web-components-724db53b-8216-4544-99e5-0c2d440e4817.json b/change/@fluentui-web-components-724db53b-8216-4544-99e5-0c2d440e4817.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "(accessibility): high contrast fixes",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/accordion-item/accordion-item.template.ts b/packages/web-components/src/accordion-item/accordion-item.template.ts
@@ -12,7 +12,7 @@ const chevronRight20Filled = html.partial(`<svg
 >
   <path
     d="M7.73271 4.20694C8.03263 3.92125 8.50737 3.93279 8.79306 4.23271L13.7944 9.48318C14.0703 9.77285 14.0703 10.2281 13.7944 10.5178L8.79306 15.7682C8.50737 16.0681 8.03263 16.0797 7.73271 15.794C7.43279 15.5083 7.42125 15.0336 7.70694 14.7336L12.2155 10.0005L7.70694 5.26729C7.42125 4.96737 7.43279 4.49264 7.73271 4.20694Z"
-    fill="#212121"
+    fill="currentColor"
   />
 </svg>`);
 
@@ -26,7 +26,7 @@ const chevronDown20Filled = html.partial(`<svg
 >
   <path
     d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z"
-    fill="#212121"
+    fill="currentColor"
   />
 </svg>`);
 

diff --git a/packages/web-components/src/accordion/accordion.stories.ts b/packages/web-components/src/accordion/accordion.stories.ts
@@ -12,7 +12,7 @@ type AccordionStoryMeta = Meta<AccordionStoryArgs>;
 const add20Filled = html`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M10.5 2.75C10.5 2.33579 10.1642 2 9.75 2C9.33579 2 9 2.33579 9 2.75V9H2.75C2.33579 9 2 9.33579 2 9.75C2 10.1642 2.33579 10.5 2.75 10.5H9V16.75C9 17.1642 9.33579 17.5 9.75 17.5C10.1642 17.5 10.5 17.1642 10.5 16.75V10.5H16.75C17.1642 10.5 17.5 10.1642 17.5 9.75C17.5 9.33579 17.1642 9 16.75 9H10.5V2.75Z"
-    fill="#212121"
+    fill="currentColor"
   />
 </svg>`;
 const subtract20Filled = html`<svg
@@ -22,7 +22,7 @@ const subtract20Filled = html`<svg
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <rect x="3" y="9.25" width="14" height="1.5" rx="0.75" fill="#212121" />
+  <rect x="3" y="9.25" width="14" height="1.5" rx="0.75" fill="currentColor" />
 </svg>`;
 
 const eye20Regular = html`<svg
@@ -34,7 +34,7 @@ const eye20Regular = html`<svg
 >
   <path
     d="M3.25909 11.6021C3.94254 8.32689 6.79437 6 10 6C13.2057 6 16.0574 8.32688 16.7409 11.6021C16.7974 11.8725 17.0622 12.0459 17.3325 11.9895C17.6029 11.933 17.7763 11.6682 17.7199 11.3979C16.9425 7.67312 13.6934 5 10 5C6.3066 5 3.05742 7.67311 2.28017 11.3979C2.22377 11.6682 2.39718 11.933 2.6675 11.9895C2.93782 12.0459 3.20268 11.8725 3.25909 11.6021ZM10 8C8.067 8 6.5 9.567 6.5 11.5C6.5 13.433 8.067 15 10 15C11.933 15 13.5 13.433 13.5 11.5C13.5 9.567 11.933 8 10 8ZM7.5 11.5C7.5 10.1193 8.61929 9 10 9C11.3807 9 12.5 10.1193 12.5 11.5C12.5 12.8807 11.3807 14 10 14C8.61929 14 7.5 12.8807 7.5 11.5Z"
-    fill="#212121"
+    fill="currentColor"
   />
 </svg>`;
 const eyeOff20Regular = html`<svg
@@ -46,7 +46,7 @@ const eyeOff20Regular = html`<svg
 >
   <path
     d="M2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L5.6453 6.35239C3.97044 7.49179 2.7234 9.27384 2.28017 11.3979C2.22377 11.6682 2.39718 11.9331 2.6675 11.9895C2.93782 12.0459 3.20268 11.8725 3.25909 11.6021C3.6629 9.66699 4.82367 8.06291 6.36714 7.07422L7.95336 8.66045C7.07297 9.29611 6.5 10.3311 6.5 11.5C6.5 13.433 8.067 15 10 15C11.1689 15 12.2039 14.427 12.8396 13.5466L17.1464 17.8536C17.3417 18.0488 17.6583 18.0488 17.8536 17.8536C18.0488 17.6583 18.0488 17.3417 17.8536 17.1464L2.85355 2.14645ZM12.1194 12.8265C11.6773 13.5314 10.8934 14 10 14C8.61929 14 7.5 12.8807 7.5 11.5C7.5 10.6066 7.96863 9.82265 8.67348 9.38057L12.1194 12.8265ZM10.1235 8.00214L13.4979 11.3765C13.4342 9.54169 11.9583 8.06576 10.1235 8.00214ZM10 6C9.43016 6 8.87149 6.07353 8.33419 6.21285L7.53113 5.40979C8.31349 5.14331 9.14485 5 10 5C13.6934 5 16.9425 7.67312 17.7199 11.3979C17.7763 11.6682 17.6029 11.933 17.3325 11.9895C17.0622 12.0459 16.7974 11.8725 16.7409 11.6021C16.0574 8.32688 13.2057 6 10 6Z"
-    fill="#212121"
+    fill="currentColor"
   />
 </svg>`;
 

diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   borderRadiusCircular,
   borderRadiusLarge,
@@ -308,4 +308,10 @@ export const styles = css`
     color: ${colorNeutralForegroundDisabled};
     cursor: not-allowed;
   }
-`;
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    :host([appearance='transparent']:hover) .control {
+      border-color: Highlight;
+    }
+  `),
+);
diff --git a/packages/web-components/src/divider/divider.styles.ts b/packages/web-components/src/divider/divider.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   colorBrandForeground1,
   colorBrandStroke1,
@@ -125,4 +125,18 @@ export const styles = css`
   :host([appearance='subtle']) ::slotted(*) {
     color: ${colorNeutralForeground3};
   }
-`;
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    :host([appearance='strong'])::before,
+    :host([appearance='strong'])::after,
+    :host([appearance='brand'])::before,
+    :host([appearance='brand'])::after,
+    :host([appearance='subtle'])::before,
+    :host([appearance='subtle'])::after,
+    :host::after,
+    :host::before {
+      background: WindowText;
+      color: WindowText;
+    }
+  `),
+);
diff --git a/packages/web-components/src/progress-bar/progress-bar.styles.ts b/packages/web-components/src/progress-bar/progress-bar.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   borderRadiusMedium,
   colorBrandBackground2,
@@ -165,4 +165,22 @@ export const styles = css`
       opacity: 1;
     }
   }
-`;
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    .progress {
+      background-color: HighlightText;
+    }
+    .determinate,
+    :host([validation-state='success']) .determinate,
+    :host([validation-state='warning']) .determinate,
+    :host([validation-state='error']) .determinate,
+    :host([validation-state='success']) ..indeterminate-indicator-1,
+    :host([validation-state='success']) ..indeterminate-indicator-2,
+    :host([validation-state='warning']) .indeterminate-indicator-1,
+    :host([validation-state='warning']) .indeterminate-indicator-2,
+    :host([validation-state='error']) .indeterminate-indicator-1,
+    :host([validation-state='error']) .indeterminate-indicator-2 {
+      background-color: Highlight;
+    }
+  `),
+);
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   borderRadiusCircular,
   borderRadiusSmall,
@@ -127,4 +127,16 @@ export const styles = css`
   :host([disabled]) .checked-indicator {
     background: ${colorNeutralForegroundDisabled};
   }
-`;
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    :host .control {
+      border-color: InactiveBorder;
+    }
+    :host([aria-checked='true']) .checked-indicator,
+    :host([aria-checked='true']:active) .checked-indicator,
+    :host([aria-checked='true']:hover) .checked-indicator {
+      background-color: Highlight;
+      border-color: ActiveBorder;
+    }
+  `),
+);
diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   borderRadiusCircular,
   borderRadiusMedium,
@@ -199,4 +199,23 @@ export const styles = css`
     width: 100%;
     bottom: 0;
   }
-`;
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    .track:hover,
+    .track:active,
+    .track {
+      background: WindowText;
+    }
+    .thumb-cursor:hover,
+    .thumb-cursor:active,
+    .thumb-cursor {
+      background: ButtonText;
+    }
+
+    :host(:hover) .track-start,
+    .track-start:active,
+    .track-start {
+      background: Highlight;
+    }
+  `),
+);
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   borderRadiusCircular,
   colorCompoundBrandBackground,
@@ -18,18 +18,22 @@ import {
   colorNeutralStrokeAccessibleHover,
   colorNeutralStrokeAccessiblePressed,
   colorNeutralStrokeDisabled,
+  colorStrokeFocus2,
   colorTransparentBackground,
+  colorTransparentStroke,
   curveEasyEase,
   durationNormal,
   fontFamilyBase,
   fontSizeBase300,
   fontWeightRegular,
   lineHeightBase300,
+  shadow4,
   spacingHorizontalS,
   spacingHorizontalXS,
   spacingHorizontalXXS,
   spacingVerticalS,
   spacingVerticalXS,
+  strokeWidthThick,
 } from '../theme/design-tokens.js';
 
 export const styles = css`
@@ -142,4 +146,32 @@ export const styles = css`
   :host([aria-checked='true'][disabled]) .checked-indicator {
     background: ${colorNeutralForegroundDisabled};
   }
-`;
+
+  :host(:focus-visible) {
+    border-color: ${colorTransparentStroke};
+    outline: ${strokeWidthThick} solid ${colorTransparentStroke};
+    box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
+  }
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    .switch {
+      border-color: InactiveBorder;
+    }
+    :host([aria-checked='true']) .switch,
+    :host([aria-checked='true']:active) .switch,
+    :host([aria-checked='true']:hover) .switch {
+      background: Highlight;
+      border-color: Highlight;
+    }
+    .checked-indicator,
+    :host(:hover) .checked-indicator,
+    :host(:active) .checked-indicator {
+      background-color: ActiveCaption;
+    }
+    :host([aria-checked='true']) .checked-indicator,
+    :host([aria-checked='true']:hover) .checked-indicator,
+    :host([aria-checked='true']:active) .checked-indicator {
+      background-color: ButtonFace;
+    }
+  `),
+);
diff --git a/packages/web-components/src/tab/tab.styles.ts b/packages/web-components/src/tab/tab.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   borderRadiusCircular,
   borderRadiusMedium,
@@ -108,4 +108,10 @@ export const styles = css`
     box-shadow: 0 0 0 3px ${colorStrokeFocus2};
     outline: 1px solid ${colorStrokeFocus1};
   }
-`;
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    :host([aria-selected='true'])::after {
+      background-color: Highlight;
+    }
+  `),
+);
diff --git a/packages/web-components/src/toggle-button/toggle-button.styles.ts b/packages/web-components/src/toggle-button/toggle-button.styles.ts
@@ -1,4 +1,5 @@
 import { css } from '@microsoft/fast-element';
+import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { styles as ButtonStyles } from '../button/button.styles.js';
 import {
   colorBrandBackgroundHover,
@@ -105,4 +106,16 @@ export const styles = css`
   :host([aria-pressed='true'][appearance='transparent']:active) .control {
     color: ${colorNeutralForeground2BrandPressed};
   }
-`;
+`.withBehaviors(
+  forcedColorsStylesheetBehavior(css`
+    :host([aria-pressed='true']) .control,
+    :host([aria-pressed='true'][appearance='primary']) .control,
+    :host([aria-pressed='true'][appearance='subtle']) .control,
+    :host([aria-pressed='true'][appearance='outline']) .control,
+    :host([aria-pressed='true'][appearance='transparent']) .control,
+    :host([aria-pressed='true'][appearance='transparent']) .control {
+      background: SelectedItem;
+      color: SelectedItemText;
+    }
+  `),
+);