Skip to content

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

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.

Metadata

Metadata

Type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions