microsoft / microsoft/fluentui

[Bug]: Web Components Switch indicator is not visible in forced colors

Open Beginner friendly
#36,676 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Fluent UI WC (v3) Type: Bug :bug: web-components
Dominant language
TypeScript
Stars
20.3k
Forks
2.9k
Avg merge
2d 9h
Merged PRs (30d)
46

Description

Component

Switch

Package version

3.1.2

@microsoft/fast-element version

the latest

Environment
Go to the Fluent Web Components Switch Storybook: 3.1.2 as of this bug creation.
|https://storybooks.fluentui.dev/web-components/?path=/docs/components-switch--docs&globals=theme:web-dark
Current Behavior

When using the Fluent Web Components fluent-switch Windows forced colors enabled, the switch indicator/thumb is rendered black or white depending if light or dark mode.

The indicator should use a forced-colors system color that maintains contrast, such as CanvasText, ButtonText.

Expected Behavior

The switch indicator should remain clearly visible when forced-colors: active is enabled, regardless of whether the application is using the light or dark Fluent theme.

Reproduction

The switch indicator/thumb renders black against a black background, causing it to visually disappear.

Steps to reproduce
Image
  1. Open the Fluent Web Components Switch Storybook: Components / Switch - Docs
  2. Make sure the Storybook theme is set to Web Dark.
  3. Open browser DevTools.
  4. Open More tools > Rendering.
  5. Set Emulate CSS media feature forced-colors to active.
  6. Alternatively, enable a Windows High Contrast theme.
  7. Review the fluent-switch component.
  8. Observe the switch indicator/thumb.
Are you reporting an Accessibility issue?

yes

Suggested severity

Medium - Has workaround

Products/sites affected

NXT

Are you willing to submit a PR to fix?

yes

Validations
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Fluent Web Components Switch Storybook entry point linked in the issue and reproduce the bug with forced-colors set to active, using the Web Dark theme. Locate the fluent-switch indicator/thumb styling and check its behavior in both light and dark themes. Done means the indicator remains clearly visible in DevTools emulation and a Windows High Contrast theme.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
accessibility, frontend, web-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.