Carbon: Modal lacks border to delineate edge of dialog, esp. for Low Vision transformations

Created on 30 Aug 2019 · 6Comments · Source: carbon-design-system/carbon

Modal lacks border to delineate edge of dialog, esp. for LV transformations

Environment

OS: Most reproducible on Windows, using high contrast (HC) mode
Browser: Firefox most reprodicble (adopts HC)
AT: Can occur with themes for magnifiers such as Zoomtext

Detailed description

The edge of the modal (both the white main dialog and the blue and black button regions) is defined by the colour contrast with the grey background, as show in this screenshot

In cases where the background content is not sufficiently greyed out OR where due to AT/browser transformations, the background or foreground is transformed, the delineation of the edge that is due entirely to contrasting colour can be lost.

For instance, in the following screenshot, Windows High Contrast mode has caused the background to go black, and reversed the colors of the main dialog area. The buttons have a defined border, but the main dialog region lacks any border, making it difficult for a user both to locate and to understand the context. It is not clear the text floating in the middle of the screen constitutes a dialog. (Where magnification is used, the problem is exacerbated.)

Similar issues can occur through some ATs.

What version of the Carbon Design System are you using?
v10 React http://react.carbondesignsystem.com/iframe.html?id=modal--default

What did you expect to happen?
I would expect that when the high contrast mode is adopted, the border of the dialog would be visible.

What happened instead?
Only the button borders are visible.

What WCAG 2.1 checkpoint does the issue violate?
Not clearly a violation, but obviously a DESIGN consideration.

Steps to reproduce the issue

From the Start menu, type High Contrast mode, and press Enter
Choose High Contrast #1
Launch the react carbon modal component in Firefox
Press F5 to refresh the browser (if it didn't adopt high contrast colours automatically)

Please create a reduced test case in CodeSandbox

Style and vanilla JS:
https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox

React:
https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

The simple solution to this is to have a defined border for the dialog. For designers concerned with making the dialog 'ugly' by adding a black stroke around the outside edge, there are ways of implementing a border that need not affect the untranformed view, but which will show up when users or ATs do things like override the CSS of the page.

modal high 😱 visual 🎨 1 🚨 a11y ♿

Source

mbgower

All 6 comments

@mbgower @dakahn I believe what our common solution we do for this scenario is add a border to the modal that is the same color as the modal background. This way it doesn't visual appear on the default setting but with high contrast mode active a border will be visible. @dakahn correct me if I'm wrong here, but I believe we've done this on several of our other components to resolve similar issues.

aagonzales on 2 Dec 2019

bump @dakahn would this work for addressing this issue?

joshblack on 9 Dec 2019

@aagonzales that solution seems to fix the the high contrast mode scenario 👍

As for having the modal background blend too much into the pages background when the unfocused page is insufficiently blurred/obscured or whatever -- we can address that with guidance I'd think.