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.
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
- Open the Fluent UI React v9 Dropdown docs reproduction link.
- Ensure the high contrast theme is enabled in Storybook.
- Find a
Dropdown example using appearance="filled-darker".
- 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
Component
Dropdown
Package version
9.74.7
React version
Not app-specific; reproduced in the public Fluent UI React v9 Storybook documentation.
Environment
Current Behavior
Dropdowncontrols usingappearance="filled-darker"do not have a visible resting boundary in the high contrast theme.This appears to differ from other filled controls such as
InputandTextarea, which usetokens.colorTransparentStrokeso the resting boundary becomes visible in high contrast.Dropdowncurrently appears to usetransparentinstead: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
Dropdownshould 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
Dropdownexample usingappearance="filled-darker".Are you reporting an Accessibility issue?
yes
Suggested severity
Medium - Has workaround
Products/sites affected
Downstream products/sites using Fluent UI React v9
Dropdownwithappearance="filled-darker"in high contrast themes.Are you willing to submit a PR to fix?
no
Validations