diff --git a/change/@fluentui-web-components-724db53b-8216-4544-99e5-0c2d440e4817.json b/change/@fluentui-web-components-724db53b-8216-4544-99e5-0c2d440e4817.json new file mode 100644 index 00000000000000..1bc15ea8476f41 --- /dev/null +++ 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": "brian.christopher.brady@gmail.com", + "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 index af59509d7ff2da..512788c6d94b15 100644 --- 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(` `); @@ -26,7 +26,7 @@ const chevronDown20Filled = html.partial(` `); diff --git a/packages/web-components/src/accordion/accordion.stories.ts b/packages/web-components/src/accordion/accordion.stories.ts index 38cdd5ceb2906d..967c20fb50d2da 100644 --- 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; const add20Filled = html` `; const subtract20Filled = html` - + `; const eye20Regular = html` `; const eyeOff20Regular = html` `; diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts index cee6f0935ad93f..67100b16bf68f5 100644 --- 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 index f65b9d326334f2..4c6a2c1c477220 100644 --- 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 index ef11790da2d587..7e4b457f59055c 100644 --- 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 index d80095a1894105..2bccb0a4544a2e 100644 --- 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 index 39017185dad5e8..e0e375c94c1fc0 100644 --- 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 index 4d7bee90954f46..b35c08869b72da 100644 --- 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 index e5fcaeae516b21..694abef78402e2 100644 --- 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 index ff067f5fb99ba5..52abe28c8c72fe 100644 --- 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; + } + `), +);