Fluentui: High contrast in Edge Chromium

[xugao]

Issue

Styles are broken in High contrast mode in the new chromium Edge browser, but works in old Edge browser.

Root cause

In old Edge, the -ms-high-contrast media query implies -ms-high-contrast-adjust: none;.
In new/chromium Edge, this is no longer the case and -ms-high-contrast-adjust: none; needs to be set explicitly.

Fix

Setting -ms-high-contrast-adjust: none is to ask the browser to not override those styles when high contrast is enabled. We need to make sure we set -ms-high-contrast-adjust: none; everywhere we set -ms-high-contrast from now on.

[dzearing]

I am still a little confused.

The high contrast media queries we use are here:

https://github.com/OfficeDev/office-ui-fabric-react/blob/55d59941b04c97f4e40cd4f8cb197289279185a0/packages/styling/src/styles/CommonStyles.ts

export const HighContrastSelector = '@media screen and (-ms-high-contrast: active)';

Can you provide a code sample of the change? Where would -ms-high-contrast: none go? In the selectors or as a property within the selectors match?

[xugao]

Update:
I made fixes for couple components to demo how fixing this bug on our side would look like: https://github.com/xugao/office-ui-fabric-react/pull/8
This is really ugly for us to apply to all our components. So I hesitate to do it right away. Currently, we have not getting urgent partner escalations on fixing this issue. Therefore, I am currently still in chat with Edge team (Bogdan Brinza, Rossen Atanassov, Alison Maher) and some partners to figure out if there is a way to fix this at browser level, rather than application level.

[xugao]

Update:
Currently we/a11y testers are filing similar bugs to Edge team. Hopefully we can see a browser level fix soon instead of fixing on our side in such a hacky way, such as #11859

[xugao]

Related issue: https://github.com/w3c/csswg-drafts/issues/4178

[omarsourour]

Hello,

Are there any updates regarding this? We're facing the same issue as this bug #11540, and it is closed without any resolution.

Are there upcoming releases from the Fabric team that tackles this?

[xugao]

@omarsourour - currently we are transferring similar bugs to Edge/Anaheim team to address at browser level. Edge team is in active discussion with CSS WG.
Rossen Atanassov updated me today that this will be discussed in this week's group call.
Feel free to ping me on Teams if you have further questions/concerns.

[prachi-cs91]

Is there an update on this? We are seeing different behavior on spartan/Anaheim browser and old edge while using spin button in high contrast mode. I think it should be fixed on browser level rather than us overriding the selectors in our code level. Is there an ETA as on when this can be fixed?

[xugao]

@prachi-cs91 - We will start fixing this issue on our side starting this week. If you have components/scenarios that you need urgent fix for, please report specific issue(s)

[xugao]

Update (May 5th 2020)

Given the little progress made on fixing this issue on the browser side, our team decided to take on fixing this in our code. Here are some specific steps:

1. I will resume previous PR #11859 and get that merged. And work towards fixing all similar issues user have reported so far.
2. Our team will do a manual pass on all the components and bucket them into priorities based on how broken the experience is in Edge Chromium. Then start fixing them based on priorities.

If you encountered a bug that needs urgent fix, pls report that as an issue so we can prioritize.

[ecraig12345]

See also #13012 for status of different components.

[xugao]

most outstanding bugs should be fixed now. but will continue leaving this open for some time in case for more reports