microsoft / microsoft/fluentui

Dropdown filled-darker has no visible resting boundary in Teams High Contrast theme

Open
#36,636 0 comments 0 reactions 1 assignee View on GitHub

@bsunderhus is already working on this.

Since Aug 27, 2026.

A11yUsable Area: Accessibility Component: Dropdown Fluent UI react-components (v9) Type: Bug :bug:
Dominant language
TypeScript
Stars
20.3k
Forks
2.9k
Avg merge
2d 9h
Merged PRs (30d)
46

Description

Component

Dropdown

Package version

9.74.7

React version

Not app-specific; reproduced in the public Fluent UI React v9 Storybook documentation.

Environment
Reproduced in the public Fluent UI React v9 Storybook documentation with the high contrast theme enabled.
Browser/OS are not expected to be specific to the issue because the repro is visible in the published docs styling.
Current Behavior

Dropdown controls using appearance="filled-darker" do not have a visible resting boundary in the high contrast theme.

Image

This appears to differ from other filled controls such as Input and Textarea, which use tokens.colorTransparentStroke so the resting boundary becomes visible in high contrast. Dropdown currently appears to use transparent instead:
https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-combobox/library/src/components/Dropdown/useDropdownStyles.styles.ts#L178C1-L179C1

Expected Behavior

A filled-darker Dropdown should have a visible resting boundary in high contrast, consistent with other filled controls.

Reproduction

https://storybooks.fluentui.dev/react/?path=/docs/components-dropdown--docs&globals=storybook_fluentui-react-addon_theme:teams-high-contrast

Steps to reproduce
  1. Open the Fluent UI React v9 Dropdown docs reproduction link.
  2. Ensure the high contrast theme is enabled in Storybook.
  3. Find a Dropdown example using appearance="filled-darker".
  4. Observe that the Dropdown has no visible resting outline/border.
Are you reporting an Accessibility issue?

yes

Suggested severity

Medium - Has workaround

Products/sites affected

Downstream products/sites using Fluent UI React v9 Dropdown with appearance="filled-darker" in high contrast themes.

Are you willing to submit a PR to fix?

no

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.