In High Contrast mode, close icon in Modal does not show up

[mbgower]

In High Contrast mode, close icon in Modal does not show up

Environment

OS: Windows, using high contrast (HC) mode
Browser: Firefox (adopts HC)

Detailed description

The X icon displayed to close the modal dialog that is normally visible in the upper right corner, as show in this screen shot

Becomes invisible in HC mode. There is a border drawn around the place where it is located, but the actual icon is invisible.

The impact is lessened by the existence of the border and a title value "Close the modal" that is displayed on hover (although simply "Close" is sufficient). Thus if the user can see the screen, they can distinguish the rectangle and hover over it to understand the function, as shown in the below screenshot. Obviously a visible icon is better.

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 icon is visible.

What happened instead?
Only the border of the icon is visible.

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

Steps to reproduce the issue

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

[abbeyhrt]

Due to FireFox not supporting Microsoft's CSS extension for targeting elements in HCM, we officially do not support Windows & Firefox HCM. You can read about that decision here.