Show icons and link references in forced colors by OEvgeny · Pull Request #5907 · microsoft/BotFramework-WebChat

Eugene (OEvgeny) · 2026-10-19T05:51:46Z

Fixes #4906, fixes #4907

Changelog Entry

Fixed

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 and #4907, in PR #5907, by @OEvgeny

Description

In forced colors, icons were drawn in the background color or dark gray, and non-URL references were not in the link color. They now use system colors in forced colors only (LinkText for links), and Fluent bubbles and the Copy button get a border, as in the default theme.

Specific Changes

CSS: FluentIcon, Copy button (ButtonText border in Fluent), Fluent bubbles (CanvasText border), external link icons, link references, Fluent pills and chips (also hovered); MicrophoneButton (Highlight while dictating)
New forcedColors tests, snap 1: markdown/externalLinkIcon/, markdown/codeBlockCopyButton/, linkDefinition/ (Fluent pills and chips all LinkText), speech/recognition/dictating, fluentTheme/telephoneKeypad, fluentTheme/citation.hover; fluentTheme/icons snaps 1–2; Fluent snaps show message borders
richCard/animationCard.gif.fluent.html snap 4: send box icons and message border visible
I have added tests and executed them locally
I have updated CHANGELOG.md
I have updated documentation

Review Checklist

This section is for contributors to review your work.

Accessibility reviewed (tab order, content readability, alt text, color contrast)
Browser and platform compatibilities reviewed
CSS styles reviewed (minimal rules, no z-index)
Documents reviewed (docs, samples, live demo)
Internationalization reviewed (strings, unit formatting)
package.json and package-lock.json reviewed
Security reviewed (no data URIs, check for nonce leak)
Tests reviewed (coverage, legitimacy)

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Eugene (OEvgeny) · 2026-10-19T17:01:42Z

William Wong (compulim) · 2026-10-19T18:50:37Z

Not exactly sure, maybe the "1 reference" should not be in yellow or not.

Let's try browser native <summary> to see if it is yellow or not.

Because what I feel (from other screenshots) is that "yellow is for hyperlink", for example, the send button is an action and is not yellow.

Here is how it looks like with the details:

It doesn't have frame around, but for the frame I imagine we do benefit from a different color

William Wong (compulim) · 2026-10-19T18:51:19Z

The copy button does not have a border.

Added a ButtonText border to the Copy button in forced colors in 2f6af04, see snap 1.

William Wong (compulim) · 2026-10-19T18:51:33Z

Copy button does not have border.

Added a ButtonText border to the Copy button in forced colors in 2f6af04, see snap 1.

William Wong (compulim) · 2026-10-19T18:52:22Z

Not exactly sure but it seems missing the message border.

Fluent bubbles now get a CanvasText border in forced colors (fb2720c), see snap 1.

William Wong (compulim) · 2026-10-19T18:52:34Z

Seems missing message border.

Fluent bubbles now get a CanvasText border in forced colors (fb2720c), see snap 1.

William Wong (compulim) · 2026-10-19T18:53:15Z

Message border maybe?

Yes, added in fb2720c, see snap 4.

William Wong (compulim) · 2026-10-19T18:55:03Z

    text-decoration: underline;

+    @media (forced-colors: active) {
+      color: LinkText;


Capitalization, some time we have buttonText, and this one is LinkText.

I think "TitleCase" is good.

Switched all system colors in this PR to TitleCase in 158e811.

William Wong (compulim) · 2026-10-19T18:55:26Z

  --webchat__fluent-icon--color: currentColor;
+
+  @media (forced-colors: active) {
+    --webchat__fluent-icon--color: canvasText;


Suggested change

--webchat__fluent-icon--color: canvasText;

--webchat__fluent-icon--color: CanvasText;

Applied in 158e811.

William Wong (compulim) · 2026-10-19T18:56:11Z

      --webchat__component-icon--color: currentColor;
+
+      @media (forced-colors: active) {
+        --webchat__component-icon--color: buttonText;


Nitpick.

Suggested change

--webchat__component-icon--color: buttonText;

--webchat__component-icon--color: ButtonText;

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color

Applied in 158e811.

In forced colors, Fluent icons with the text appearance were painted in the background color: the mask icon is drawn with `background-color: currentColor`, which forced colors replace with `Canvas`. - FluentIcon: text-appearance icons use `canvasText` in forced colors, the same as ComponentIcon, so the Upload file, Send, Telephone keypad and microphone buttons, starter prompt images, the telephone keypad message icon and the drop zone icon are visible - Tests: fluentTheme/icons.forcedColors (light and dark), fluentTheme/telephoneKeypad.forcedColors; updated the forced-colors snapshot of richCard/animationCard.gif.fluent.html (send box icons)

The icon of the Copy button of code blocks was painted in the background color in forced colors, in the default and Fluent themes. - Use `buttonText` in forced colors, like ActivityButton (#5897) - Tests: markdown/codeBlockCopyButton/forcedColors (default and Fluent, light and dark)

…ced colors

Also await actRecognizeOnce() in the dictating test, drop its unrelated name assertion, and shorten the changelog entry.

…orced colors

Eugene (OEvgeny) marked this pull request as ready for review October 19, 2026 07:41

Copilot AI balanced review requested due to automatic review settings October 19, 2026 07:41

Eugene (OEvgeny) requested review from William Wong (compulim), Chris Whitten (cwhitten) and TJ Durnford (tdurnford) as code owners October 19, 2026 07:41

Copilot AI reviewed Oct 19, 2026

Eugene (OEvgeny) force-pushed the OEvgeny/fix-fluent-forced-colors-icons branch from d067a05 to e266265 Compare October 19, 2026 07:53

Eugene (OEvgeny) changed the title ~~Show icons in forced colors in the Fluent theme and code blocks~~ Show icons and link references in forced colors Oct 19, 2026

William Wong (compulim) reviewed Oct 19, 2026

View reviewed changes

William Wong (compulim) requested changes Oct 19, 2026

View reviewed changes

Eugene Olonov added 12 commits October 19, 2026 19:22

Add changelog entry

8cb53bf

Add PR number to changelog

e5b1089

Show external link icons and link references in the link color in for…

6204a2f

…ced colors

Show the microphone icon while dictating in forced colors

b709f13

Update changelog entry

5c44c51

Hide the send box in the code block forced colors test

25e7125

Keep hovered Fluent citations in the link color in forced colors

67d8659

Also await actRecognizeOnce() in the dictating test, drop its unrelated name assertion, and shorten the changelog entry.

Draw Fluent citation pills and reference chips in the link color in f…

ef5e204

…orced colors

Draw a border around the Fluent code block Copy button in forced colors

85b9850

Draw a border around Fluent message bubbles in forced colors

98127b8

Write system colors in title case

bad14a7

Eugene (OEvgeny) force-pushed the OEvgeny/fix-fluent-forced-colors-icons branch from 158e811 to bad14a7 Compare October 20, 2026 02:22

	--webchat__fluent-icon--color: canvasText;
	--webchat__fluent-icon--color: CanvasText;

	--webchat__component-icon--color: buttonText;
	--webchat__component-icon--color: ButtonText;

Conversation

Eugene (OEvgeny) commented Oct 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog Entry

Fixed

Description

Specific Changes

Review Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Eugene (OEvgeny) commented Oct 19, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Eugene (OEvgeny) commented Oct 19, 2026 •

edited

Loading