diff --git a/CHANGELOG.md b/CHANGELOG.md index ff95eb4dc0..f68930d0d7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -66,6 +66,7 @@ Legends: - Fixed screen readers not saying "Click to interact." for messages with links, in PR [#5927](https://github.com/microsoft/BotFramework-WebChat/pull/5927), by [@OEvgeny](https://github.com/OEvgeny) - Fixed carousel cards focused with TAB staying partially out of view, in PR [#5926](https://github.com/microsoft/BotFramework-WebChat/pull/5926), by [@OEvgeny](https://github.com/OEvgeny) - Fixed LEFT/RIGHT on a button inside a carousel card scrolling the carousel, in PR [#5917](https://github.com/microsoft/BotFramework-WebChat/pull/5917), by [@OEvgeny](https://github.com/OEvgeny) +- Fixed icons being invisible, link references not using the link color, and Fluent messages and Copy button having no border in forced colors, fixes [#4906](https://github.com/microsoft/BotFramework-WebChat/issues/4906) and [#4907](https://github.com/microsoft/BotFramework-WebChat/issues/4907), in PR [#5907](https://github.com/microsoft/BotFramework-WebChat/pull/5907), by [@OEvgeny](https://github.com/OEvgeny) ## [4.19.2] - 2026-10-08 diff --git a/__tests__/html2/fluentTheme/citation.hover.forcedColors.dark.html b/__tests__/html2/fluentTheme/citation.hover.forcedColors.dark.html new file mode 100644 index 0000000000..361a44d401 --- /dev/null +++ b/__tests__/html2/fluentTheme/citation.hover.forcedColors.dark.html @@ -0,0 +1,109 @@ + + + + + + + +
+ + + + diff --git a/__tests__/html2/fluentTheme/citation.hover.forcedColors.dark.html.snap-1.png b/__tests__/html2/fluentTheme/citation.hover.forcedColors.dark.html.snap-1.png new file mode 100644 index 0000000000..a116604486 Binary files /dev/null and b/__tests__/html2/fluentTheme/citation.hover.forcedColors.dark.html.snap-1.png differ diff --git a/__tests__/html2/fluentTheme/icons.forcedColors.dark.html b/__tests__/html2/fluentTheme/icons.forcedColors.dark.html new file mode 100644 index 0000000000..84f24f67e9 --- /dev/null +++ b/__tests__/html2/fluentTheme/icons.forcedColors.dark.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-1.png b/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-1.png new file mode 100644 index 0000000000..ff0aaacbff Binary files /dev/null and b/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-1.png differ diff --git a/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-2.png b/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-2.png new file mode 100644 index 0000000000..eb89ed73dd Binary files /dev/null and b/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-2.png differ diff --git a/__tests__/html2/fluentTheme/icons.forcedColors.html b/__tests__/html2/fluentTheme/icons.forcedColors.html new file mode 100644 index 0000000000..7f59b9cf00 --- /dev/null +++ b/__tests__/html2/fluentTheme/icons.forcedColors.html @@ -0,0 +1,143 @@ + + + + + + + +
+ + + + diff --git a/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-1.png b/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-1.png new file mode 100644 index 0000000000..ebf3be2c27 Binary files /dev/null and b/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-1.png differ diff --git a/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-2.png b/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-2.png new file mode 100644 index 0000000000..4f23f2f0f9 Binary files /dev/null and b/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-2.png differ diff --git a/__tests__/html2/fluentTheme/telephoneKeypad.forcedColors.html b/__tests__/html2/fluentTheme/telephoneKeypad.forcedColors.html new file mode 100644 index 0000000000..cd9f2da3c7 --- /dev/null +++ b/__tests__/html2/fluentTheme/telephoneKeypad.forcedColors.html @@ -0,0 +1,73 @@ + + + + + + +
+ + + + diff --git a/__tests__/html2/fluentTheme/telephoneKeypad.forcedColors.html.snap-1.png b/__tests__/html2/fluentTheme/telephoneKeypad.forcedColors.html.snap-1.png new file mode 100644 index 0000000000..429681bd4d Binary files /dev/null and b/__tests__/html2/fluentTheme/telephoneKeypad.forcedColors.html.snap-1.png differ diff --git a/__tests__/html2/linkDefinition/forcedColors.dark.html b/__tests__/html2/linkDefinition/forcedColors.dark.html new file mode 100644 index 0000000000..5f344c5252 --- /dev/null +++ b/__tests__/html2/linkDefinition/forcedColors.dark.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/html2/linkDefinition/forcedColors.dark.html.snap-1.png b/__tests__/html2/linkDefinition/forcedColors.dark.html.snap-1.png new file mode 100644 index 0000000000..55398fb3c9 Binary files /dev/null and b/__tests__/html2/linkDefinition/forcedColors.dark.html.snap-1.png differ diff --git a/__tests__/html2/linkDefinition/forcedColors.fluent.dark.html b/__tests__/html2/linkDefinition/forcedColors.fluent.dark.html new file mode 100644 index 0000000000..ac1ffc41a5 --- /dev/null +++ b/__tests__/html2/linkDefinition/forcedColors.fluent.dark.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/html2/linkDefinition/forcedColors.fluent.dark.html.snap-1.png b/__tests__/html2/linkDefinition/forcedColors.fluent.dark.html.snap-1.png new file mode 100644 index 0000000000..763217d118 Binary files /dev/null and b/__tests__/html2/linkDefinition/forcedColors.fluent.dark.html.snap-1.png differ diff --git a/__tests__/html2/linkDefinition/forcedColors.fluent.html b/__tests__/html2/linkDefinition/forcedColors.fluent.html new file mode 100644 index 0000000000..5e1e69071b --- /dev/null +++ b/__tests__/html2/linkDefinition/forcedColors.fluent.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/html2/linkDefinition/forcedColors.fluent.html.snap-1.png b/__tests__/html2/linkDefinition/forcedColors.fluent.html.snap-1.png new file mode 100644 index 0000000000..b239f234c6 Binary files /dev/null and b/__tests__/html2/linkDefinition/forcedColors.fluent.html.snap-1.png differ diff --git a/__tests__/html2/linkDefinition/forcedColors.html b/__tests__/html2/linkDefinition/forcedColors.html new file mode 100644 index 0000000000..e39a1f49b5 --- /dev/null +++ b/__tests__/html2/linkDefinition/forcedColors.html @@ -0,0 +1,113 @@ + + + + + + + +
+ + + + diff --git a/__tests__/html2/linkDefinition/forcedColors.html.snap-1.png b/__tests__/html2/linkDefinition/forcedColors.html.snap-1.png new file mode 100644 index 0000000000..4922f10773 Binary files /dev/null and b/__tests__/html2/linkDefinition/forcedColors.html.snap-1.png differ diff --git a/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.dark.html b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.dark.html new file mode 100644 index 0000000000..5f344c5252 --- /dev/null +++ b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.dark.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.dark.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.dark.html.snap-1.png new file mode 100644 index 0000000000..37301fb24e Binary files /dev/null and b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.dark.html.snap-1.png differ diff --git a/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.fluent.dark.html b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.fluent.dark.html new file mode 100644 index 0000000000..ac1ffc41a5 --- /dev/null +++ b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.fluent.dark.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.fluent.dark.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.fluent.dark.html.snap-1.png new file mode 100644 index 0000000000..ac475cea7a Binary files /dev/null and b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.fluent.dark.html.snap-1.png differ diff --git a/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.fluent.html b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.fluent.html new file mode 100644 index 0000000000..5e1e69071b --- /dev/null +++ b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.fluent.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.fluent.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.fluent.html.snap-1.png new file mode 100644 index 0000000000..ffc75e7aab Binary files /dev/null and b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.fluent.html.snap-1.png differ diff --git a/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.html b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.html new file mode 100644 index 0000000000..7100d4300d --- /dev/null +++ b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.html @@ -0,0 +1,98 @@ + + + + + + + +
+ + + + diff --git a/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.html.snap-1.png b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.html.snap-1.png new file mode 100644 index 0000000000..f0ac9f59c0 Binary files /dev/null and b/__tests__/html2/markdown/codeBlockCopyButton/forcedColors.html.snap-1.png differ diff --git a/__tests__/html2/markdown/externalLinkIcon/forcedColors.dark.html b/__tests__/html2/markdown/externalLinkIcon/forcedColors.dark.html new file mode 100644 index 0000000000..5f344c5252 --- /dev/null +++ b/__tests__/html2/markdown/externalLinkIcon/forcedColors.dark.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/html2/markdown/externalLinkIcon/forcedColors.dark.html.snap-1.png b/__tests__/html2/markdown/externalLinkIcon/forcedColors.dark.html.snap-1.png new file mode 100644 index 0000000000..829f2cd035 Binary files /dev/null and b/__tests__/html2/markdown/externalLinkIcon/forcedColors.dark.html.snap-1.png differ diff --git a/__tests__/html2/markdown/externalLinkIcon/forcedColors.fluent.dark.html b/__tests__/html2/markdown/externalLinkIcon/forcedColors.fluent.dark.html new file mode 100644 index 0000000000..ac1ffc41a5 --- /dev/null +++ b/__tests__/html2/markdown/externalLinkIcon/forcedColors.fluent.dark.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/html2/markdown/externalLinkIcon/forcedColors.fluent.dark.html.snap-1.png b/__tests__/html2/markdown/externalLinkIcon/forcedColors.fluent.dark.html.snap-1.png new file mode 100644 index 0000000000..43bb7e326e Binary files /dev/null and b/__tests__/html2/markdown/externalLinkIcon/forcedColors.fluent.dark.html.snap-1.png differ diff --git a/__tests__/html2/markdown/externalLinkIcon/forcedColors.fluent.html b/__tests__/html2/markdown/externalLinkIcon/forcedColors.fluent.html new file mode 100644 index 0000000000..5e1e69071b --- /dev/null +++ b/__tests__/html2/markdown/externalLinkIcon/forcedColors.fluent.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/html2/markdown/externalLinkIcon/forcedColors.fluent.html.snap-1.png b/__tests__/html2/markdown/externalLinkIcon/forcedColors.fluent.html.snap-1.png new file mode 100644 index 0000000000..05b737dd34 Binary files /dev/null and b/__tests__/html2/markdown/externalLinkIcon/forcedColors.fluent.html.snap-1.png differ diff --git a/__tests__/html2/markdown/externalLinkIcon/forcedColors.html b/__tests__/html2/markdown/externalLinkIcon/forcedColors.html new file mode 100644 index 0000000000..e088e8d5b3 --- /dev/null +++ b/__tests__/html2/markdown/externalLinkIcon/forcedColors.html @@ -0,0 +1,116 @@ + + + + + + + +
+ + + + diff --git a/__tests__/html2/markdown/externalLinkIcon/forcedColors.html.snap-1.png b/__tests__/html2/markdown/externalLinkIcon/forcedColors.html.snap-1.png new file mode 100644 index 0000000000..29a5c1580e Binary files /dev/null and b/__tests__/html2/markdown/externalLinkIcon/forcedColors.html.snap-1.png differ diff --git a/__tests__/html2/richCard/animationCard.gif.fluent.html.snap-4.png b/__tests__/html2/richCard/animationCard.gif.fluent.html.snap-4.png index 9fd84b7654..f675259622 100644 Binary files a/__tests__/html2/richCard/animationCard.gif.fluent.html.snap-4.png and b/__tests__/html2/richCard/animationCard.gif.fluent.html.snap-4.png differ diff --git a/__tests__/html2/richCard/animationCard.gif.html b/__tests__/html2/richCard/animationCard.gif.html index 4d5405cbb7..d11f15f3b8 100644 --- a/__tests__/html2/richCard/animationCard.gif.html +++ b/__tests__/html2/richCard/animationCard.gif.html @@ -142,7 +142,7 @@ expect(matchMedia('(forced-colors: active)').matches).toBe(true); expect(matchMedia('(prefers-reduced-motion: reduce)').matches).toBe(true); - // THEN: The "Play animation" icon should be visible in forced colors. + // THEN: The "Play animation" icon and the border of the message should be visible in forced colors. await host.snapshot('local'); }); diff --git a/__tests__/html2/speech/recognition/dictating.forcedColors.dark.html b/__tests__/html2/speech/recognition/dictating.forcedColors.dark.html new file mode 100644 index 0000000000..de0ed8adb0 --- /dev/null +++ b/__tests__/html2/speech/recognition/dictating.forcedColors.dark.html @@ -0,0 +1,9 @@ + + + + + + + diff --git a/__tests__/html2/speech/recognition/dictating.forcedColors.dark.html.snap-1.png b/__tests__/html2/speech/recognition/dictating.forcedColors.dark.html.snap-1.png new file mode 100644 index 0000000000..cfcc854eea Binary files /dev/null and b/__tests__/html2/speech/recognition/dictating.forcedColors.dark.html.snap-1.png differ diff --git a/__tests__/html2/speech/recognition/dictating.forcedColors.html b/__tests__/html2/speech/recognition/dictating.forcedColors.html new file mode 100644 index 0000000000..24f8408da5 --- /dev/null +++ b/__tests__/html2/speech/recognition/dictating.forcedColors.html @@ -0,0 +1,94 @@ + + + + + + +
+ + + + diff --git a/__tests__/html2/speech/recognition/dictating.forcedColors.html.snap-1.png b/__tests__/html2/speech/recognition/dictating.forcedColors.html.snap-1.png new file mode 100644 index 0000000000..fbfc7ad554 Binary files /dev/null and b/__tests__/html2/speech/recognition/dictating.forcedColors.html.snap-1.png differ diff --git a/packages/component/src/LinkDefinition/LinkDefinitions.module.css b/packages/component/src/LinkDefinition/LinkDefinitions.module.css index 51723a17ed..64dca340bf 100644 --- a/packages/component/src/LinkDefinition/LinkDefinitions.module.css +++ b/packages/component/src/LinkDefinition/LinkDefinitions.module.css @@ -185,6 +185,10 @@ .link-definitions__list-item-text { text-decoration: underline; + @media (forced-colors: active) { + color: LinkText; + } + @media not (forced-colors: active) { color: var(--webchat__color--accent); } diff --git a/packages/component/src/Styles/StyleSet/MicrophoneButton.ts b/packages/component/src/Styles/StyleSet/MicrophoneButton.ts index 10ddeed2b9..0e2eb7ab29 100644 --- a/packages/component/src/Styles/StyleSet/MicrophoneButton.ts +++ b/packages/component/src/Styles/StyleSet/MicrophoneButton.ts @@ -1,12 +1,18 @@ import { StrictStyleOptions } from 'botframework-webchat-api'; +import { FORCED_COLORS_SELECTOR } from './Constants'; + export default function createMicrophoneButtonStyle({ microphoneButtonColorOnDictate }: StrictStyleOptions) { return { '&.webchat__microphone-button': { '&.webchat__microphone-button--dictating .webchat__microphone-button__button': { '&, &:focus, &:hover': { '& .webchat__microphone-button__icon': { - '--webchat__component-icon--color': microphoneButtonColorOnDictate + '--webchat__component-icon--color': microphoneButtonColorOnDictate, + + [FORCED_COLORS_SELECTOR]: { + '--webchat__component-icon--color': 'Highlight' + } } } } diff --git a/packages/component/src/hooks/RenderMarkdown.module.css b/packages/component/src/hooks/RenderMarkdown.module.css index ed9a2ae65a..95580c43b6 100644 --- a/packages/component/src/hooks/RenderMarkdown.module.css +++ b/packages/component/src/hooks/RenderMarkdown.module.css @@ -27,6 +27,13 @@ background-image: var(--webchat__icon-url--external-link); height: 0.75em; margin-inline-start: 0.25em; + + /* Forced colors keep background images in their own colors, draw the icon in the link color instead. */ + @media (forced-colors: active) { + background: LinkText; + -webkit-mask: var(--webchat__icon-url--external-link) center / contain no-repeat; + mask: var(--webchat__icon-url--external-link) center / contain no-repeat; + } } /* Citation button */ diff --git a/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.module.css b/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.module.css index 7830569f2c..a2e826bd1a 100644 --- a/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.module.css +++ b/packages/component/src/providers/CustomElements/customElements/CodeBlockCopyButton.module.css @@ -43,4 +43,8 @@ grid-row: 1; --webchat__component-icon--color: #707070; --webchat__component-icon--size: 16px; + + @media (forced-colors: active) { + --webchat__component-icon--color: ButtonText; + } } diff --git a/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css b/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css index 3504c33af8..6c21792d7c 100644 --- a/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css +++ b/packages/fluent-theme/src/components/activity/PartGroupingDecorator.module.css @@ -118,6 +118,10 @@ background: currentColor; -webkit-mask: var(--webchat__icon-url--external-link) no-repeat; mask: var(--webchat__icon-url--external-link) no-repeat; + + @media (forced-colors: active) { + background: LinkText; + } } } @@ -168,6 +172,19 @@ height: 0.7em; -webkit-mask: var(--webchat__icon-url--external-link) no-repeat; mask: var(--webchat__icon-url--external-link) no-repeat; + + @media (forced-colors: active) { + background: LinkText; + } + } + + @media (forced-colors: active) { + &, + &:hover, + &:hover:active { + border-color: LinkText; + color: LinkText; + } } } /* #endregion */ @@ -221,6 +238,12 @@ font-size: var(--webchat__font-size--small); height: 24px; padding-inline-end: var(--webchat-spacingHorizontalS); + + /* Button chips use the link color like link chips; the badge, divider and text inherit it. */ + @media (forced-colors: active) { + border-color: LinkText; + color: LinkText; + } } :global(.link-definitions__list-item-body) { @@ -280,6 +303,10 @@ mask: var(--webchat__citation__external-link--mask) no-repeat; padding: 0; width: 1em; + + @media (forced-colors: active) { + background: LinkText; + } } /* It seems Copilot does not show per-item sensitivity label, i.e. "General", etc. */ @@ -453,6 +480,14 @@ min-height: var(--webchat-part-grouping__bubble--min-height); } + /* Forced colors remove the bubble shadow and fill, so draw a border as the default theme does. */ + @media (forced-colors: active) { + &:not(.part-grouping-decorator--group) + :global(.stacked-layout .bubble:not(:has(.activity-loader)) .bubble__content) { + border: var(--webchat-strokeWidthThin) solid CanvasText; + } + } + :global(.stacked-layout .bubble .text-content) { font-size: var(--webchat__font-size--medium); line-height: var(--webchat__line-height--medium); diff --git a/packages/fluent-theme/src/components/icon/FluentIcon.module.css b/packages/fluent-theme/src/components/icon/FluentIcon.module.css index f6f274c23a..5bb990bdbf 100644 --- a/packages/fluent-theme/src/components/icon/FluentIcon.module.css +++ b/packages/fluent-theme/src/components/icon/FluentIcon.module.css @@ -26,6 +26,10 @@ /* #region: Appearance */ :global(.webchat) .appearance--text { --webchat__fluent-icon--color: currentColor; + + @media (forced-colors: active) { + --webchat__fluent-icon--color: CanvasText; + } } /* #endregion */ diff --git a/packages/fluent-theme/src/components/theme/Theme.module.css b/packages/fluent-theme/src/components/theme/Theme.module.css index 84639dc69b..180985645f 100644 --- a/packages/fluent-theme/src/components/theme/Theme.module.css +++ b/packages/fluent-theme/src/components/theme/Theme.module.css @@ -470,8 +470,17 @@ width: 20px; transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid); + /* Without a border, the button has no visible boundary in forced colors, so draw one as the default theme does. */ + @media (forced-colors: active) { + border: var(--webchat-strokeWidthThin) solid ButtonText; + } + :global(.code-block-copy-button__icon) { --webchat__component-icon--color: currentColor; + + @media (forced-colors: active) { + --webchat__component-icon--color: ButtonText; + } } &:hover {