Fluentui: The Text Color of Disable Label in High Contrast Mode is Wrong

[Lijing29]

Environment Information

• Package version(s): (fill this out) latest
• Browser and OS versions: (fill this out) Chromium Edge 81.0.416.64

Describe the issue:

Please provide a reproduction of the issue in a codepen:

https://codepen.io/lijinglin29/pen/RwWVJXW

Actual behavior:

Expected behavior:

The text in disabled text color, which is:

[aneeshack4]

I'm not sure that the green should be expected.

[joschect]

@Lijing29 I am able to reproduce this, I'm guessing there is something wrong in the azure theme because this seems to work fine with the default theme. We'll take a look.

[Lijing29]

When we set the text to be disabled, it should follow the system design in high contrast mode. In black-on-white mode, the disabled text color is the green. In other words, what the disabled text color is depends on the mode and the system setting.
Below figure is from https://docs.microsoft.com/en-us/windows/uwp/design/accessibility/high-contrast-themes

Another useful doc is https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-ms-high-contrast

[Lijing29]

@Lijing29 I am able to reproduce this, I'm guessing there is something wrong in the azure theme because this seems to work fine with the default theme. We'll take a look.

Thanks~

[JustSlone]

@hyoshis, @Jacqueline-ms, @wsmd, - as codeowners of azure-theme, is this something you all could pickup and fix?

[Jacqueline-ms]

@JustSlone absolutely, thanks for bringing to our attention. I will follow the high contrast theme doc provided and report back shortly.

[Jacqueline-ms]

High contrast dark

High contrast light

If you notice any discrepancies (such as high contrast dark vs light checkboxes) we followed exactly what is in the portal playground and are actively making design recommendations.

The last 2 commits in PR https://github.com/microsoft/fluentui/pull/14534 address this bug!

[JustSlone]

Fixed by #14534, closing