[Bug]: Web Components Switch indicator is not visible in forced colors
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 68/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- css, typescript
- Domain
- accessibility, frontend, web-dev
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.
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
- Open the Fluent Web Components Switch Storybook: Components / Switch - Docs
- Make sure the Storybook theme is set to Web Dark.
- Open browser DevTools.
- Open More tools > Rendering.
- Set Emulate CSS media feature forced-colors to active.
- Alternatively, enable a Windows High Contrast theme.
- Review the fluent-switch component.
- 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.
- Dominant language
- TypeScript
- Stars
- 20.3k
- Forks
- 2.9k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 43
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from microsoft/fluentui
-
Component: CalendarDayGrid Component: WeeklyDayPicker Fluent UI react (v8) Type: Bug :bug:
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
-
Difficulty 1/5 Under an hour Newbie friendliness 85/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
All issues in microsoft/fluentui
Similar issues
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 91/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 95/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Automattic/studio#4908 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100