[Modal] Add high contrast border

[LauraAubin]

WHY are these changes introduced?

Part of #795

Border is missing on high contrast mode in Windows.

WHAT is this pull request doing?

Adds a transparent border to the modal so that in high contrast we can see the modal outline.

Couldn't screenshot since I don't have Windows setup.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[LauraAubin]

@dpersing could you tophat this change on Windows with high contrast mode? I don't have Windows setup yet 🙏

[alex-page]

@dpersing could you tophat this change on Windows with high contrast mode? I don't have Windows setup yet 🙏

Let me know if you want help setting this up!

[dpersing]

For this line, we'll want to use an actual color instead of transparent. Basically, there are two ways to make a border show up:

• Use a transparent border by default in regular CSS
• Use a colored border in the @media query

Calling for a transparent border with the @media query actually displays a transparent border! Which seems weird, but there we are.

(Please ignore the highlighted text; that's macOS and VMWare not playing nice together while I tried to take a screenshot.)

In this case, I think we might want to go with the default foreground text color for High Contrast, which would look like something like this:

@media (-ms-high-contrast: active) {
    border: 1px solid ms-high-contrast-color('text');
  }

There are some other examples of that usage in the codebase that might help.

Let me know too if I can help you get set up with test tools!

[chloerice]

@LauraAubin your hunch was right! @dpersing the reason we went with the media query was to be declarative about why the border is there, so the solution you mentioned above is :chefkiss:

[dpersing]

Sweeeeet. Let me know if I can help further, @LauraAubin and @chloerice !

[dpersing]

@LauraAubin The color is showing up correctly in dev tools now, but it's not displaying because there's no width set! Should just need a 1px solid or similar:

border: 1px solid ms-high-contrast-color('text');

I think the closest example is the one that's in the Progress bar, where the border and the color is being set. Let me know if that helps!

[LauraAubin]

Setting up my windows VM so I can actually check these changes haha 😅

[LauraAubin]

My border color doesn't show up as yellow but I think that's just my VM.

[dpersing]

My border color doesn't show up as yellow but I think that's just my VM.

It depends on the High Contrast theme you pick! Looks perfect. 🎉

[dpersing]

Yay for getting your VM set up! This looks great.