[Accessibility] Some of the components are not visible or rendered properly in Windows High Contrast Mode

[anandbkrishnamohan]

While testing our application in Windows High Contrast Mode (Both ie11 and Edge), could see that some of the material-ui/core components are not visible or rendered properly. Reproduced the issues while accessing the Demo Components in material-ui page (https://material-ui.com/)

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

In Windows High Contrast Mode, all elements should be visible and user friendly.

Current Behavior

In Windows High Contrast Mode, the below components are not behaving as expected

• Switches are not visible.
• User cannot distinguish between enabled and disabled Selection Controls like Radio button and Checkbox.
• The first character in Text Field (if not intended) is cropped.
• The first character in some of the Select (if not intended) is cropped.
• In Menus, user is not able to distinguish between selected and de-selected MenuItem.

Steps to Reproduce

1. In Windows 10, open High Contrast setting and select a High contrast theme (High Contrast#1 or High Contrast#2)
2. Open ie11 and Edge browsers.
3. Go to https://material-ui.com/demos/ and validate Switches, Text Field, Menus, Select etc
4. Verify the issues.

Context

Our application is used by many users who have visual problems and need to make sure it's accessible to all users across platforms.

Your Environment

Tech	Version
Material-UI/core	v3.0.0
React	v16.4.1
Browser	ie11, Edge

[oliviertassinari]

Could it be a duplicate of #12710?

[anandbkrishnamohan]

This is not a duplicate of the mentioned bug ticket. It is not the case of aria-hidden changing from true to false. Please review the below screenshots showing that there is no change in the Switches DOM in High Contrast mode, but the element is not visible.

[eps1lon]

I'm going to look into the Windows mode but I fear this might not be in our power. High Contrast extension from google chrome displays them perfectly well:

That is the default mode (inverted color). All other modes look good as well.

Maybe our color scheme is not suited for this mode.

[anandbkrishnamohan]

I also tested the Colour schemes in Windows (which is a separate option) and everything works fine. The issue is with material ui components are not visible in High Contrast Mode in Windows.

[oliviertassinari]

The issue is with High Contrast Mode in Windows.

@anandbkrishnamohan Does it mean we can close the issue?

[anandbkrishnamohan]

@oliviertassinari maybe you got confused with the way I wrote the sentence. The issue is that some of the material-ui components are not visible in high contrast mode - it is not a problem with high contrast mode. As @eps1lon mentioned it may be the color scheme is not suited for this mode.

[nagvbt]

Any update on this issue ?

• This is making us whether to go with Material-UI components or NOT since one of our major requirement is to Support the 'Windows High Contrast Mode'.

Please let me when this issue will be addressed.
Also if you have any work around to support 'Windows High Contrast Mode' for iE & Edge browsers please let us know.

Thanks,
Nag

[oliviertassinari]

Any update on this issue ?

@nagvbt Yes, you are the update :). Did you test Windows High Contrast Mode with v5? Does it work? If it's not working what's failing? If it's failing, did you look into how we could solve it?

[sarahannnicholson]

Can we also add LinearProgress components to this list?
These circular ones are fine

But Linear ones:

I would suggest something like this for the linear ones:

[oliviertassinari]

@sarahannnicholson Is there a media query to detect when Windows is in high contrast mode? Did you try to customize the theme to fix this?

[sarahannnicholson]

Hey @oliviertassinari yeah there's a media query but it's not standardized yet. Also some colors that pick up the different high contrast mode themes.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-ms-high-contrast#examples

I added the media query to my MUI theme:

const highContrast = {
    whiteOnBlack: {
        '@media (-ms-high-contrast: white-on-black)': {
            filter: 'invert(100%)'
        }
    },
    blackOnWhite: {
        '@media (-ms-high-contrast: black-on-white)': {
            filter: 'invert(100%)'
        }
    },
    mediaQuery: (key) => `@media (-ms-high-contrast: ${key})`
}

const mergedtheme = createMuiTheme({
    base,
    accessibility: { highContrast },
    newTheme
})

Then in a component's JSS I would do something like

const useClasses = makeStyles(({ palette, spacing, accessibility: { highContrast } }) => ({
    progressBar: {
        [highContrast.mediaQuery('active')]: {
            height: `${spacing(1.5)}px`,  // maybe increase height on HC mode
            border: `2px solid WindowText`,
            backgroundColor: 'window'
        }
    },
    bar: {
        [highContrast.mediaQuery('active')]: {
            backgroundColor: 'WindowText'
        }
    }
}))

and Linear Progress Component

const ProgressBar = ({ value }) => {
    const classes = useClasses()

    return (  
                <LinearProgress
                    classes={{ root: classes.progressBar, bar: classes.bar }}
                    variant="determinate"
                    value={value}
                />
    )
}

[sarahannnicholson]

@oliviertassinari Found a different media query that is more standardized @media forced-colors

Ref: Windows Blog

We recently changed our MUI theme to:

const highContrast = {
    whiteOnBlack: {
        '@media (forced-colors: active) and (prefers-color-scheme: dark)': {
            filter: 'invert(100%)'
        }
    },
    blackOnWhite: {
        '@media (forced-colors: active) and (prefers-color-scheme: light)': {
            filter: 'invert(100%)'
        }
    },
    mediaQuery: (key) => `@media (forced-colors: ${key})`
}



const mergedtheme = createMuiTheme({
    base,
    accessibility: { highContrast },
    newTheme
})

Would be great if this was supported in MUI. We are wrapping nearly every component to add these High Contrast Styles.

[fymmot]

With the risk of this being off topic @sarahannnicholson, but I'm wondering in what circumstances will you be applying the whiteOnBlack and blackOnWhite media queries with filter(invert) ?

In my understanding, invert defeats the purpose of Windows High Contrast Mode / Forced Colors mode, which is to let the user set their desired colors on the system level and having them apply everywhere. The invert filter would interfere and render things white that the user wants to be black, and vice versa. Right?

(edited after reading your post more closely 🙂 )

[sarahannnicholson]

Hey @fymmot !

I always try to use the general media query and the CSS colors to target high contrast users since users are able to adjust the windows theme to their preferences.

For the other queries, white on black and the black on white I mostly use them for changing high contrast of images. We have a lot of black pngs or white pngs on our site, hence the invert.